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 19^th. https://github.com/JamieMcGibbon/TechnicalCafe/blob/master/Misc%20Tutorials/Stopwatch%20Tutorial/script.js

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:http://student.athabascau.ca/~calvinca3/

Link to my files:https://landing.athabascau.ca/file/view/7425864/unit4js