How to Create a Timer using JavaScript

JavaScript makes it very simple to create complex features in your web applications.
One of the most common features is a timer that counts how much time has elapsed.
In this post, we'll learn how to create a timer in JavaScript like the one below:
- HTML
- CSS
- JavaScript
How to Create a Timer in JavaScript
To create a timer, let's first start of with the HTML markup:
<div class="timer">
<div class="time">00:00</div>
<button class="trigger" onClick="toggleTimer()">Start</button>
</div>
In our HTML, we have the overall timer container, a div that will display the time, and a button that will start and stop the timer.
Let's add some styles to this:
.timer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: auto;
width: 16rem;
height: 16rem;
border: 1px solid #ccc;
border-radius: 50%;
background: white;
font-family: sans-serif;
}
.time {
font-size: 2rem;
font-weight: bold;
}
.trigger {
margin-top: 1rem;
padding: 0.5rem 1rem;
border: 1px solid lightgray;
border-radius: 4px;
background: white;
cursor: pointer;
}
Here's how this looks so far:
- HTML
- CSS
Now it's time (get it?) for the JavaScript.
Let's start by querying for the elements we need:
const time = document.querySelector(".time");
const trigger = document.querySelector(".trigger");
Add an event listener to the trigger button:
const toggleTimer = () => {};
trigger.addEventListener("click", toggleTimer);
We need to keep track of the time, so let's create a variable to store the time:
let timeElapsed = 0;
Now, to actually keep track of time, we'll need to use the setInterval
function.
This function takes two arguments: a callback function and a time interval.
Inside the callback function, we'll increment the time by 1 second:
const toggleTimer = () => {
setInterval(() => {
timeElapsed += 1;
}, 1000);
};
So far we have this:
const time = document.querySelector(".time");
const trigger = document.querySelector(".trigger");
let timerInterval;
let timeElapsed = 0;
const toggleTimer = () => {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
} else {
timerInterval = setInterval(() => {
timeElapsed += 1;
}, 1000);
}
};
trigger.addEventListener("click", toggleTimer);
Now all we need to do is update the time on the page and the text on the trigger button:
const formatTime(seconds) => {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
const formattedSeconds = remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds;
const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
return `${formattedMinutes}:${formattedSeconds}`;
};
const toggleTimer = () => {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
trigger.innerText = "Start";
} else {
timerInterval = setInterval(() => {
timeElapsed += 1;
time.innerText = formatTime(timeElapsed);
}, 1000);
trigger.innerText = "Stop";
}
};
Here's the full code:
const time = document.querySelector(".time");
const trigger = document.querySelector(".trigger");
let timerInterval;
let timeElapsed = 0;
const formatTime = (seconds) => {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
const formattedSeconds = remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds;
const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
return `${formattedMinutes}:${formattedSeconds}`;
};
const toggleTimer = () => {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
trigger.innerText = "Start";
} else {
timerInterval = setInterval(() => {
timeElapsed += 1;
time.innerText = formatTime(timeElapsed);
}, 1000);
trigger.innerText = "Stop";
}
};
trigger.addEventListener("click", toggleTimer);
Here is the final result in the demo below:
- HTML
- CSS
- JavaScript
Conclusion
In this post, we learned how to create a simple timer using JavaScript.
We used the setInterval
function to keep track of time and the clearInterval
function to stop the timer to let the user control the timer.
Thanks for reading!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on X! You can also join the conversation over at our official Discord!
Leave us a message!