Code-Clock/index.html at main · Fresh4774/Code-Clock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Code Clock</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 1em;
      min-height: 100vh;
      background-color: #0F0F0F;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .watch {
      font-size: 4.5vmin;
      font-family: monospace;
      color: #fff;
      padding: 2em 1.5em;
    }
    .keyword { color: #ddca7e; }
    .def { color: #809bbd; }
    .operator { color: #cccccc; }
    .property { color: #9a8297; }
    .string { color: #96b38a; }
    .number { color: #d0782a; }
  </style>
</head>
<body>
  <div class="watch"></div>
  <script>
    clock();
    function clock(){
      const date = new Date();
      const indent = 2;
      const clockObj = {
        am_pm: date.getHours() >= 12 ? 'pm' : 'am',
        hour: date.getHours() % 12 || 12,
        minute: date.getMinutes(),
        second: date.getSeconds(),
        day: date.toLocaleDateString('en-us', {weekday:'long'}),
        date: date.getDate(),
        month: date.toLocaleDateString('en-us', {month:'long'}),
        year: date.getFullYear(),
      }
      const valFormat = (val) => {
        if(typeof val == 'number') return `<span class="value number">${val}</span>`
        else if (typeof val == 'string') return `<span class="value string">"${val}"</span>`
      }
      document.querySelector(".watch").innerHTML =
        `<span class="keyword">const</span> <span class="def">clock</span> <span class="operator">=</span> {<br>`
        + Object.entries(clockObj).reduce((str, [key, val])=> str + `${'&nbsp'.repeat(indent)}<span class="property">${key}</span>: ${valFormat(val)},<br>`, '')
        + '};';
      requestAnimationFrame(clock)
    }
  </script>
</body>
</html>