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:

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:

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:

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!

• Support Us
• Join
• Share
• Post
• Share