Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit

Unit 4 Learning Diary

  • Public
By Kelsey in the group COMP 266 April 14, 2020 - 12:05pm

 site files

here

Original Code Files

files with the original code, critiquing, and more

What I did:

This unit I added some JavaScript to the website this made it more dynamic. After reading through the unit page thingy I went to w3schools to read about js and how it can be used in website. Then I started learning about the syntax for the language. Now having a more clear understanding of the language I went looking for a script that would make the top navigation bar of my site collapse for smaller devices. I also needed a script that would allow me to toggle the display for the challenge solutions (needed a small modification).

What Went Well and Didn't Go Well:

Everything for this unit went pretty good and I would not say that anything didn't go well. It was very easy to find the code snippets I needed and they were easy to understand.

What I Would Do Differently:

There is nothing that I would do differently as everything went smoothly

The Most Valuable Thing I Learned:

Everything that I learned this unit was helpful and I found it all quite valuable. There wasn't anyone thing about js that I would put above the others.

Learning OutComes:

critique JavaScript code was written by others, identifying examples of both good and bad practices

in the Original Code Files I explain what is good and not good about the js code and provided a solution to make the code better. I then use these solutions when adding the code to my site

use JavaScript to add dynamic content to pages

I added the js that I found to my site to add a collapsible top navigation bar as well as hid the solutions to the challenges until the user clicks on a button.

modify existing JavaScript code to extend and alter its functionality and, where appropriate, to correct errors and cases of poor practice

I modified the code that is used to toggle the challenge solutions to be more dynamic and work with multiple buttons and solutions. The original would not have worked because I was only made for one button and a specific id. I also provided the changes for bad names and added the necessary comments that were missing

Indicative Grading Criteria Self Grade

  • Critique js code written by others - provided in the file at the top

  • use js to add dynamic content to pages - I now have a navigation bar that works with mobile phones by collapsing when the screen width gets too small there is also the toggling of the solutions for challenges

  • carefully chosen code... - I chose code that would bring value and functionality to my site. The relation to the personas and scenarios is down further

  • modify existing code - I changed the code for the toggling the display of elements to work more dynamically with id's allowing it to work with multiple challenges. This made DRY code.

    self Grade B

Linking to Personas and Scenarios

As most people use their phones for everything I was important that the site be mobile-friendly, and having a collapsing navigation bar is a big part of that. because without a collapsing nav bar the site would not look good for mobile and would be difficult to use. This would not make it easy to retain users because they would not want to use something that does not work well. This all goes back to Jenny and how she wants a site that is nice looking and easy to use. Making the solutions to the challenges hidden by default is good for Sebastian because now he won't accidentally see the solution or be temp to just look at it. He'll be able to apply what he has learned to try solving problems.