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.
//assets.ccbp.in/frontend/content/react-js/hourly-stop-watch-op.gif
Achieve the given functionality using JS.
The timer should be initiated at 0.
- When the HTML button element with the id
- startBtn is clicked, the timer should be started.
- When the HTML button element with the id
- stopBtn is clicked, the timer should be stopped.
- When the HTML button element with the id
- startBtn is clicked after the HTML button element with id stopBtn clicked, the timer should be resumed.
- Timer should reset to 00 minutes, 00 seconds after one hour.
Note
This is a one hour timer. The maximum time is one hour.
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.
//assets.ccbp.in/frontend/content/react-js/hourly-stop-watch-op.gif
Achieve the given functionality using JS.
The timer should be initiated at 0.
- When the HTML button element with the id
- startBtn is clicked, the timer should be started.
- When the HTML button element with the id
- stopBtn is clicked, the timer should be stopped.
- When the HTML button element with the id
- And do not include title events in the html button elements.
- we need to access those dynamically
- startBtn is clicked after the HTML button element with id stopBtn clicked, the timer should be resumed.
- Timer should reset to 00 minutes, 00 seconds after one hour.
Note
This is a one hour timer. The maximum time is one hour.
Document
@import url['//fonts.googleapis.com/css2?family=Roboto&display=swap'];
* {
font-family: 'Roboto', sans-serif;
}
.wrapper {
width: 250px;
display: flex;
flex-direction: column;
align-items: center;
}
.timer {
font-size: 50px;
margin-bottom: 10px;
}
button {
height: 40px;
width: 100px;
border-radius: 5px;
border: none;
outline: none;
cursor: pointer;
color: white;
font-size: 20px;
}
#startBtn { background: #15ac29; }
#startBtn:hover { background: #128821; }
#stopBtn { background: #b31515; }
#stopBtn:hover { background: #8a1010; }
00:00
Start
Stop
const startBtn = document.querySelector['#startBtn'],
stopBtn = document.querySelector['#stopBtn'],
minutesHtml = document.querySelector['#minutes'],
secondsHtml = document.querySelector['#seconds']
let minutes = 0,
seconds = 0,
timer;
function changeTime[] {
if [++seconds === 60] {
seconds = 0
if [++minutes === 60] {
minutes = 0;
seconds = 0
}
}
minutesHtml.textContent = minutes < 10 ? `0${minutes}` : minutes
secondsHtml.textContent = seconds < 10 ? `0${seconds}` : seconds
}
startBtn.addEventListener['click', [] => {
timer = setInterval[changeTime, 1000]
}]
stopBtn.addEventListener['click', [] => {
clearInterval[timer]
}]