-
Notifications
You must be signed in to change notification settings - Fork 0
/
clock.html
90 lines (75 loc) · 2.37 KB
/
clock.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="target"></div>
<script>
const el = document.getElementById("target");
const oneSecond = 1000;
const getCurrentTime = () => new Date();
const log = message => el.innerHTML = message;
const compose = (...fns) =>
(arg) =>
fns.reduce(
(composed, f) => f(composed),
arg);
const serializeClockTime = date =>
({
hours: date.getHours(),
minutes: date.getMinutes(),
seconds: date.getSeconds()
});
const civilianHours = clockTime =>
({
...clockTime,
hours: (clockTime > 12) ?
clockTime.hours - 12 : clockTime.hours
})
const appendAMPM = clockTime =>
({
...clockTime,
ampm: (clockTime.hours > 12) ? "PM" : "AM"
})
const display = target => time => target(time);
const formatClock = format =>
time =>
format.replace("hh", time.hours)
.replace("mm", time.minutes)
.replace("ss", time.seconds)
.replace("tt", time.ampm);
const prependZero = key => clockTime =>
({
...clockTime,
[key]: (clockTime[key] < 10) ?
"0" + clockTime[key] : clockTime[key]
});
const convertToCivilianTime = clockTime =>
compose(
appendAMPM,
civilianHours
)(clockTime);
const doubleDigits = civilianHours =>
compose(
prependZero("hours"),
prependZero("minutes"),
prependZero("seconds")
)(civilianHours);
const startTicking = () =>
setInterval((
compose(
getCurrentTime,
serializeClockTime,
convertToCivilianTime,
doubleDigits,
formatClock(("hh:mm:ss tt")),
display(log),
)
), oneSecond);
startTicking();
</script>
</body>
</html>