Answer to Question #309252 in HTML/JavaScript Web Application for king

Question

Answer to Question #309252 in HTML/JavaScript Web Application for king

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #309252

Hourly Stop Watch

The goal of this coding exam is to quickly get you off the ground with the clearInterval and setInterval.

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/hourly-stop-watch-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

</p>

Start

</button>

Stop

</button>

</div>

</body>

</html>

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="text-center">
        <p class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </p>
        <button class="bg-start-button button" id="startBtn">Start</button>
        <button class="bg-stop-button button" id="stopBtn">Stop</button>
    </div>


    <style>
        .text-center {
            width: 100%;
            text-align: center;
        }
        p {
            text-align: center;
            font-size: 24px;
            letter-spacing: 2px;
        }
        .button {
            padding: 5px 15px;
            color: #fff;
            outline: none;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .bg-start-button {
            background-color: green;
        }
        .bg-stop-button {
            background-color: red;
        }
    </style>


    <script>
        let min = document.getElementById('minutes');
        let sec = document.getElementById('seconds');
        let startBtn = document.getElementById('startBtn');
        let stopBtn = document.getElementById('stopBtn');
        let counter = 0;
        let play = null;


        startBtn.onclick = () => {
            if (play !== null) {
                clearInterval(play);
            }


            play = setInterval(() => {
                counter++;


                if (counter < 60) {
                sec.innerText = counter < 10 ? '0' + counter : counter;
                } else {
                    let num = Math.floor(counter / 60);
                    min.innerText = num < 10 ? '0' + num : num;
                    sec.innerText = counter % 60 < 10 ? '0' + counter % 60 : counter % 60;
                }
            }, 1000)
        }


        stopBtn.onclick = () => {
            clearInterval(play);
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #309252 in HTML/JavaScript Web Application for king

Comments

Leave a comment

Related Questions