Today we'll be looking into making a timer in JavaScript; A timer can be used in many ways for several purposes. In my case, it is a game timer. It will start once the game starts and keeps track of how long it takes someone to solve something.
Let's dive into it and make our first JavaScript timer.
HTML Structure
<div class="container">
<div id="timer">00:00</div>
<button onclick="startTimer()">Start</button>
</div>
We add a container for centering purposes, inside we add our timer with the default of 00:00 so people can see what they are expecting.
And then a button that will start the timer for now.
CSS Structure
As for the CSS it's a pure visual game in this project, nothing magic going on.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background: #e9c46a;
}
#timer {
margin-bottom: 25px;
font-size: 3rem;
font-weight: bold;
color: #2a9d8f;
&.odd {
color: #264653;
}
}
button {
border-radius: 5px;
display: inline-block;
border: none;
padding: 1rem 2rem;
margin: 0;
text-decoration: none;
background: #e76f51;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
&:hover {
background: #f4a261;
}
}
The central part here is the container, which uses the flex centering technique.
JavaScript Timer
Now on to the fun part, the JavaScript to making the timer work.
var timer = document.getElementById('timer');
var timerInterval;
We start our JavaScript by defining the timer element and our interval for the timer.
Next, we are going to define the button's function we called startTimer.
For this we are using the Arrow functions.
startTimer = () => {
// Firs twe start by clearing the existing timer, in case of a restart
clearInterval(timerInterval);
// Then we clear the variables
var second = 0,
minute = 0,
hour = 0,
odd = false;
// Next we set a interval every 1000 ms
timerInterval = setInterval(function() {
// check if we are odd or even and append class to timer
odd = !odd;
if (odd) {
timer.classList.add('odd');
} else {
timer.classList.remove('odd');
}
// We set the timer text to include a two digit representation
timer.innerHTML =
(hour ? hour + ':' : '') +
(minute < 10 ? '0' + minute : minute) +
':' +
(second < 10 ? '0' + second : second);
// Next we add a new second since one second is passed
second++;
// We check if the second equals 60 "one minute"
if (second == 60) {
// If so, we add a minute and reset our seconds to 0
minute++;
second = 0;
}
// If we hit 60 minutes "one hour" we reset the minutes and plus an hour
if (minute == 60) {
hour++;
minute = 0;
}
}, 1000);
};
I've written comments in between the code snippet to make clear what happens on each line.
The important part is we are use setInterval to recall the function every 1000ms. Inside this, we manually add seconds and minutes and update the innerHTML of our timer div.
I've also included a fun part which will change the color of our timer every second.
// check if we are odd or even and append class to timer
odd = !odd;
if (odd) {
timer.classList.add('odd');
} else {
timer.classList.remove('odd');
}
You can find my article about using the classList in JavaScript here.
As usual, you can find a demo on this Codepen.
See the Pen Vanilla JavaScript Timer by Chris Bongers (@rebelchris) on CodePen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (0)