DOMINIC SIMPSON

DOMINIC SIMPSON

Dom’s Stopwatch

Dom's stopwatch screenshot

View Stackblitz link
View GitHub repository

In this app, I have produced a stopwatch, using the specified time of 00:00:00:00 (hours, minutes, seconds, centiseconds). In addition, the app also includes a laps feature.

An addEventListener connected to each button in the JavaScript triggers a callback function, which handles the functionality for each. Meanwhile, in order to numerically identify each recorded lap, I have incremented the laps variable in the lapTimer callback function.

Meanwhile, a displayTimer function handles the logic of incrementing seconds from centiseconds; minutes from seconds; and hours from minutes. In addition, the function added a zero before numbers when they are less than ten. In the case of centiseconds, which contains a slightly more complicated logic, if the value was a single digit less than 10, the function added 00 before the number; however, if the value was between 10 and 100, the function added 0 before the number.

I wanted a futuristic, technological-looking font for the logo of the stopwatch, and settled accordingly on Press Start 2P from Google Fonts. Finally, I ensured that each button had a contrastingly different colour, so as not to associate sub-groups of buttons with each other, which could confuse the user.