up

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

@@ -0,0 +1,53 @@
+First, let's make HTML/CSS.
+
+Each component of the time would look great in its own `<span>`:
+
+```html
+<div id="clock">
+  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+</div>
+```
+
+Also we'll need CSS to color them.
+
+The `update` function will refresh the clock, to be called by `setInterval` every second:
+
+```js
+function update() {
+  let clock = document.getElementById('clock');
+*!*
+  let date = new Date(); // (*)
+*/!*
+  let hours = date.getHours();
+  if (hours < 10) hours = '0' + hours;
+  clock.children[0].innerHTML = hours;
+
+  let minutes = date.getMinutes();
+  if (minutes < 10) minutes = '0' + minutes;
+  clock.children[1].innerHTML = minutes;
+
+  let seconds = date.getSeconds();
+  if (seconds < 10) seconds = '0' + seconds;
+  clock.children[2].innerHTML = seconds;
+}
+```
+
+In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+
+The clock-managing functions:
+
+```js
+let timerId;
+
+function clockStart() { // run the clock
+  timerId = setInterval(update, 1000);
+  update(); // (*)
+}
+
+function clockStop() {
+  clearInterval(timerId);
+  timerId = null;
+}
+```
+
+Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.