Hello there, I am Hrishikesh Salunkhe. I am a Front End Developer. I am currently learning Javascript. If you are also a beginner and learning Javascript, then I would suggest doing projects. To learn a new language, the best way is to do the practice.

In this tutorial, we will build a stopwatch using HTML, CSS, and Javascript. You can directly access to code Here

HTML Code:

Here, we create a div tag. Within div tag, we will display minutes, seconds, and,milli-seconds. Along with three buttons: Start, Stop, and Reset the stopwatch

<div class="wrapper" onload="handleStopwatch()">
     <h1>Stopwatch</h1>
     <p>
           <span id="minutes">00</span>
           <span id="colon">:</span>
           <span id="seconds">00</span>
           <span id="colon">:</span>
           <span id="tens">00</span>
     </p>
     <button id="button-start" onclick="buttonStart()">Start</button>
     <button id="button-stop" onclick="buttonStop() ">Stop</button>
     <button id="button-reset" onclick="buttonReset()">Reset</button>
</div>

CSS Code:

        body {
            background: black;
            font-family: monospace, sans-serif;
            height: 100%;
        }

        .wrapper {
            width: 100%;
            margin: 30px auto;
            color: white;
            text-align: center;
        }

        h1,
        h2,
        h3 {
            font-family: 'monospace', sans-serif;
            font-weight: 100;
            font-size: 2.6em;
            text-transform: capitalize;
            text-decoration: underline;
        }

        #seconds,
        #tens,
        #colon,
        #minutes {
            font-size: 2em;
        }

        button {
            background: white;
            color: black;
            border: solid 1px white;
            text-decoration: none;
            cursor: pointer;
            font-size: 1.2em;
            padding: 18px 10px;
            width: 180px;
            margin: 10px;
        }

        button:hover {
            background: black;
            border: solid 1px white;
            color: white;
        }

JavaScript Code:

        window.onload = function () {
            var minutes = 00;
            var seconds = 00;
            var tens = 00;
            var appendTens = document.getElementById("tens");
            var appendSeconds = document.getElementById("seconds");
            var appendMinutes = document.getElementById("minutes");
            var buttonStart = document.getElementById('button-start');
            var buttonStop = document.getElementById('button-stop');
            var buttonReset = document.getElementById('button-reset');
            var Interval;
            // Called when Start button is Clicked
            buttonStart.onclick = function () {

                clearInterval(Interval);
                Interval = setInterval(startTimer, 10);
            }
            // Called when Stop button is Clicked
            buttonStop.onclick = function () {
                clearInterval(Interval);
            }

             // Called when Reset button is Clicked
            buttonReset.onclick = function () {
                clearInterval(Interval);
                tens = "00";
                seconds = "00";
                minutes = "00";
                appendTens.innerHTML = tens;
                appendSeconds.innerHTML = seconds;
                appendMinutes.innerHTML = minutes;
            }

            // A Function to increase the time
            function startTimer() {
                tens++;

                if (tens <= 9) {
                    appendTens.innerHTML = "0" + tens;
                }

                if (tens > 9) {
                    appendTens.innerHTML = tens;

                }

                if (tens > 99) {
                    seconds++;
                    appendSeconds.innerHTML = "0" + seconds;
                    tens = 0;
                    appendTens.innerHTML = "0" + 0;
                }

                if (seconds > 9) {
                    appendSeconds.innerHTML = seconds;
                }
                if (seconds > 59) {
                    minutes++;
                    appendMinutes.innerHTML = "0" + minutes;
                    seconds = 0;

                    appendSeconds.innerHTML = "0" + 0;
                }
            }

        }