scratchpad/what-color-is-it.html at master · devoidfury/scratchpad · 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
<!doctype html>
<meta charset="utf-8">
<title>What color is it?</title>
<style type="text/css">
* { text-align: center; transition: all 0.2s; color: #FFF; font-family: monospace; font-size: 36px }
main { display: table; width: 100%; height: 100%; }
div { display: table-cell; vertical-align: middle }
h1 { margin-bottom: 2em; font-size: 64px }
</style>

<main>
    <div>
        <h1 id="title"></h1>
        <p id="color"></p>
    </div>
</main>

<script>
// personal convention to mark DOM elements with $
var $title = document.getElementById('title'),
    $color = document.getElementById('color');

setInterval(function() {
    var time = (new Date()).toTimeString().split(' ')[0];

    var color = '#' + time.split(':').map(function(st) {
        return (st.length < 2 ? '0' : '') + st;
    }).join('');

    document.body.style.backgroundColor = color;
    $title.innerHTML = time.replace(/:/g, ' : ');
    $color.innerHTML = color;
}, 200);
</script>