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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0fd426a7917e23a7ef790c34412546734f7a7927
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,116 @@
+<html lang="en">
+<head>
+ <title>Bennet</title>
+
+ <link rel="stylesheet" href="odometer.css">
+ <link rel="stylesheet" href="bennet.css">
+
+ <script src="odometer.js" defer></script>
+</head>
+<body>
+<table>
+ <thead>
+ <tr>
+ <td colspan="2"><span class="label">How old is Bennet?</span></td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <div id="year" class="odometer">0</div>
+ </td>
+ <td><span class="label">Years, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="month" class="odometer">0</div>
+ </td>
+ <td><span class="label">Months, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="week" class="odometer">0</div>
+ </td>
+ <td><span class="label">Weeks, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="day" class="odometer">0</div>
+ </td>
+ <td><span class="label">Days, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="hour" class="odometer">0</div>
+ </td>
+ <td><span class="label">Hours, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="minute" class="odometer">0</div>
+ </td>
+ <td><span class="label">Minutes, or...</span></td>
+ </tr>
+ <tr>
+ <td>
+ <div id="second" class="odometer">0</div>
+ </td>
+ <td><span class="label">Seconds, or...</span></td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <span id="total" class="label"></span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+
+<script type="text/javascript">
+
+ const birth = new Date("11/01/2017 06:13:00");
+ const now = new Date();
+ let diff = Math.round((now.getTime() - birth.getTime()) / 1000);
+
+ const $year = document.getElementById("year");
+ const $month = document.getElementById("month");
+ const $week = document.getElementById("week");
+ const $day = document.getElementById("day");
+ const $hour = document.getElementById("hour");
+ const $minute = document.getElementById("minute");
+ const $second = document.getElementById("second");
+ const $total = document.getElementById("total");
+
+ setInterval(() => {
+ $year.innerHTML = Math.floor(diff / 31536000).toString();
+ $month.innerHTML = Math.floor(diff / 2592000).toString();
+ $week.innerHTML = Math.floor(diff / 604800).toString();
+ $day.innerHTML = Math.floor(diff / 86400).toString();
+ $hour.innerHTML = Math.floor(diff / 3600).toString();
+ $minute.innerHTML = Math.floor(diff / 60).toString();
+ $second.innerHTML = diff.toString();
+
+ let total = diff;
+ const years = Math.floor(diff / 31536000);
+ total -= years * 31536000;
+ const months = Math.floor(total / 2592000);
+ total -= months * 2592000;
+ const days = Math.floor(total / 86400);
+ total -= days * 86400;
+ const hours = Math.floor(total / 3600);
+ total -= hours * 3600;
+ const minutes = Math.floor(total / 60);
+ total -= minutes * 60;
+ const seconds = total;
+ $total.innerHTML = `${years} Year${trn(years)}, ${months} Month${trn(months)}, ${days} Day${trn(days)}, ${hours} Hour${trn(hours)}, ${minutes} Minute${trn(minutes)}, and ${seconds} Second${trn(seconds)} old`;
+
+ diff++;
+ }, 1000);
+
+ function trn(num) {
+ return num === 1 ? "" : "s";
+ }
+</script>
+
+</body>
+</html>
\ No newline at end of file
|