up

2017-02-28 12:54:48 +03:00 · 2017-02-28 12:54:48 +03:00 · 508969c13f
commit 508969c13f
parent 4272b7bb13
168 changed files with 340 additions and 10 deletions
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
+++ b/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.
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <style>
+    .hour {
+      color: red
+    }
+
+    .min {
+      color: green
+    }
+
+    .sec {
+      color: blue
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="clock">
+    <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
+  </div>
+
+  <script>
+    let timerId;
+
+    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;
+    }
+
+    function clockStart() {
+      timerId = setInterval(update, 1000);
+      update(); // <--  start right now, don't wait 1 second till the first setInterval works
+    }
+
+    function clockStop() {
+      clearInterval(timerId);
+    }
+
+    clockStart();
+  </script>
+
+</body>
+</html>
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+
+  <!-- click on this button calls clockStart() -->
+  <input type="button" onclick="clockStart()" value="Start">
+
+  <!-- click on this button calls clockStop() -->
+  <input type="button" onclick="clockStop()" value="Stop">
+
+</body>
+</html>
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@ -0,0 +1,9 @@
+importance: 4
+
+---
+
+# Colored clock with setInterval
+
+Create a colored clock like here:
+
+[iframe src="solution" height=100]