townie/age.html -rw-r--r-- 3.8 KiB View raw
                                                                                
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
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<meta charset="utf-8">
<title>how old am I?</title>
<style>
body{min-height:100vh;margin:0;padding:0;display:flex;
    flex:column nowrap;align-items:center;background:#455;}
main{font:18px/1.23 monospace;max-width:70ch;padding:2ch;
    margin:auto;border:1px solid;color:#455;background:#fee;}
.age{background:yellow;padding:4px;}
aside{position:absolute;bottom:0;right:0;background:white;}
</style>

<main>
<h1>how old am I?</h1>
<aside>cf. also <a href="age2.html">another accounting</a>,
    or <a href="index.html">return</a>.</aside>
<p>well, I was born on July 25, 1990, so I am
<span class=age id="days"></span>
days old.</p>
<p>and I was born at 9:45 P.M., so I am
<span class=age id="minutes"></span>
minutes old.</p>
<p>I'm not sure what second in that minute I was born,
so I'm between
<span class=age id="secs-min"></span> and
<span class=age id="secs-max"></span> seconds old.
</p>
<h2>other fun ages:</h2>
<ul>
    <li>I am
        <span class=age id="weeks"></span> weeks old.</li>
    <li>I am
        <span class=age id="hours"></span> hours old.</li>
    <li>I am
        <span class=age id="months"></span> months old.</li>
</ul>
<h2>countdowns</h2>
<ul>
    <li>it is
        <span class=countdown id=daysTilBirthday></span>
        days til my next birthday.
    </li>
</ul>
</main>
<script>
let birthday = new Date(1990, 6, 25, 21, 45, 30); // 30 secs for average

let spans = {
    "ages": {
        "secMin": document.getElementById("secs-min"),
        "secMax": document.getElementById("secs-max"),
        "minute": document.getElementById("minutes"),
        "hour": document.getElementById("hours"),
        "day": document.getElementById("days"),
        "week": document.getElementById("weeks"),
        "year": document.getElementById("years"),
        "month": document.getElementById("months")
    }
}

let ages = {};
function updateAges(t) {
    let diff = t - birthday; // milliseconds

    ages["second"] = diff / 1000;
    ages["secMin"] = ages["second"] - 30;
    ages["secMax"] = ages["second"] + 30;

    ages["minute"] = ages["second"] / 60;
    ages["hour"] = ages["minute"] / 60;
    ages["day"] = ages["hour"] / 24;
    ages["week"] = ages["day"] / 7;
    ages["year"] = ages["day"] / 365.2425;
    ages["month"] = ages["year"] * 12;

    rounders = { 'second': 0, 'minute': 2, 'hour': 4,
        'day': 5, 'week': 6, 'year': 8, 'month': 7 };

    for (let period in ages) {
        let rounder = rounders[period];
        if (spans.ages[period]) {
            spans.ages[period].textContent
                = (ages[period]).toFixed(Math.max(0,rounder));
        }
    }
}

let countdowns = {
    'birthday': {}
};
spans.countdowns = {
    'birthday': {
        'day': document.getElementById("daysTilBirthday")
    }
}
function updateCountdowns(t) {
    let yearAdjustment = 0;
    let bMonth = birthday.getMonth();
    let bDate = birthday.getDate();
    if (bMonth < t.getMonth() ||
        (bMonth === t.getMonth() &&
        bDate <= t.getDate())) {
        yearAdjustment = 1;
    }
    let nextBirthday =
        new Date(t.getFullYear() + yearAdjustment, bMonth, bDate);

    let bdiff = nextBirthday - t;
    countdowns.birthday["second"] = bdiff / 1000;
    countdowns.birthday["minute"]
        = countdowns.birthday["second"] / 60;
    countdowns.birthday["hour"]
        = countdowns.birthday["minute"] / 60;
    countdowns.birthday["day"]
        = countdowns.birthday["hour"] / 24;
    countdowns.birthday["week"]
        = countdowns.birthday["day"] / 7;

    for (let bc in countdowns.birthday) {
        if (spans.countdowns.birthday[bc]) {
            spans.countdowns.birthday[bc].textContent
                = (countdowns.birthday[bc]).toFixed(5);
        }
    }
}

function update() {
    let now = new Date;
    updateAges(now);
    updateCountdowns(now);
}

window.onload = update
var everySecondID = window.setInterval(update, 1000);
</script>