diff options
| author | Mohammad S Anwar <mohammad.anwar@yahoo.com> | 2019-10-02 11:17:21 +0100 |
|---|---|---|
| committer | Mohammad S Anwar <mohammad.anwar@yahoo.com> | 2019-10-02 11:17:21 +0100 |
| commit | 3c1a143057b37dbd91190e76af1dccbc8b09cd6e (patch) | |
| tree | 69975af40b80c5a0eefef38294823573383487d1 /challenge-028/dave-jacoby/html | |
| parent | 8eab1cdd6d05e569aa648a94902944e26e83ec0a (diff) | |
| download | perlweeklychallenge-club-3c1a143057b37dbd91190e76af1dccbc8b09cd6e.tar.gz perlweeklychallenge-club-3c1a143057b37dbd91190e76af1dccbc8b09cd6e.tar.bz2 perlweeklychallenge-club-3c1a143057b37dbd91190e76af1dccbc8b09cd6e.zip | |
- Move html solution to the correct folder.
Diffstat (limited to 'challenge-028/dave-jacoby/html')
| -rw-r--r-- | challenge-028/dave-jacoby/html/ch-2.html | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/challenge-028/dave-jacoby/html/ch-2.html b/challenge-028/dave-jacoby/html/ch-2.html new file mode 100644 index 0000000000..c86454d6aa --- /dev/null +++ b/challenge-028/dave-jacoby/html/ch-2.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>Digital Clock</title> + <style> + * { + background-color: #222; + color: #999; + margin: 0; + padding: 20px; + text-align: center; + } + svg { + border: 1px solid #666; + } + circle { + fill: #b0ec13; + } + line { + stroke: #444444; + stroke-width: 10; + } + .lit { + stroke: #b0ec13; + } + </style> + </head> + <body> + <svg height="230" width="800" id="digital"> + <rect fill="#222222" height="230" width="900" x="0" y="0" /> + <circle cx="530" cy="70" r="8" /> + <circle cx="530" cy="140" r="8" /> + <circle cx="260" cy="70" r="8" /> + <circle cx="260" cy="140" r="8" /> + <g style="fill: none"> + <line id="seg_0_0" x1="10" x2="110" y1="10" y2="10" /> + <line id="seg_0_1" x1="10" x2="10" y1="10" y2="110" /> + <line id="seg_0_2" x1="110" x2="110" y1="10" y2="110" /> + <line id="seg_0_3" x1="10" x2="110" y1="110" y2="110" /> + <line id="seg_0_4" x1="10" x2="10" y1="110" y2="210" /> + <line id="seg_0_5" x1="110" x2="110" y1="110" y2="210" /> + <line id="seg_0_6" x1="10" x2="110" y1="210" y2="210" /> + </g> + <g style="fill: none"> + <line id="seg_1_0" x1="140" x2="240" y1="10" y2="10" /> + <line id="seg_1_1" x1="140" x2="140" y1="10" y2="110" /> + <line id="seg_1_2" x1="240" x2="240" y1="10" y2="110" /> + <line id="seg_1_3" x1="140" x2="240" y1="110" y2="110" /> + <line id="seg_1_4" x1="140" x2="140" y1="110" y2="210" /> + <line id="seg_1_5" x1="240" x2="240" y1="110" y2="210" /> + <line id="seg_1_6" x1="140" x2="240" y1="210" y2="210" /> + </g> + <g style="fill: none"> + <line id="seg_2_0" x1="280" x2="380" y1="10" y2="10" /> + <line id="seg_2_1" x1="280" x2="280" y1="10" y2="110" /> + <line id="seg_2_2" x1="380" x2="380" y1="10" y2="110" /> + <line id="seg_2_3" x1="280" x2="380" y1="110" y2="110" /> + <line id="seg_2_4" x1="280" x2="280" y1="110" y2="210" /> + <line id="seg_2_5" x1="380" x2="380" y1="110" y2="210" /> + <line id="seg_2_6" x1="280" x2="380" y1="210" y2="210" /> + </g> + <g style="fill: none"> + <line id="seg_3_0" x1="410" x2="510" y1="10" y2="10" /> + <line id="seg_3_1" x1="410" x2="410" y1="10" y2="110" /> + <line id="seg_3_2" x1="510" x2="510" y1="10" y2="110" /> + <line id="seg_3_3" x1="410" x2="510" y1="110" y2="110" /> + <line id="seg_3_4" x1="410" x2="410" y1="110" y2="210" /> + <line id="seg_3_5" x1="510" x2="510" y1="110" y2="210" /> + <line id="seg_3_6" x1="410" x2="510" y1="210" y2="210" /> + </g> + <g style="fill: none"> + <line id="seg_4_0" x1="550" x2="650" y1="10" y2="10" /> + <line id="seg_4_1" x1="550" x2="550" y1="10" y2="110" /> + <line id="seg_4_2" x1="650" x2="650" y1="10" y2="110" /> + <line id="seg_4_3" x1="550" x2="650" y1="110" y2="110" /> + <line id="seg_4_4" x1="550" x2="550" y1="110" y2="210" /> + <line id="seg_4_5" x1="650" x2="650" y1="110" y2="210" /> + <line id="seg_4_6" x1="550" x2="650" y1="210" y2="210" /> + </g> + <g style="fill: none"> + <line id="seg_5_0" x1="680" x2="780" y1="10" y2="10" /> + <line id="seg_5_1" x1="680" x2="680" y1="10" y2="110" /> + <line id="seg_5_2" x1="780" x2="780" y1="10" y2="110" /> + <line id="seg_5_3" x1="680" x2="780" y1="110" y2="110" /> + <line id="seg_5_4" x1="680" x2="680" y1="110" y2="210" /> + <line id="seg_5_5" x1="780" x2="780" y1="110" y2="210" /> + <line id="seg_5_6" x1="680" x2="780" y1="210" y2="210" /> + </g> + </svg> + <script> + function draw() { + let date = new Date(); + let h = date.getHours(); + let m = date.getMinutes(); + let s = date.getSeconds(); + h = h.toString().padStart(2, "0"); + m = m.toString().padStart(2, "0"); + s = s.toString().padStart(2, "0"); + let hh = h.split(""); + let mm = m.split(""); + let ss = s.split(""); + draw_segment(0, h[0]); + draw_segment(1, h[1]); + draw_segment(2, m[0]); + draw_segment(3, m[1]); + draw_segment(4, s[0]); + draw_segment(5, s[1]); + requestAnimationFrame(draw); + } + function draw_segment(display, number) { + let segments = [ + [1, 1, 1, 0, 1, 1, 1], + [0, 0, 1, 0, 0, 1, 0], + [1, 0, 1, 1, 1, 0, 1], + [1, 0, 1, 1, 0, 1, 1], + [0, 1, 1, 1, 0, 1, 0], + [1, 1, 0, 1, 0, 1, 1], + [1, 1, 0, 1, 1, 1, 1], + [1, 0, 1, 0, 0, 1, 0], + [1, 1, 1, 1, 1, 1, 1], + [1, 1, 1, 1, 0, 1, 0] + ]; + for (let i = 0; i < 7; i++) { + let id = ["seg", display, i].join("_"); + let el = document.getElementById(id); + let val = segments[number][i]; + if (val === 1) { + el.classList.add("lit"); + } else { + el.classList.remove("lit"); + } + } + } + function load() { + requestAnimationFrame(draw); + } + window.onload = load; + </script> + </body> +</html> |