Countdown Timer Using Html,Css and Javascript

Create Countdown Timer Using HTML,CSS & JavaScript Code

Create Countdown Timer Using HTML, CSS & JavaScript Code

Hello, Coder! Thank you for visiting the Codewithrandom site. In today’s Blogs, We discover how to make a Countdown Timer Using HTML, CSS, and JavaScript. A countdown timer begins at a specific time and counts down until zero.

Create Countdown Timer Using HTML,CSS & JavaScript Code
Create Countdown Timer Using HTML,CSS & JavaScript Code

 

What is Countdwon Timer?

‘Stopper’ what comes in your mind when you listen this word. The stopper which is on the road to slow down the vehicle speed. Or the stopper which sets the time so that the person should complete his challenge or target which is set by himself. Stopper is very precious instrument in sports, army etc. And for students who prepare for exam while solving question paper. But now lets learn front end development by creating a virtual stopper, In this project you’ll get to know that how a fresher developer can involve himself in the learning o front end development.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Display the countdown to any special event, such as a birthday or anniversary.

Welcome to Codewithrandom I hope you have got an idea about the project.

HTML Code for Countdown Timer

<div class="container">
    <div class="subContainer">
        <form id="numbersForm">
        <input id="minutesInput" type="number" min="0"  placeholder="Minutes">
        <span id="colonStyle" class="colon">:</span>
        <input id="secondsInput" type="number" min="0" max="60" maxlength="2" step="5" placeholder="Seconds" value="">
        </form>
        <form>
        <input id="startButton" type="button" placeholder="Start" value="Start">
        <span class="colon">&nbsp;</span>
        <input id="resetButton" type="button" placeholder="reset" value="Reset">
        </form>
    </div>
    <progress id="progressBar" max="0" value="0" class="progress_styled"></progress>
</div>

In this HTML Code we have defined a container in which it will contain all our content then we have defined the seconds & minutes with min & max value with the placeholder as well. Then we have defined the buttons which are start and reset and a progress bar as a additional feature to make it attractive. Lets style the project using CSS.

Portfolio Website using HTML and CSS (Source Code)

HTML Output:

Create Countdown Timer Using HTML,CSS & JavaScript

CSS Code for Countdown Timer

html, body {
  min-height: 100%;
}

html {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

body {
    background: #000023;
    min-height: 100%;
    width: 100%;
    -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.container {
    width: 70%;
    background: royalblue;
    border-radius: 10px;
    padding: 2rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 100px 3px
        royalblue;
}

.subContainer {
    width: 90%;
    margin: 0 auto;
}

input[type="number"],
#colonStyle {
    -webkit-transition: background 1s, color 1s, font-size 1s;	
    transition: background 1s, color 1s, font-size 1s;
}
input {
    font-size: 2rem;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    border: none;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex: 1;
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;
}
form {
        display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.colon {
    font-size: 4rem;
    color: white;
    font-family: monospace;
    -webkit-transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
    transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
}

.form_active {
    background: royalblue;
    color: gold;
    font-size: 6rem;
    text-shadow: 0px 0px 4px 3px navy;
}
progress {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
}
.progress_styled {
    width: 100%;
    line-height: 2;
    height: 3rem;
}
progress::-webkit-progress-bar {
background-color: #000023;
border-radius: 0px 0px 10px 10px;
background-color: clear;
border: 5px solid blue;
box-shadow: inset 10px 10px 21px rgba(240,240,240,0.1);
}

progress::-webkit-progress-value {
background: #d3e2dc;
background: linear-gradient(to bottom, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
background: -webkit-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
background: -o-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
background: -ms-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
border-radius: 10px;
transition: width 1s linear;
}

/* timer experiment */
#startButton, #resetButton {
    background: gold;
    color: navy;
    box-shadow: 0px 0px 13px 2px navy;
    -webkit-transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
    transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
    border: none;
}

#startButton:hover, #resetButton:hover {
    box-shadow: 0px 0px 0px 0px transparent;
    background: navy;
    color: gold;
}

@media screen and (max-width: 34em) { 
    .form_active {
        font-size: 4.5rem;		
    }
}

Step1:We’ll assign the background property to “black,” the display property to “flex,” the min-height to “100%,” and the width of our body to “100%” using the html tag selector.

Restaurant Website Using HTML and CSS

html,
body {
    min-height: 100%;
}

html {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

body {
    background: #000023;
    min-height: 100%;
    width: 100%;
    /* vertically aligns element */
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

Step2:We’ll use the class selector (.container) to define the width as “100%,” the background as “blue,” and the border-radius as “10px,” as well as the background and border-radius properties.

In the following, we will fix the width to “100%” and the margin to auto using the class selector (.sub-container).

.container {
    width: 70%;
    background: royalblue;
    border-radius: 10px;
    padding: 2rem;
    /* horizontally aligns element */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 100px 3px royalblue;
}

.subContainer {
    width: 90%;
    margin: 0 auto;
}

Step3:We will now style the first and second inputs by adding styling to the input element. With the help of the font-size and text-align properties, we will set the font size to 2 rem, and with the help of the border-radius property, we will set the border radius to 5 px.

Responsive Gym Website Using HTML ,CSS & JavaScript

The progress indicator will receive additional styling, which we will apply using some CSS styling and the button property.

form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.colon {
    font-size: 4rem;
    color: white;
    font-family: monospace;
    -webkit-transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
    transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
}

.form_active {
    background: royalblue;
    color: gold;
    font-size: 6rem;
    text-shadow: 0px 0px 4px 3px navy;
}

progress {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
}

.progress_styled {
    width: 100%;
    line-height: 2;
    height: 3rem;
}

progress::-webkit-progress-bar {
    background-color: #000023;
    border-radius: 0px 0px 10px 10px;
    background-color: clear;
    border: 5px solid blue;
    box-shadow: inset 10px 10px 21px rgba(240, 240, 240, 0.1);
}

progress::-webkit-progress-value {
    background: #d3e2dc;
    background: linear-gradient(to bottom, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
    background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
    background: -webkit-linear-gradient(top, gold 1%, darkgoldenrod 49%, goldenrod 100%);
    background: -o-linear-gradient(top, gold 1%, darkgoldenrod 49%, goldenrod 100%);
    background: -ms-linear-gradient(top, gold 1%, darkgoldenrod 49%, goldenrod 100%);
    border-radius: 10px;
    transition: width 1s linear;
}


/* timer experiment */

#startButton,
#resetButton {
    background: gold;
    color: navy;
    box-shadow: 0px 0px 13px 2px navy;
    -webkit-transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
    transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
    border: none;
}

#startButton:hover,
#resetButton:hover {
    box-shadow: 0px 0px 0px 0px transparent;
    background: navy;
    color: gold;
}

@media screen and (max-width: 34em) {
    .form_active {
        font-size: 4.5rem;
    }
}

In this CSS code we have styled the structure and its element which are present in HTML Code. we have styled the seconds, minutes, start button, reset button & progress bar. For each we have specified the padding, margin, opacity etc. After that we have styled the body elements so that it look attractive not simple. Let us style the JavaScript part.

50+ Html ,Css & Javascript Projects With Source Code

CSS Output:

Create Countdown Timer Using HTML,CSS & JavaScript

JavaScript Code for Countdown Timer

var minutesInput = document.getElementById("minutesInput");
var secondsInput = document.getElementById("secondsInput");
var startButton = document.getElementById("startButton");
var progressBar = document.getElementById("progressBar");
var colonStyle = document.getElementById("colonStyle");

var progressBarMax;
var changeSeconds = 0;
var changeMinutes = 0;
var stopper;

var setTime = function(){
    clearTimeout(stopper);
    var getMinutes = parseInt(minutesInput.value);
    var getSeconds = parseInt(secondsInput.value);
    /* seconds logic */

    if (getSeconds <= 9) {
        var originalValue = secondsInput.value;
        secondsInput.value = ("0" + originalValue).slice(-2);
    } else if (getSeconds >= 60) {
        secondsInput.value = ("0" + 0).slice(-2);
        changeSeconds = 0;
    } else if (getSeconds >= 10) {
        secondsInput.value = getSeconds;
    } else if (secondsInput.value == "") {
        secondsInput.value = ("0" + 0).slice(-2);
    }
    /* minutes logic */
    if (minutesInput.value == "") {
        minutesInput.value = 0;
    } 
    changeMinutes = parseInt(minutesInput.value);
    minutesInput.value = changeMinutes;
    changeMinutes = changeMinutes * 60;
    changeSeconds = parseInt(secondsInput.value);
    var totalTime = changeSeconds + changeMinutes;
    progressBar.value = 0;
    progressBar.setAttribute("max", totalTime );
    progressBarMax = totalTime;
}

minutesInput.addEventListener("keyup", setTime);
minutesInput.addEventListener("click", setTime);
secondsInput.addEventListener("keyup", setTime);
secondsInput.addEventListener("click", setTime);


/** main countdown **/
var progressCountdown = function()
{
    secondsInput.classList.add("form_active");
minutesInput.classList.add("form_active");
colonStyle.classList.add("form_active");
    
    minutesInput.disabled = false;
    secondsInput.disabled = false;
    stopper = setTimeout(progressCountdown, 1000);
    if (secondsInput.value == 0 && minutesInput.value > 0){
        secondsInput.value = 60;
        minutesInput.value -= 1;
    }
    
    if (secondsInput.value > 0){
        secondsInput.value -= 1;		
        progressBar.value += 1;
    }

    if (secondsInput.value < 10){
        var concatSeconds = secondsInput.value;
        secondsInput.value = ("0" + concatSeconds).slice(-2);
        
    }
    if (progressBar.value == progressBar.max) {
        /* remove styling */
        secondsInput.classList.remove("form_active");
minutesInput.classList.remove("form_active");
colonStyle.classList.remove("form_active");
        /* sound */
        var soundClick = document.createElement("audio");
    soundClick.src = 'http://soundbible.com/mp3/Robot_blip-Marianne_Gagnon-120342607.mp3';
    soundClick.autoplay = "true";	document.body.appendChild(soundClick);	
        /* sound */
        clearTimeout(stopper);
        minutesInput.removeAttribute("disabled");
        secondsInput.removeAttribute("disabled");
    }
}

var progressReset = function(){
    progressBar.value = 0;
    secondsInput.value = ("0" + 0).slice(-2);
    minutesInput.value = 0;
    progressBar.setAttribute("max", 0);
    secondsInput.classList.remove("form_active");
minutesInput.classList.remove("form_active");
colonStyle.classList.remove("form_active");
    minutesInput.removeAttribute("disabled");
    secondsInput.removeAttribute("disabled");	
    clearTimeout(stopper);
}

var enterPressed = function(event){
    var key = event.which || event.keyCode;
    if (key === 13) { // 13 is enter
        // code for enter
        progressCountdown();
        secondsInput.setAttribute("disabled", true);
        minutesInput.setAttribute("disabled", true);
    }
}
        
startButton.addEventListener("click", progressCountdown);
resetButton.addEventListener("click", progressReset);
minutesInput.addEventListener("keypress", enterPressed);
secondsInput.addEventListener("keypress", enterPressed);

In the JS code, we have defined an id for minutes, seconds, hours, the progress bar, etc. And later call them defined, pass on some condition if they satisfy it, and it will continue to work along with the progress bar or else throw an error to the user.

Let’s see the final output of the project. We will first select the HTML elements using the document. Using the queryselector method, we will select the input of our countdown timer and then, using the set time variable inside it, we will create a function and, using the user input, we will take input from the user time and then, using the decrement counter, we will decrease the value each second, and as the time completes, a beep sound will be played using the audio.play() method.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Video Output Of Countdown Timer:

Below is a working Countdown Timer example. We just built the countdown timer from Scratch using JavaScript.

ADVERTISEMENT

Final Output Of Create Countdown Timer Using JavaScript:

Below is Preview for Countdown Time Codepen so that you can visualize what we have build till now. 

ADVERTISEMENT

We have Successfully created our Countdown Timer using HTML, CSS, and JAVASCRIPT. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

ADVERTISEMENT

If you find out this Blog helpful, then make sure to search code with random on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

ADVERTISEMENT

10+ HTML CSS Projects For Beginners (Source Code)

ADVERTISEMENT

Thank You For Reading!!!

Written By – Harsh Sawant

Code By – harshh9

HAPPY CODING!

What is a countdown timer?

A digital web application called a countdown timer enables users to establish a particular time period. The time limit starts when the user initiates the timer, and with this type of timer, users can complete tasks before the timer runs out.

What is the purpose of a countdown timer?

A countdown timer is typically used by businesses where they must make a deadline, such as on a website like Swiggy where the delivery boy must deliver the food within the predetermined window of time.



Leave a Reply