DEV Community

loading...
Cover image for Create a Stopwatch in JavaScript

Create a Stopwatch in JavaScript

gspteck profile image GSPTeck Updated on ・3 min read

Creating a timer is a very simple task. We will only be using variables, functions and THAT'S IT!

HTML code:

<html>
    <head>
        <title>JavaScript</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="stopwatch">
            00:00:00
        </div>

        <ul id="buttons">
            <li><button onclick="startTimer()">Start</button></li>
            <li><button onclick="stopTimer()">Stop</button></li>

            <li><button onclick="resetTimer()">Reset</button></li>
        </ul>

        <script src="main.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS code:

body {
    background: #202020;
    color: white;
}
button {
    width: 100px;
    height: 30px;
    border: 3px soldi white;
    border-radius: 50px;
    background: #202020;
    color: white;
    cursor: pointer;
    outline: none;
}

#stopwatch {
    font-size: 100px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#buttons {
    position: absolute;
    top: 55%;
    left: 48.4%;
    transform: translate(-51.6%, -45%);
}
#buttons li {
    display: inline;
    padding-left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript code:

const timer = document.getElementById('stopwatch');

var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;

function startTimer() {
  if (stoptime == true) {
        stoptime = false;
        timerCycle();
    }
}
function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}

function timerCycle() {
    if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);

    sec = sec + 1;

    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }
    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = '0' + sec;
    }
    if (min < 10 || min == 0) {
      min = '0' + min;
    }
    if (hr < 10 || hr == 0) {
      hr = '0' + hr;
    }

    timer.innerHTML = hr + ':' + min + ':' + sec;

    setTimeout("timerCycle()", 1000);
  }
}

function resetTimer() {
    timer.innerHTML = '00:00:00';
}
Enter fullscreen mode Exit fullscreen mode

Edit:
As pointed out by 'uthx' in the comments we need to add a function to reset the values of sec, min and hr when resetting the time. We can do that by using the following function (function coded by 'uthx'):

function resetTimer() {
    timer.innerHTML = "00:00:00";
    stoptime = true;
    hr = 0;
    sec = 0;
    min = 0;
}
Enter fullscreen mode Exit fullscreen mode

Final Result:
Alt Text
(Naturally it works. Tested it myself 😉)

Explanation

Disclaimer! In the code you may notice it's called a 'timer' and not 'stopwatch', that's because 'timer' is shorter than 'stopwatch' and I don't feel like having to type that all the time 😂.

  • const timer = document.getElementById('stopwatch'); imports the timer 'div' as a variable, using it's id, so we can modify it as we wish.
  • var hr = 0; var min = 0; var sec = 0; we are creating the hour, minute and second variables and we are declaring that their initial value is 0.
  • var stoptime = true; we create a variable so we can then verify if the stopwatch is running or not.
  • if (stoptime == true) { stoptime = false; timerCycle(); } if the stopwatch is not running, turn it on and go to the timerCycle() function. (This only runs if we click the 'Start' button)
  • if (stoptime == false) { stoptime = true; } if the stopwatch is running, turn it off. (This only runs if we click the 'Stop' button)
  • if (stoptime == false) { verify that the stopwatch is on.
  • sec = parseInt(sec); min = parseInt(min); hr = parseInt(hr); these are used to parse a string into an integer. (if we have 1045 as a string and we want to use it as an integer, we parse it)
  • sec = sec + 1; add 1 to seconds.
  • if (sec == 60) { if seconds are equal to 60, minutes = 1 and seconds becomes 0 again.
  • if (min == 60) { if minutes are equal to 60, hours = 1 and seconds + minutes becomes 0 again.
  • Fun part:
if (sec < 10 || sec == 0) {
   sec = '0' + sec;
}
if (min < 10 || min == 0) {
   min = '0' + min;
}
if (hr < 10 || hr == 0) {
   hr = '0' + hr;
}
Enter fullscreen mode Exit fullscreen mode

If seconds, minutes and/or hours are lower than 10, add a 0 in front. This is why we need to parse everything in the beginning: doing this operation they become strings.

  • timer.innerHTML = hr + ':' + min + ':' + sec; add these values to the 'timer' div.
  • setTimeout("timerCycle()", 1000); this will make sure there is a timeout of 1000 ms (1s) before repeating the 'timerCycle()'.
  • timer.innerHTML = '00:00:00'; used to reset the timer to 00:00:00

AND WE'RE DONE!

Discussion (9)

pic
Editor guide
Collapse
mahmoudibnsamy profile image
Mahmoud Ibn Samy

It's a good implementation but I think by the time it won't represent the real-time as the 'setTimeout()' function won't run after an exact second, there will be some small lag.
I think it will be better if you made use of the Date object.

Collapse
gspteck profile image
GSPTeck Author

That's a great idea, but at the moment I don't know how to do that.
If I ever learn how to do it, I might update the post.

Collapse
uthx profile image
uthx

Reset Functionality is not fully implemented.

Collapse
gspteck profile image
GSPTeck Author

What do you mean? Reset just makes the string 00:00:00 again. What isn't implemented?

Collapse
uthx profile image
uthx

It is just resetting the UI Part but not the actual variables which are still storing the old time values. Below is what i did to get it working.
function resetTimer() {
timer.innerHTML = "00:00:00";
stoptime = true;
hr = 0;
sec = 0;
min = 0;
}

Thread Thread
gspteck profile image
GSPTeck Author

yeah you are right! missed that lol

Collapse
harshvats2000 profile image
HARSH VATS

Your code might work but I really don't think it's good level of code bcoz it's not understandable easily for someone else analysing it.
Have a look at mine and decide yourself which one is better.
jsfiddle.net/2vwcd3a8/

Collapse
praveenkalady profile image
praveen

Great post bro

Collapse
gspteck profile image