Answer to Question #302812 in HTML/JavaScript Web Application for Chethan

Question #302812

Clear Interval

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

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/clear-interval-op.gif

Achieve the given functionality using JS.

The counter should be intially at 0.
When the HTML button element with the id
clearCount is clicked,Clear the counter timer using the clearInterval method.

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="clearCount" class="clear-interval-button">Clear Interval</button>

</div>

</body>

</html>

CSS

.clear-interval-button {

border-radius: 10px;

margin-top: 10px;

padding: 15px;

background-color: #0275d8;

color: white;

border: none;

outline: none !important;

}

.paragraph {

font-size: 50px;

}

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .clear-interval-button {
            border-radius: 10px;
            margin-top: 10px;
            padding: 15px;
            background-color: #0275d8;
            color: white;
            border: none;
            outline: none !important;
        }
        .paragraph {
            font-size: 50px;
        }
    </style>
    <div class="text-center">
        <p id="counter" class="paragraph">0</p>
        <button id="clearCount" class="clear-interval-button">Clear Interval</button>
    </div>
    <script>
        const counter = document.querySelector('#counter'),
              btn = document.querySelector('#clearCount');

        const setCounter = setInterval(() => {
            counter.textContent = +counter.textContent + 1
        }, 1000)

        btn.addEventListener('click', () => clearInterval(setCounter))
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #302812 in HTML/JavaScript Web Application for Chethan

Comments

Leave a comment

Related Questions