Timer Creation using Pure JavaScript.

TIMER CREATION USING PURE JAVASCRIPT

We have created simple web project in which We Create simple timer . In this project pure JavaScript is used. You can START timer as well you can RESET timer and can STOP timer .

So we hope you will like this project of 'Timer Creation'.

1) All coding Part

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
 initial-scale=1.0">
    <title>Timer Designing</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 62.5%;
        }

        body {
            background-color: limegreen;
        }

        .main-div {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 9rem auto;
        }

        .main-div h1 {
            font-size: 10rem;
            font-family: 'Lucida Sans', 'Lucida Sans Regular',
 'Lucida Grande', 'Lucida Sans Unicode', 
Geneva, Verdana, sans-serif
        }

        .main-div button {
            padding: 1rem 2rem;
            background-color: transparent;
            color: #fff;
            font-size: 2rem;
            margin: 4rem 4.5rem;
            border: .2rem solid #fff;
            cursor: pointer;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 
'Lucida Grande', 'Lucida Sans',
 Arial, sans-serif;
            text-transform: uppercase;
        }

        .main-div button:hover {
            background-color: #fff;
            color: limegreen;
            outline: none;
        }

        @media(max-width:900px) {
            html {
                font-size: 55%
            }

            .main-div {
                margin: 12rem auto;
            }
        }

        @media(max-width:600px) {
            html {
                font-size: 50%
            }

            .main-div {
                margin: 15rem auto;
            }
        }
    </style>
</head>

<body>
    <div class="main-div">
        <h1 id="sec">00</h1>
        <h1>:</h1>
        <h1 id="millisec">00</h1>
    </div>
    <div class="main-div">
        <button type="submit" id="btn1" onclick="start()">Start</button>
        <button type="submit" id="btn2" onclick="stop()">Stop</button>
        <button type="submit" id="btn3" onclick="restart()">Reset</button>
    </div>
    <script>
        let s = 0,
            m = 0;
        let timer = () => {
            if ((m += 10) == 1000) {
                m = 0;
                s++;
            }
            document.getElementById('sec').innerText = returnAns(s);
            document.getElementById('millisec').innerText = 
returnAns(parseInt(m / 10));
        }

        let returnAns = (v) => {
            return (v >= 10 ? v : `0${v}`);
        }

        function start() {
            c = setInterval(() => {
                timer();
            }, 10);
        };

        function stop() {
            clearInterval(c);
        }

        function restart() {
            clearInterval(c);
            s = 0;
            m = 0;
            document.getElementById('sec').innerHTML = "00";
            document.getElementById('millisec').innerHTML = "00";
        }
    </script>
</body>

</html>

OUTPUT

( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )