how to create a countdown with javascript in simple steps

how to create a countdown with javascript in simple steps

In this tutorial, we shall see how we can create a simple JavaScript countdown in a few simple steps without using any external JavaScript libraries. however, note that this tutorial will only focus on teaching you how to create a simple how we can create a simple JavaScript countdown and will not involve any CSS stylings or designs. so let's get started!

how to create a JavaScript countdown
how to create a JavaScript countdown

steps to create a Javascript Countdown:

Firstly, we will create an HTML document by writing basic HTML tags such as etc. then save this file as "countdown.html" in your desired location.


how to create a javascript countdown
how to create a javascript countdown

Now that you have done this, lets move to the next step.
In the next step inside the Tag we will create a paragraph for displaying the countdown. we will create a paragraph using
Tag and assign it an id of "counter" as shown below:

<p id="counter">10</p>

This paragraph will be used for displaying the countdown using javascript. nowhere our HTML Work is over and let's move on to the JavaScript part.

Adding javascript onto the HTML page we make use of script  Tags.

and all the javaScript code is written between them.

Now, in the next step, we will add the JavaScript which will display the countdown. for that add the following JavaScript code inside the



var count = setInterval(function()
{
var link = "<a href='#'>next</a>";
var seconds = document.getElementById('counter').textContent;
seconds = seconds - 1;
document.getElementById('counter').innerHTML=seconds;
if(seconds == 0){
clearInterval(count);
document.getElementById('counter').innerHTML = link;
}
},1000);

Explanation of Javascript code:

  • in the first step, we declare a variable that contains a setInterval() which is called after each second.
  • in the next first step, we have declared a variable name link which contains a link which will be displayed when the countdown will be over
  • in the next step we have declared a variable named seconds which takes the value from paragraph counter which we declared earlier in the HTML this value is taken using the textContent() method of JavaScript. which returns the value of any element.
  • in the next step we decrement(decrease) the value of seconds by 1
  • after decrementing we have to update the latest value of seconds variable to the paragraph tag this is done in this step using innerHTML method.
  • in the next step we check if the value of seconds variable has reached 0 or not if it has reached then we clear the interval using clearInterval() method.
  • after clearing the interval we display the link to new page. if you want to display a message instead of link you may change the value of link variable to any message as per your requirement as shown below:
        var link = "countdown is over";
  • you can see 1000 written at the end this is because the setInterval() method is called after each second. that is 1000 mili seconds = 1 second
Note: This countdown will go from 10 to 0. however if you want a countdown  going from 1 to 10 then you must change the value of paragraph counter to 1 as shown below:

<p id="counter">1</p>

Also, you must make some changes in the javascript code as shown below:

var count = setInterval(function(){var link = "next"; 
var seconds = document.getElementById('counter').textContent;seconds = seconds + 1; 
document.getElementById('counter').innerHTML=seconds;if(seconds == 10){clearInterval(count); 
document.getElementById('counter').innerHTML = link;
} 
},1000);

The Final  Code should look something like this:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Coountdown</title>
</head>
<body>
<p id="counter">10</p>
<script type="text/javascript">
var count = setInterval(function()
{
var link = "<a href='#'>next</a>";
var seconds = document.getElementById('counter').textContent;
seconds = seconds - 1;
document.getElementById('counter').innerHTML=seconds;
if(seconds == 0){
clearInterval(count);
document.getElementById('counter').innerHTML = link;
}
},1000);
</script>
</body>
</html>



how to create a javascript countdown


check the output live here: view output


0 Comments: