Stopwatch using HTML AND CSS AND JAVASCRIPT

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Document</title>

</head>

<body>

    <div class="stopwatch">

        <h1 id="display">00:00:00</h1>

        <div class="buttons">

            <img src="stop.png" onclick="watchStop()">

            <img src="start.png" onclick="watchStart()">

            <img src="reset.png" onclick="watchReset()">

        </div>

    </div>

    <script>

        let [seconds, minutes, hours] = [0, 0, 0];

        let display = document.getElementById("display");

        let timer = null;

        function stopwatch() {

            seconds++;

            if (seconds == 60) {

                seconds = 0;

                minutes++;

                if (minutes == 60) {

                    minutes = 0;

                    hours++;

}

}

            let h = hours < 10 ? "0" + hours : hours;

            let m = minutes < 10 ? "0" + minutes : minutes;

            let s = seconds < 10 ? "0" + seconds : seconds;

            display.innerHTML = h + ":" + m + ":" + s;

}

        function watchStart() {

            if (timer !== null) {

                clearInterval(timer)

}

            timer = setInterval(stopwatch, 1000);

}

        function watchStop(){

            clearInterval(timer);

}

        function watchReset(){

            clearInterval(timer);

            [seconds, minutes, hours] = [0, 0, 0];

            display.innerHTML = "00:00:00"

}

    </script>

</body>

</html>

CSS

body {

    background: #edeaff;

}

.stopwatch {

    width: 90%;

    max-width: 600px;

    background-image: linear-gradient(rgba(0, 0, 0,0.8), rgba(0, 0, 0, 0.8)),

     url(background.png);

    background-size: cover;

    background-position: center;

    text-align: center;

    padding: 40px 0;

    color: #fff;

    margin: 200px auto 0;

    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);

}

.stopwatch h1{

    margin-top: 60px;

    font-size: 64px;

    font-weight: 300;

}

.buttons{

    display: flex;

    align-items: center;

    justify-content: center;

}

.buttons img{

    width: 50px;

    margin: 0 20px;

    cursor: pointer;

}

.buttons img:nth-child(2){

    width: 80px;

}

RESULT

https://debadatta77.github.io/Stopwatch/

DEBADATTA PARIDA