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>
<div class="text-center">
<p id="counter" class="paragraph">0</p>
<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