Basic Javascript Stopwatch

What?

This stopwatch was created using HTML, CSS and JS. It has three buttons that let you start, stop and reset the timer.

Why?

Timers can be a useful addition to a number of websites. Perhaps you are running a quiz and want to record how long it takes users to complete it, or you want to track session time on a particular page. This can be easily modified to be a countdown timer, or for the start / end to trigger with different event cues to customize it to a specific application.

How?

The layout was created in HTML with the "00:00" time specified as a start point and then the font, image and button appearance all styled with CSS. A Javascript on click event was setup for each button. The start button click executes a function every 10ms to update the display, with conditionals used to handle the various updates needed (either increment by one or add a second for example). The stop button halts this cycle of running the funnction and the reset button halts the function and restores the orginal 00:00 value to the screen.