You are currently viewing Countdown Timer Using HTML,CSS & JavaScript

Countdown Timer Using HTML,CSS & JavaScript

Countdown Timer Using HTML,CSS & JavaScript

‘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.

Display the count down 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

Table of Contents

<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)

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;		
    }
}

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

JavaScript 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 JS code we have defined each id for minutes seconds hours progress bar etc. And later call them defined them and pass on some condition if they satisfies it will continue to work along with the progress bar or else throw an error to the user. Let u see the final output for the project.

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

Final Output

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

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.

Thank You For Reading!!!

Written By – Harsh Sawant

Code By – harshh9

Leave a Reply