Categories
JavaScript Answers

How to create a simple 10 second countdown with JavaScript?

Spread the love

Sometimes, we want to create a simple 10 second countdown with JavaScript.

In this article, we’ll look at how to create a simple 10 second countdown with JavaScript.

How to create a simple 10 second countdown with JavaScript?

To create a simple 10 second countdown with JavaScript, we use the setInterval method.

For instance, we write

<progress value="0" max="10" id="progressBar"></progress>

to add a progress element.

Then we update it by writing

let timeleft = 10;
const downloadTimer = setInterval(() => {
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);

to call setInterval with a function that calls clearInterval to stop the timer if timeLeft is 0 or less.

Otherwise, we update the progress element with the value of 10 - timeleft to show the count down value.

And then we decrement timeLeft by 1.

Conclusion

To create a simple 10 second countdown with JavaScript, we use the setInterval method.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.