Exercise

With the power of subscriptions, we now have a running clock!

More importantly, we understand how to issue commands to the outside world (like “tell me what time it is”). Other commands include sending an HTTP request, navigating to a URL, and even scrolling the document.

We also undersand how to subscribe to things happening outside our program (such as time passing). Other subscriptions include mouse gestures, the progress of an HTTP request, and even the browser’s readiness to render a new animation frame.

With these new tools in hand, you have everything you need to turn this boring clock into a super cool stopwatch! That’s why you won’t find the code for the finished stopwatch here. It’s up to you to write it.

Here’s a recommended roadmap to follow:

  1. Add the number of milliseconds to the clock display (e.g. 23:59:59.999).
  2. Make the clock update as frequently as the browser can render animation frames. (Hint: See above.)
  3. Make the clock start counting from 00:00:00. (Hint: Your model will need two Time values.)
  4. Add a Start button. Wait until the user clicks it to start counting. (Hint: A Bool value in your model might be useful.)
  5. Add a Reset button to set the count back to 00:00:00.
  6. While the clock is running, replace the Start button with a Stop button that pauses the count. (Hint: The hard part is not resetting to zero when you click Start again.)
  7. Bonus points: Render the view as an analogue watch face using SVG.