DEV Community

Cover image for Create a Simple Stopwatch using JavaScript

Create a Simple Stopwatch using JavaScript

Shantanu Jana on October 06, 2021

In this article you will learn how to make a simple stop watch using JavaScript. Stopwatch is a simple JavaScript project that is important enough ...
Collapse
 
svilenpavlov profile image
Info Comment hidden by post author - thread only accessible via permalink
Svilen Pavlov

Hi!

Would you, please, edit your article and fix the typo, where you explain about the minutes' if statement.

"The third time I used the 'if' function I executed the time in minutes. When the minute time reaches 80, you will see 0 in the minute cell and 1 in the hour cell."

"80" should be "60" as it is in the code below.
You may delete my comment, afterwards.

That's one great and at the same time simple enough exercise/project! Thank you!

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank you for saying
This is a typing mistake. Now I have edited it.

Collapse
 
svilenpavlov profile image
Svilen Pavlov

Yeah, my thoughts exactly - a typo.

You are welcome!

And keep sharing your development experiences. I enjoyed the article very much.

While reading it, I was imagining drawing some pixel art sprites for the numbers and it didn't go far enough to whether should I use them in a canvas element for the rendering of a coundown-timer. It sounded like a neat idea in my imagination. Like an old arcade game, having a countdown timer for its levels or something...

Not exactly a stopwatch like in your project, although the time and its displaying would be using similar techniques. Well, for a full game there are other considerations, like the game, and animations' loops. Usually different counters are used for those, which may regulate the framerates, animations, AI actions, inputs reading... It's a whole Universe, there. For the time being I was thinking only around one UI element - a countdown timer.

Collapse
 
rafaelpidias profile image
rafael

Hello Everyone, my reset button is not working
May you help me
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]
let timerRef = document.querySelector(".timer-display")
let int = null

document.getElementById("start-timer").addEventListener("click", () => {
if (int!==null) {
clearInterval(int)
}
int = setInterval(displayTimer, 10)
})

document.getElementById("pause-timer").addEventListener("click", () => {
clearInterval(int)
})

document.getElementById("reset-timer").addEventListener("click", () => {
clearInterval(int)[milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]
timerRef.innerHTML = "00 : 00 : 00 : 000 "
})

function displayTimer() {
milliseconds += 10
if (milliseconds == 1000) {
milliseconds = 0
seconds++
if (seconds == 60) {
seconds = 0
minutes++
if (minutes == 60) {
minutes = 0
hours++
}
}
}
let h = hours < 10 ? "0" + hours : hours
let m = minutes < 10 ? "0" + minutes : minutes
let s = seconds < 10 ? "0" + seconds : seconds
let ms =
milliseconds < 10
? "00" + milliseconds
: milliseconds < 100
? "0" + milliseconds
: milliseconds

timerRef.innerHTML = `${h} : ${m} : ${s} : ${ms}`
Enter fullscreen mode Exit fullscreen mode

}

HTML
<!DOCTYPE html>






StopWatch



00 : 00 : 00 : 000


Start
Pause
Reset

Collapse
 
megatkc profile image
MegaTKC

I really like the UI. It looks very good. Keep up the great work! :)

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank you

Collapse
 
pepsyfarely profile image
Info Comment hidden by post author - thread only accessible via permalink
PepsyFarely

I've tried to create the stopwatch but it's giving error in time adjustment , don't know why ... any suggestions ? best tantrik in Nowrangapur

Collapse
 
djmithunk profile image
Forknok

Nice

Collapse
 
ihtesham_haider profile image
Ihtesham Haider

Thanks for this valuable content!

Collapse
 
shantanu_jana profile image
Shantanu Jana

You are welcome 😊

Collapse
 
hackermanprith profile image
Hackermanprith • Edited

Great job.

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank you

Collapse
 
peenana2 profile image
pee nana

It's very simple and a like your step-by-step tutorial. I'll like to try this on my own. Thanks.

Collapse
 
shantanu_jana profile image
Shantanu Jana

welcome

Collapse
 
gnugautama profile image
Agung Utama

nice!

Collapse
 
shantanu_jana profile image
Shantanu Jana • Edited

Thank you @gnugautama

Collapse
 
meo3w profile image
Phil Hasenkamp

This is awesome work! Thank you for sharing!

Collapse
 
shantanu_jana profile image
Shantanu Jana

Welcome 😍

Collapse
 
andysaktia profile image
andysaktia

Cool!

Collapse
 
shehuabdulkadir profile image
ShehuAbdulkadir

Very clean code. Thank you!

Collapse
 
jotajeff profile image
Jeferson Silva

Great job. Congratulations

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank you 😊

Collapse
 
brandonwallace profile image
brandon_wallace

I like the article. You did a good job on it.

Collapse
 
shantanu_jana profile image
Shantanu Jana

Welcome 😊

Collapse
 
kumars1998 profile image
Kumars1998

Concept of adding 10 in millisecond,
I didn't get it.
Help me to find the solution.

Some comments have been hidden by the post's author - find out more