{"id":67716,"date":"2019-08-13T16:26:56","date_gmt":"2019-08-13T10:56:56","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=67716"},"modified":"2019-08-14T18:47:06","modified_gmt":"2019-08-14T13:17:06","slug":"javascript-project-countdown-timer","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/","title":{"rendered":"JavaScript Project &#8211; How to design Countdown Timer in JavaScript Easily"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1450,&quot;href&quot;:&quot;https:\\\/\\\/drive.google.com\\\/open?id=11XvFkkOVDBcxs5nto14FCWJx-xXYzUYz&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/drive.google.com\\\/file\\\/d\\\/11XvFkkOVDBcxs5nto14FCWJx-xXYzUYz\\\/view?usp=drive_open&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>The previous DataFlair&#8217;s <em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-project-photo-gallery\/\">JavaScript project on photo gallery<\/a><\/strong><\/em> was interesting, wasn&#8217;t it? This time, we will create a JavaScript project on countdown timer. We will learn how to use basic HTML, CSS, and pure JavaScript to build a countdown timer. We will not focus on the designing of the page (HTML and CSS). Our main objective will be to learn how to create a timer as per your liking. This project is very basic, but you can modify it and add complex features as you like.<\/p>\n<p><em><strong>You can download the clock image used in this JavaScript Project from &#8211; <a href=\"https:\/\/drive.google.com\/open?id=11XvFkkOVDBcxs5nto14FCWJx-xXYzUYz\">Clock<\/a><\/strong><\/em><\/p>\n<h2>JavaScript Project &#8211; Countdown Timer<\/h2>\n<h3>1. How to Create the HTML file<\/h3>\n<p>The first task to creating any webpage is adding its HTML content. In your text editor, save the new file with the name <strong>timer.html<\/strong> and start coding. Now, you can either use custom code or the following code to do so.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt; \r\n  &lt;head&gt; \r\n    &lt;link href=\"css\\timer.css\" type=\"text\/css\" rel=\"stylesheet\" \/&gt;\r\n      &lt;script src = \"js\\timer.js\"&gt;&lt;\/script&gt; \r\n  &lt;\/head&gt; \r\n\r\n  &lt;body &gt; \r\n\r\n      &lt;div id=\"clock\"&gt; \r\n      \t&lt;h2&gt;Click the image to start the timer (60 seconds)&lt;\/h2&gt;\r\n      \t&lt;img src=\"img\\Clock.png\" onclick=\"countdown();\"&gt;\r\n      \t&lt;div id=\"timeBox\"&gt; \r\n      \t\t&lt;h3&gt;Time Left&lt;\/h3&gt;\r\n            &lt;input id=\"min\" type=\"text\"&gt;&lt;font size=\"10\"&gt;:&lt;\/font&gt; \r\n            &lt;input id=\"sec\" type=\"text\"&gt; \r\n            &lt;p id=\"msg\"&gt;&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;\/div&gt; \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67761\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code.jpg\" alt=\"JavaScript project timer HTML code display\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-HTML-code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>This is the only code you need to understand the working of a timer. Remember, you can add HTML and CSS as you wish to make the webpage more attractive. There are no obligations while doing so. All you need is to be careful while combining these files. Don\u2019t forget to cross-check all the classes and ids you define in the files.<\/p>\n<p>After adding HTML, the webpage will look something like this.<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67762\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output.jpg\" alt=\"JavaScript timer HTML output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-timer-HTML-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Now it\u2019s time to add some styling to our page with the help of CSS.<\/p>\n<h3>2. Add CSS to the Page<\/h3>\n<p>The second step in website creation is designing. The code below contains a specific style, but I would ask you to play with it as much as you can. Hopefully, you are all familiar with CSS since you\u2019re trying the projects. If not, I would recommend you to do that first because we will not discuss the HTML and CSS content in this JavaScript tutorial. So, here\u2019s the code to the CSS file. Name this file as<strong> timer.css<\/strong> and save it in the \u2018<strong>css<\/strong>\u2019 folder that resides in the current folder.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">#clock {\r\n    margin: auto;\r\n    padding: 0;\r\n    text-align: center;\r\n    border: 5px solid blue;\r\n    width: 35%;\r\n    line-height: 50px;\r\n    font-size: larger;\r\n    background-color: white;\r\n}\r\n.container {\r\n    background: #222;\r\n    width: 100%;\r\n    height: 100% ;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\ninput{\r\n    width: 45px; \r\n    border: none;\r\n    font-size: 40px; \r\n    font-weight: bold;\r\n    color: black;\r\n}\r\nimg{\r\n    width: 90%;\r\n}\r\nbody{\r\n    background-color: #333;\r\n}<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67765 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code.jpg\" alt=\"JavaScript project on clock - CSS code\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-clock-CSS-code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>After adding CSS, our page looks something like this.<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67766\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output.jpg\" alt=\"JavaScript project on timer - CSS output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-timer-CSS-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>But the thing is, we only created a static website with HTML and CSS. This means that the timer will not actually work. All it will do is show the page as above forever. But that isn\u2019t what we want, now, right? Okay, so our countdown timer will work when we add JavaScript to our webpage.<\/p>\n<h3>3. Splitting the JavaScript code<\/h3>\n<p>It\u2019s amazing how many times we use JavaScript, isn\u2019t it? We can achieve so much with just a few lines of code! So, let\u2019s continue to the next step: adding JavaScript. But before going to the complete code, I have split the content of the JavaScript file in sections. This will help you easily understand what is happening.<\/p>\n<h4>Starting with an Easy Code<\/h4>\n<p>The first thing we need to do is to define the variables and the <strong>countdown()<\/strong> function that executes as soon as the user clicks the image. The <em>setTimeout() method<\/em> in JavaScript calls a function or evaluates an expression after the specified number of milliseconds. In this program, the method calls the Decrement() function after 60 milliseconds.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var mins = 1; \r\nvar secs = mins * 60; \r\nfunction countdown() { \r\n    setTimeout('Decrement()', 60); \r\n}\r\n\r\n<\/pre>\n<p><em><strong>Time to revise the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-function\/\">concept of JavaScript Functions<\/a><\/strong><\/em><\/p>\n<h4>The Decrement() function<\/h4>\n<p>Next, we will define the Decrement() function in the program that gets the location where we want to display the time in minutes and seconds. The function acts differently when the time remaining is less than 10 seconds. We\u2019ve introduced various conditional statements that execute as the conditions change. We <em>change the<\/em> <em>colour of the text, get an alert box and change the time displayed on the page.<\/em> You can alter the code and execute it, noticing what happens when you do so. The function, as defined in the JavaScript file is as follows:<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function Decrement() { \r\n        minutes = document.getElementById(\"min\"); \r\n        seconds = document.getElementById(\"sec\");\r\n\r\n        if (seconds &lt; 59) { \r\n        seconds.value = secs; \r\n} \r\nelse { \r\n        minutes.value = getMinutes(); \r\n        seconds.value = getSeconds(); \r\n}\r\n        if (secs &lt; 10) { \r\n            minutes.style.color = \"red\"; \r\n            seconds.style.color = \"red\";\r\n            document.getElementById(\"msg\").innerHTML = \"HURRY UP!!\"; \r\n} \r\n        if (mins &lt; 0) { \r\n            alert('Timeout'); \r\n            minutes.value = '00'; \r\n            seconds.value = '00';\r\n            document.getElementById(\"timeBox\").innerHTML = \"&lt;b&gt;Time's up.&lt;\/b&gt;\";\r\n}\r\n        else { \r\n            secs--; \r\n            setTimeout('Decrement()', 1000); \r\n        } \r\n}<\/pre>\n<h4>A few more Functions<\/h4>\n<p>If you have any trouble understanding any of the concepts, you must check out our\u00a0<em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-tutorials-home\/\">JavaScript Tutorial Series<\/a><\/strong><\/em>. They will equip you with all the knowledge you will need to grasp the concepts of this project. Anyways, the last step is to add two more functions we used in the above function: <strong>getMinutes()<\/strong> and <strong>getSeconds()<\/strong>. The task of these functions is to get the values of <strong>mins<\/strong> and <strong>secs<\/strong> from the page and return the equivalent integer value.<\/p>\n<p>The <strong>code<\/strong> for them is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function getMinutes() { \r\n    mins = Math.floor(secs \/ 60); \r\n    return mins; \r\n} \r\nfunction getSeconds() { \r\n    return secs - Math.round(mins * 60); \r\n}<\/pre>\n<p>Okay, I hope you are clear with all the functions we defined above. If you understand\u00a0all of them, move onto the complete code. If not, try to understand what is happening before you proceed. This is because it will be easier for you to experiment with the code if you understand what the code actually means.<\/p>\n<h3>4. Our favorite part &#8211; using JavaScript!<\/h3>\n<p>Let\u2019s combine all the code from the previous section and watch how it all turns out. Save this file with the name <strong>timer.js<\/strong> in the <strong>js<\/strong> folder. The js folder must be located in the current folder containing the HTML file. This is the standard procedure to save all the external files while creating a webpage. But, if you decide to save it in a different folder, it\u2019s alright as long as you remember to mention the correct location in the HTML file. The complete JavaScript code to create the webpage with a countdown timer is as follows.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var mins = 1; \r\nvar secs = mins * 60; \r\nfunction countdown() { \r\n    setTimeout('Decrement()', 60); \r\n} \r\nfunction Decrement() { \r\n        minutes = document.getElementById(\"min\"); \r\n        seconds = document.getElementById(\"sec\");\r\n\r\n        if (seconds &lt; 59) { \r\n            seconds.value = secs; \r\n        } \r\n        else { \r\n            minutes.value = getMinutes(); \r\n            seconds.value = getSeconds(); \r\n        }\r\n        if (secs &lt; 10) { \r\n            minutes.style.color = \"red\"; \r\n            seconds.style.color = \"red\";\r\n            document.getElementById(\"msg\").innerHTML = \"HURRY UP!!\"; \r\n        } \r\n        if (mins &lt; 0) { \r\n            alert('Timeout'); \r\n            minutes.value = '00'; \r\n            seconds.value = '00';\r\n            document.getElementById(\"msg\").innerHTML = \"Time's up.\";\r\n        }\r\n        else { \r\n            secs--; \r\n            setTimeout('Decrement()', 1000); \r\n        } \r\n}\r\nfunction getMinutes() { \r\n    mins = Math.floor(secs \/ 60); \r\n    return mins; \r\n} \r\nfunction getSeconds() { \r\n    return secs - Math.round(mins * 60); \r\n}<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67767\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project.jpg\" alt=\"Implementing JavaScript code in timer project\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Implementing-JavaScript-code-in-timer-project-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>This will get your clock into motion as soon as you click the clock image. It will also change its color as soon as you cross the 10-second mark of your clock. The text also changes when the session expires (after the alert box appears). Before clicking the clock, the page will look the same as it did when we added the CSS.<\/p>\n<p><strong>Output (just after clicking the clock):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67771\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock.jpg\" alt=\"JavaScript timer project output just after clicking the clock\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-just-after-clicking-the-clock-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output (after a few seconds):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67772\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds.jpg\" alt=\"JavaScript timer project output after few seconds\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-few-seconds-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output (when less than 10 seconds are left):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67773\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left.jpg\" alt=\"JavaScript timer project output less than 10 seconds left\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-less-than-10-seconds-left-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output (after time finishes):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67774\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes.jpg\" alt=\"JavaScript timer project output after time finishes\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/timer-project-output-after-time-finishes-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>In this project, we predefined the time we wanted the timer to have. You can easily alter that time to manually set the time. If you get stuck, go back to the<em><strong> JavaScript DataFlair Tutorials<\/strong><\/em> and revise the concepts. See where your code failed. You can use the browser console to debug your code. With practice, you will be able to customize the countdown timer as you need.<\/p>\n<h2>Summary<\/h2>\n<p>In this JavaScript tutorial, we worked on the project of creating a countdown timer. Since now\u00a0you understand the steps to create a countdown timer in JavaScript, you can use the other concepts you learned in JS and modify the code. See if that works or not; if not, then try to find the reason behind it.<\/p>\n<p><em>&#8220;The best way to master any programming language is to practice as much as you can and there is no better way to do so than building a project&#8221;<\/em><\/p>\n<p><em><strong>One more project to become the master of JavaScript Language &#8211; <a href=\"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/\">JavaScript Project on To-do List<\/a><\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The previous DataFlair&#8217;s JavaScript project on photo gallery was interesting, wasn&#8217;t it? This time, we will create a JavaScript project on countdown timer. We will learn how to use basic HTML, CSS, and pure&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":67958,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20854,20853,20845],"class_list":["post-67716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-decrement-function","tag-javascript-countdown-timer","tag-javascript-project"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Project - How to design Countdown Timer in JavaScript Easily - DataFlair<\/title>\n<meta name=\"description\" content=\"JavaScript Project on Countdown Timer - Learn to create a countdown timer in JavaScript with the help of HTML, CSS, JavaScript code and different functions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Project - How to design Countdown Timer in JavaScript Easily - DataFlair\" \/>\n<meta property=\"og:description\" content=\"JavaScript Project on Countdown Timer - Learn to create a countdown timer in JavaScript with the help of HTML, CSS, JavaScript code and different functions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-13T10:56:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-14T13:17:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Project - How to design Countdown Timer in JavaScript Easily - DataFlair","description":"JavaScript Project on Countdown Timer - Learn to create a countdown timer in JavaScript with the help of HTML, CSS, JavaScript code and different functions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Project - How to design Countdown Timer in JavaScript Easily - DataFlair","og_description":"JavaScript Project on Countdown Timer - Learn to create a countdown timer in JavaScript with the help of HTML, CSS, JavaScript code and different functions.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-13T10:56:56+00:00","article_modified_time":"2019-08-14T13:17:06+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Project &#8211; How to design Countdown Timer in JavaScript Easily","datePublished":"2019-08-13T10:56:56+00:00","dateModified":"2019-08-14T13:17:06+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/"},"wordCount":1169,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg","keywords":["Decrement() function","javascript countdown timer","JavaScript Project"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/","url":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/","name":"JavaScript Project - How to design Countdown Timer in JavaScript Easily - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg","datePublished":"2019-08-13T10:56:56+00:00","dateModified":"2019-08-14T13:17:06+00:00","description":"JavaScript Project on Countdown Timer - Learn to create a countdown timer in JavaScript with the help of HTML, CSS, JavaScript code and different functions.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-Countdown-Timer.jpg","width":802,"height":420,"caption":"JavaScript Project - How to Create Countdown Timer using JavaScript Code"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Project &#8211; How to design Countdown Timer in JavaScript Easily"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=67716"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67716\/revisions"}],"predecessor-version":[{"id":67908,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67716\/revisions\/67908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/67958"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=67716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=67716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=67716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}