Countdown timer

Project Description:

In this project we are going to make a countdown timer using HTML, CSS and javascript.

You will be able to enter any number hr:min:sec for countdown.
There will be default values for countdown number eg: 1min, 5min, 10min etc.
There will be a Big screen for countdown.
There will be start, play/pause and clear buttons.
There will be a alaram that will play when countdown is finished.

Requirements:

You must know how to insert audio tag and audio functionality to html.
You must be familiar with css properties such as: desplay:inline-flex,box-sizing,position:absolute; etc...
You must know how to use functions with events.onclick="fun()"
You must know how to wok with javascript DOM.
You must know how to work with timing functions: eg:setInterval(timer,1000);

Challenge:

If you want to make a Countdown Timer with the help of description and guidelines above, you can try our Editor above.

Countdown timer must function as described above.
Countdown Timer must look like below in image:

Guides:

Define a container for whole timer using section tag. Inside which define sections for each elements such as default part, input part, alaram part etc...
Apply appropriate css for each element in timer.
Define global variables interval, hr, min, sec, sound.
Define functions: callinterval(), defaul(),pause(), timer(), start(), clearall()... and call them in a appropriate place.

If you want to take a challenge don't scroll below

Source code to make countdown timer using html css and javascript:

HTML


        <section class="container">
            <section class="default-time">
                <div onclick="defaul(1,0)">1min</div>
                <div onclick="defaul(5,0)">5min</div>
                <div onclick="defaul(10,0)">10min</div>
                <div onclick="defaul(30,0)">30min</div>
                <div onclick="defaul(45,0)">45min</div>
            </section>
            <section class="wrap">
            <section class="input-time">
            <div>
                <input type="text" value='00' id="hr"/>
            </div>
            <div>
                <input type="text" value='00' id="min"/>
            </div>
            <div>
                <input type="text" value='00'id="sec"/>
            </div>
            
            </section>
            <section class="timeout-audio">
                <span>☃</span>
                <audio id='aud'>
                    <source src="images/j.wav"/>
                </audio>
            </section>
            </section>
            
            
            <section class="start-button">
                <button onclick="start()">START</button>
            
            </section>
            
            <section class="count-down">
                <div id="hr-count">00</div>
                <div id="min-count">00</div>
                <div id="sec-count">00</div>
            </section>
            
            <button class="stop" onclick="pause()">PAUSE</button>
            <button class="clear" onclick="clearall()">CLEAR</button>
            
            
            </section>

CSS

        .container {
            width:500px;
            height:600px;
            background-color: rgb(29, 28, 26);
            margin:auto;
            border-radius: 5px;
        }
        .default-time {
            display:inline-flex;
            width:100%;
            height:50px;
            background-color: rgb(0, 0, 0);
            

        }
        .default-time div {
            
            width:18%;
            height:100%;
            background-color: rgb(31, 24, 24);
            justify-content: center;
            cursor:pointer;
            margin:auto;
            border-radius: 5px;
            text-align: center;
            font-size: 30px;
            padding-top: 7px;
            box-sizing: border-box;
            color:white;
            
        }
        .default-time div:active {
            background-color: rgb(196, 177, 177);
            transform:scale(1.3);
        }
        .wrap {
            width:100%;
            height:100px;
            position: relative;
        }
        .input-time {
            position:absolute;
            width:300px;
            height:100px;
            background-color: rgb(17, 17, 15);;
            margin-top: 30px;
            margin-left: 10px;
            border-radius: 10px;
            display:flex;
        }
        .input-time div{
            height:100%;
            width:30%;
            margin:auto;
            background-color: black;
            color:white;
            text-align: center;
            font-size: 55px;
            padding:10px;
            box-sizing: border-box;
            border-radius: 5px;

        }
        .timeout-audio {
            position: relative;
            float:right;
            width:100px;
            height:100px;
            background-color: rgb(17, 17, 15);
            margin-top: 30px;
            margin-right: 10px;
            border-radius: 10px;
            font-size: 77px;
            color:white;
            text-align: center;
            cursor:pointer;
        }
        .start-button  {
            position: relative;
            top:40px;
            left:50px;
           
          
        }
        .start-button button {
            font-size: 35px;
            width:200px;
            cursor: pointer;
        }
.count-down {
        
             width:100%;
            height:150px;
            background-color: rgb(17, 17, 15);;
            margin-top: 80px;
            margin-left: 0px;
            border-radius: 10px;
            display:flex;
}
.count-down div {
            height:100%;
            width:30%;
            margin:auto;
            background-color: black;
            color:white;
            text-align: center;
            font-size: 88px;
            padding:10px;
            box-sizing: border-box;
            border-radius: 5px;
}
.stop {
    margin-left:50px;
    margin-top: 20px;
    width:200px;

    font-size: 35px;
    cursor:pointer;
    border-radius: 10px;

}
.stop:active {
    background-color: rgb(14, 14, 13);
    

}
.clear {
    margin-left:5px;
    margin-top: 20px;
    width:200px;

    font-size: 35px;
    cursor:pointer;
}
input {
    width:60px;
    height:60px;
    font-size: 35px;
}

        var interval,min,sec,hr,sound;

        function callinterval() {
            interval=setInterval(timer,1000);
             }
        
        function defaul(minute,second) {
            document.getElementById('min').value=minute;
            document.getElementById('sec').value=second;
            }
        
        function pause() {
            var pausedmin=document.getElementById('min-count').innerHTML;
            var pausedsec=document.getElementById('sec-count').innerHTML;
                clearInterval(interval);
        
                var pstate=document.querySelector('.stop').innerHTML;
        console.log(pstate);
                if(pstate=='PAUSE') {
                    document.querySelector('.stop').innerHTML='PLAY';
                }else {
                    document.querySelector('.stop').innerHTML='PAUSE';
                    min=pausedmin;
                    sec=pausedsec;
                    callinterval();
                    
                }
            }
        
            function timer() {
                if(hr==0 && min==0 && sec==0) {
                clearInterval(interval);  
                let sound=document.getElementById('aud'); 
                sound.play();
            }
            
                if(sec==0 && min>0) {
                min=min-1;
                sec=60;
            }
            if(min==0 && hr>0) {
                hr=hr-1;
                min=60;
            }
            if(sec>0) {
            sec=sec-1;
            }
        
            document.getElementById('hr-count').innerHTML=hr;
            document.getElementById('min-count').innerHTML=min;
            document.getElementById('sec-count').innerHTML=sec;
            }  
        
        function start() {
         hr=document.getElementById("hr").value;
         min=document.getElementById("min").value;
         sec=document.getElementById("sec").value;
         
        callinterval();
               
        }
            
        function clearall() {
           
            document.getElementById('hr').value='00';
            document.getElementById('min').value='00';
            document.getElementById('sec').value='00';
        
            document.getElementById('hr-count').innerHTML='00';
            document.getElementById('min-count').innerHTML='00';
            document.getElementById('sec-count').innerHTML='00';
        
            min=0;
            hr=0;
            sec=0;
        
        }

PREVIEW:

Challenge-2:

Are you familiar with functional approach of programming?... Achive same using functional approach of programming.