We've seen and practiced callbacks outside of the DOM, but now, we've been tasked with building out the behavior for a digital web stopwatch. The client has requested the following:
- When "Start" is clicked, the text "Stop Watch" should be replaced by "Time elapsed: 0", and the count should increment every second
- When "Reset" is clicked, the text should return to "Stop Watch"
- When "Pause" is clicked, the text should say "Time elapsed: 1", but stop incrementing
This is a tough assignment, so don't stress over meeting all the requirements. Just take it step by step and try to meet the benchmarks below in order.
- Create Javascript selectors that target each of the timer buttons.
- Create click handlers (empty, for now) for each of the timer buttons.
- Instantiate
seconds
andtimerId
variables for your timer. The latter will make more sense after reading up onsetInterval()
. - Create an
updateTime()
function that increments theseconds
counter and inserts that value into the<h1>
element withid="timer"
. - Inside your click handler for the start button...
- Replace "Stop Watch" in the HTML with the content of the
seconds
variable. - Use
setInterval()
to increment the timer by 1 every second.
- Inside your click handler for the pause button...
- Stop -- but do not reset! -- the timer using
clearInterval()
.
- Once again, inside your click handler for the start button...
- Make sure the timer starts back up when you hit the "Start" button after hitting "Pause".
- Inside your click handler for the reset button...
- Stop the timer using
clearInterval()
. - Reset the timer.
- Replace the time in your HTML with the original "Stop Watch" text.
Bonus
Reformat your timer so that everything in your timers.js
file -- variables and functions -- are part of a global object. It would look something like...
// Start of .js file
var timer = {
// All your code goes in here...
}
Spend 10 minutes looking at JavaScript Timers documentation, then check out the specific documentation for setInterval
and clearInterval
.
When you feel you're ready, open the starter-code and begin building your JavaScript file; the interface for the stop watch can be found in the index.html
file and the styles are done for you!
Please find below some screenshots of the final web app. Upon clicking start, your app should begin counting:
When clicking pause, it should stop the timer at whatever number it's currently at. Upon clicking reset, it should bring you back to the home screen: