Stopwatch Lab

Medium
31
2
69.4% Acceptance

In this lab, you will build a simple stopwatch where timer will update the elapsed time at a certain interval.

Concepts covered in this lab are:

  • Manipulating the DOM
  • Adding event listeners
  • setInterval and clearInterval
  • Date object
  • Timer functionality

Steps

  1. Create a button with id startBtn for starting the timer
  2. Create a button with id stopBtn for stopping the timer
  3. Create a button with id resetBtn for resetting the timer to 0
  4. Create a paragraph tag with id timerDisplay to show the timer
  5. Create separate click handlers for all the buttons to handle the click event
  6. The stopwatch should update every 10ms (10 milliseconds)

There are no specific tests for testing the stopwatch functionality, make sure to test the functionality yourself after buildilng. Try to use the best user experience practices like disabled buttons when they shouldn't be active.