Creating a Simple Stopwatch with JavaScript

JS is very powerful frontend tool but it always been my weakness. In hope to improve my JS skill, I want to try to make simple vanilla JS projects, started with a stopwatch.

At the end, the final project would look like this:

Creating the necessary file

I begin with making 3 files - html, js, and css.

1. index.html
2. main.css
3. main.js

In index.html

In the file, type exclamation mark ( ! ) and hit enter so you don't have to write the HTML structure manually.

Line 7: Rename the document title to anything
Line 9: Link the css file before head close tag
Line 12 - 21: Stopwatch elements. We have .time to display the numbers, .controls to hold all the start, stop and reset buttons, and .watch to hold all those elements.
Line 23: Link the js file before body close tag

In main.css

There is nothing much to say about the css as the styling is pretty basic. Highlights on the font though. At first, I tried using Poppins as it is always my favorite font but there is a problem when the numbers of the stopwatch changes, it causes all the numbers to shift left and right. I will show you what I mean in gif at the end of this post.

In main.js

I actually not fully understand my own code but it works although I came up with it myself by combining codes from multiple tutorials and adjust it to suit the situation. I will to try to explain my code but I apologize beforehand if there's any mistake.

• Line 1 - 9: Declaration of global variables
• Line 3 - 5: Get the element from the id and classes in index.html
• Line 7: When the timer starts, all the value to the time would start with 0
• Line 8: For calling a function that will make the timer working
• Line 9: Marker to check if the the timer is running or not. Default value is set to "stopped"
• Line 12 - 13: (Self-explanatory)
• Line 16 - 50: The timer function
• Line 17: When the timer is running, we started adding the value 10 to milliseconds. 1 second is equal to 1000 milliseconds so if we add only 1 instead or other values  instead of 10, the timer would be incorrect
• Line 20 - 31: The conditional statement that will make the number appear like how time is always displayed. When the milliseconds is 1000, reset the value to 0 and added 1 to seconds. Same logic is used for minutes and hours.
• Line 33 - 40, 46, 52 - 54: By default milliseconds will display as 3 digits number. Because the timer is an addition of 10 with 10, there's always 0 at the end of the number. This code is to drop that 0 at the end, so it will only display the first 2 digits
• Line 43 - 45: To add zero in front of a number if the number is less than 10 so the time wouldn't look odd
• Line 49: Display the time in the element with the class .watch > .time
• Line 56 - 70: Function that will start or stop the timer
• Line 72 - 79: Function that will stop and reset the timer

That's all, you're done!

So, the reason why I don't use my favorite font, Poppins is because the numbers will shifting like this:

I also made a different style of the stopwatch without the milliseconds and with individual stop and start buttons. Check out the codes in my GitHub!

Visit the Project

Helpful links 🔗

1. https://www.youtube.com/watch?v=49f1cjZWRJA
2. https://www.youtube.com/watch?v=1INmsFnD-u4
3. https://dev.to/shantanu_jana/create-a-simple-stopwatch-using-javascript-3eoo
4. https://stackoverflow.com/questions/34582986/changing-milliseconds-from-3-digits-to-2-digits