Digital Countdown using HTML, CSS and JavaScript With Source Code

Introduction:

This Projects Countdown Timer introduces a Animated Countdown Timer which is created by using the latest tech stacks i.e. HTML5 , CSS3 and JavaScript(ES6) The logic used to create this project no too much difficult One who has basic understanding of JavaScript and familiar with JS Functions concept can understand in easy manner. You can customize this project’s animation as well as logic as per requirement. Its one of the major project you can use for your personal use as well as to present in your college.

Explanation:

The JavaScript plays very Essential role for the main logic of the timer.A user can set a countdown timer as well as reset it to set new one.This interaction of user can be happened with the help of JavaScript.So we can say it’s a heart of this project.

First of all we have declared a variable named startTimer() which contains a null value means a user has not set a timer yet. The JavaScript code contains a addEventListener() functions which helps to set a countdown time a user want. A function called addEventListener() contains a another function that is startInterval() this is the onclick function that means when user click on the ‘Start’ button it is being called and starts the countdown timer from the time you have set Like above functions we have discussed we have another button that is RESET.

When a user click on the ‘Reset’ button the another function is being called that is stopInterval(). This is the function which stops the timer and reset it to default.

Source Code:

Get Discount on Top Educational Courses

Brand Name	Discount Information	Coupon Codes Link
Educative.io	20% discount on Educative courses and plans
W3Schools	20% discount on W3Schools courses
KodeKloud	10% discount on KodeKloud courses and plans
GeeksforGeeks	30% discount on GeeksforGeeks courses
Target Test Prep	20% discount on Target Test Prep
Coding Ninjas	₹5000 discount on Coding Ninjas courses
Skillshare	40% discount on Skillshare
DataCamp	50% discount on DataCamp
365 Data Science	57% discount on 365 Data Science Plans
Get Smarter	Flat 20% discount on Get Smarter courses
SmartKeeda	Flat 40% discount on SmartKeeda courses
StackSocial	20% discount on StackSocial courses

index.html

				
					<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Jost:wght@500&family=Nunito:wght@500&family=Prompt:wght@500&family=Roboto+Slab:wght@700&family=Sofia+Sans:wght@500&display=swap" rel="stylesheet">
    <title>Countdown Timer</title>
</head>

<body>
    <div id="container">
        <div class="tit"><h1>Countdown Timer</h1></div>
        <div class="top">
            <div class="h">
                <input id="hour" type="number" max="99" min="0" value="0" class="time">
                <p id="hour-label" class="label">Hours</p>
            </div>
            <div class="m">
                <input id="minute" type="number" max="60" min="0" value="0" class="time">
                <p id="min-label" class="label">Minutes</p>
            </div>
            <div class="s">
                <input id="sec" type="number" max="60" min="0" value="0" class="time">
                <p id="sec-label" class="label">Seconds</p>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button id="start" class="btn">Start</button>
        <button id="reset" class="btn">Reset</button>
    </div>
    <script src="main.js"></script>
</body>

</html>

style.css

				
					* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Dosis', sans-serif;
    font-family: 'Jost', sans-serif;
    font-family: 'Nunito', sans-serif;
    font-family: 'Prompt', sans-serif;
    font-family: 'Roboto Slab', serif;
    font-family: 'Sofia Sans', sans-serif;
   

    color: rgb(17, 16, 16);
}
body{
    height: 100vh;
    background-image: url(bg.jpg);
    background-position: center center;
    background-size: cover;

    background-repeat: no-repeat;
}
h1 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-family: sans-serif;
    background: none;
}

.tit {

    justify-self: center;
    width: 100vw;
    margin-top: 8rem;
    background: none;

}

#container {

    display: flex;
    flex-direction: column;
    background: none;
    height: 50vh;

}

.top {
    display: flex;
    justify-content: center;
    width: 100vw;
    align-items: center;
    margin-top: 2rem;
    background: none;
}

.bottom {
    display: flex;
    justify-content: center;
    height: 1vh;
    align-items: flex-start;
    background: none;
    background: none;
}

/*label*/
.label {
    /* margin: 1rem; */
    opacity: .5;
    justify-self: center;
    align-self: center;
    font-size: 30px;
    background: none;
}



/*times*/
.time {
    justify-self: end;
    margin-left: 1.5rem;
    align-self: flex-end;
    opacity: .8;
    /* text-align: center; */
    border: none;
    background-color: #ffffff00;
    font-size: 50px;
    width: 70px;
    background: none;
    height: 50px;
}





/*buttons*/

.btn {
    align-self: center;
    margin: 1rem;
    border-radius: .3rem;
    border: .1px solid gray;
    width: 100px;
    height: 40px;

    font-size: 30px;
    justify-self: center;
}



.h,
.m,
.s {

    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.h:hover,
.m:hover,
.s:hover {
    background-color: rgb(233, 231, 229);
}

.bottom button:hover {
    color: rgb(64, 141, 73);
    cursor: pointer;
}

script.js

				
					var start = document.getElementById('start');
var reset = document.getElementById('reset');

var h = document.getElementById("hour");
var m = document.getElementById("minute");
var s = document.getElementById("sec");

//store a reference to the startTimer variable
var startTimer = null;

start.addEventListener('click', function(){
    //initialize the variable
    function startInterval(){
        startTimer = setInterval(function() {
            timer();
        }, 1000);
    }
    startInterval();
})

reset.addEventListener('click', function(){
    h.value = 0;
    m.value = 0;
    s.value = 0;
    //stop the timer after pressing "reset"
    stopInterval()
})

function timer(){
    if(h.value == 0 && m.value == 0 && s.value == 0){
        h.value = 0;
        m.value = 0;
        s.value = 0;
    } else if(s.value != 0){
        s.value--;
    } else if(m.value != 0 && s.value == 0){
        s.value = 59;
        m.value--;
    } else if(h.value != 0 && m.value == 0){
        m.value = 60;
        h.value--;
    }
    return;
}

//stop the function after pressing the reset button, 
//so the time wont go down when selecting a new time after pressing reset
function stopInterval() {
    clearInterval(startTimer);
}

We have created one more function that is timer() in this we have given some conditions that the That the functions we have declared can only be called when all the conditions in the functions are satisfied. The conditions are the user should not enter minus value , the minute and second input should be less than 60.These are the conditions which make our all logic meaningful.