Start and Stop

Time for a project! In this checkpoint, you'll build a stopwatch: it measures time in tenths of a second, stops and starts again, goes back to zero and measures laps. As in the earlier checkpoints, the instructions say what the app should do, and how you write it is up to you. Each exercise continues where the previous one ended.

The page. App.jsx has the parts of the stopwatch, which don't do anything yet: the time 0.0 in a paragraph with the class time, and a Start button.

The task. A click on Start starts the stopwatch: the time goes up by 0.1 every tenth of a second (0.0, 0.1, 0.2… 12.3), and the button says Stop. A click on Stop stops the time, and the button says Start again. The next Start goes on from the time where it stopped.

Tips:

• Keep the time in state as a whole number of tenths: 123 means 12.3 seconds. Show it with (tenths / 10).toFixed(1). toFixed(1) turns a number into text with one digit after the decimal point: (123 / 10).toFixed(1) is "12.3", and (10 / 10).toFixed(1) is "1.0".
• Whether the stopwatch is running is another state, true or false.
• The interval belongs in an effect that depends on whether the stopwatch is running. When it isn't, the effect does nothing and ends with return. When it is, the effect starts an interval of 100 milliseconds and returns the cleanup that stops it. A click on Stop changes the state, and React calls the cleanup before it runs the effect again.