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 - JS

  • Public
By Calvin Carley in the group COMP 266 December 21, 2020 - 12:35pm

I chose a timer for my JavaScript. My personas do not have a lot of time and are typically stressed or anxious already. Having to “set a timer” is an extra step, possible causing more stress or panic as they are currently not able to pause any animations.  I do not want them to have to fumble opening their stopwatch app or having to look away at a clock or watch. Those actions are contradictory to the sites overall theme and purpose. Just like additional clicks and limiting interactions, I do not want them to have to take this extra step.  Specifically, they will need a minute and seconds timer. A full chronometer is too much. There is not need for nano seconds as that would be far too distracting. As well no need for hours as the personas will not be spending that much time. Further I wanted a count-up rather than countdown. Countdowns feel more anxiety inducing, it is hard to relax when you feel like you are being timed that way.  I feel like this is an obvious connection to my documentation. I chose not to put a max time limit at this point (Some of my personas may want to continue beyond the time) and fix the position to top rather than repeat for each container. This may also be a better styling for the timer skew animations as well. I wanted a timer without buttons and use the setTimeout property, I could not make that work. I considered having it run on page load and then fade in with CSS at the correct time. This also was sloppy and confusing to personas as the timer would not start at 0:00. I searched stack exchange and videos, I could not grasp how to make the setTimeout work. I was able to modify the code to start at a negative time and offset that with CSS.

The script I used was from Jamie McGibbon found December 19th.


The code does not use any iteration. This could be implemented with a while loop if I had chosen to put a time limit; while displayMinutes < 5:00 for example. Potentially a for loop as well had I set a max number of seconds in a separate variable.  Variables are used and declared properly. Declared at the top and without brackets allows them to be accessed globally. They are initialized to match the HTML element and begin counting from the correct integer.  This is done at the beginning of the script with the let statement and incrementation via the ++ method. While the let statement does have full support in  for IE 11 and earlier. However, issues can be avoided by using let outside of for loops and declaring at the top of document rather than within a block or loop.

The script uses operator to manipulate those variables by increasing the HTML display tag.  

The interval is initialized to null as the variable interval is not pointing to any object.

Conditionals are used to determine when to increment. The setInterval method is used to call the function and is set to 1000ms, which is equal to one second. This executes the function every one second. So the count is incremented by one, every one second as a timer should.

The comments included on this code are great, they help define each section of script and describe the purpose of the script. Indentation and order as well are good. Camel case is used appropriately. I would challenge the name of “display” for the html tag. It may not be descriptive enough in a script with hundreds of lines. Perhaps “displayTimer” is more apt.

In the first conditional statement for the stopwatch function the comparison operator === is used to ensure both equal value and type. This is later converted back to a string for the HTML display using the .toString method.


For this unit I would give myself a B. The main reason being that the code does not use parameters or iteration. I was able to successfully modify the code to meet the needs of my personas and was able to provide a decent critique of the script.


Link to my site:

Link to my files: