UNFINISHED: age pages
This commit is contained in:
Case Duckworth
parent
db4a33c1fa
commit
e8f2daad6a
|
|
@ -0,0 +1,145 @@
|
|||
<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;
|
||||
}</style>
|
||||
|
||||
<main>
|
||||
<h1>how old am I?</h1>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
var page = document.getElementById('main');
|
||||
var birthday = new Date("1990-07-25T21:45:00");
|
||||
|
||||
var secsPer = {};
|
||||
secsPer.second = 1;
|
||||
secsPer.minute = 60;
|
||||
secsPer.hour = secsPer.minute * 60;
|
||||
secsPer.day = secsPer.hour * 24;
|
||||
secsPer.week = secsPer.day * 7;
|
||||
secsPer.year = secsPer.day * 365.2425;
|
||||
secsPer.month = secsPer.year / 12;
|
||||
|
||||
function cumDiff(t1, t2) {
|
||||
// x years, x weeks, x days, x hours, x minutes, x seconds
|
||||
let diff = Math.abs(t2 - t1);
|
||||
|
||||
let seconds = diff / 1000;
|
||||
let counts = {
|
||||
'year': 0,
|
||||
'week': 0,
|
||||
'day': 0,
|
||||
'hour': 0,
|
||||
'minute': 0,
|
||||
'second': 0
|
||||
};
|
||||
|
||||
for (let count in counts) {
|
||||
while (seconds >= secsPer[count]) {
|
||||
counts[count] += 1;
|
||||
seconds -= secsPer[count];
|
||||
}
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
|
||||
function init() {
|
||||
page.innerHTML = "";
|
||||
var title = document.createElement("h1");
|
||||
title.textContent = "How old am I?";
|
||||
page.appendChild(title);
|
||||
|
||||
var cumAgeP = document.createElement('p');
|
||||
cumAgeP.setAttribute('id', 'cumAge');
|
||||
page.appendChild(cumAgeP);
|
||||
|
||||
var countdownTitle = document.createElement("h2");
|
||||
countdownTitle.textContent = "How long til my next birthday?";
|
||||
page.appendChild(countdownTitle);
|
||||
|
||||
var bdccP = document.createElement('p');
|
||||
bdccP.setAttribute('id', 'bdcc');
|
||||
page.appendChild(bdccP);
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
function updateCumAge(t, el) {
|
||||
var cumAge = document.createElement("p");
|
||||
cumAge.setAttribute('id', 'cumAge');
|
||||
cumAge.setAttribute('class', 'cumulative');
|
||||
var cumAgeDiff = cumDiff(t, birthday);
|
||||
for (let count in cumAgeDiff) {
|
||||
if (cumAgeDiff[count] > 0) {
|
||||
let dat = document.createElement("span");
|
||||
dat.setAttribute('class', 'age');
|
||||
dat.textContent = cumAgeDiff[count];
|
||||
let postCount = '';
|
||||
if (cumAgeDiff[count] > 1) { postCount += 's'; }
|
||||
let str = document.createElement('span');
|
||||
str.setAttribute('class', 'desc');
|
||||
str.textContent = " "+count+postCount;
|
||||
|
||||
cumAge.appendChild(dat);
|
||||
cumAge.appendChild(str);
|
||||
}
|
||||
}
|
||||
el.replaceWith(cumAge);
|
||||
}
|
||||
|
||||
function updateBdayCumCountdown(t, el) {
|
||||
var bdcc = document.createElement("t");
|
||||
bdcc.setAttribute('id', 'bdcc');
|
||||
bdcc.setAttribute('class', 'cumulative');
|
||||
let yearAdjust = 0;
|
||||
if (t.getMonth() > birthday.getMonth()
|
||||
|| (t.getMonth() == birthday.getMonth()
|
||||
&& t.getDate() >= birthday.getDate())) {
|
||||
yearAdjust = 1;
|
||||
}
|
||||
var nextBirthday = new Date(
|
||||
t.getFullYear() + yearAdjust,
|
||||
birthday.getMonth(),
|
||||
birthday.getDate());
|
||||
bdccDiff = cumDiff(t, nextBirthday);
|
||||
|
||||
for (let count in bdccDiff) {
|
||||
if (bdccDiff[count] > 0) {
|
||||
let dat = document.createElement("span");
|
||||
dat.setAttribute('class', 'countdown');
|
||||
dat.textContent = bdccDiff[count];
|
||||
let postCount = '';
|
||||
if (bdccDiff[count] > 1) { postCount += 's'; }
|
||||
if (count !== 'second') { postCount += ', '; }
|
||||
let str = document.createTextNode(" "+count+postCount);
|
||||
|
||||
bdcc.appendChild(dat);
|
||||
bdcc.appendChild(str);
|
||||
}
|
||||
}
|
||||
el.replaceWith(bdcc);
|
||||
}
|
||||
|
||||
function update() {
|
||||
now = new Date();
|
||||
|
||||
updateCumAge(now, document.getElementById('cumAge'));
|
||||
updateBdayCumCountdown(now, document.getElementById('bdcc'));
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE 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;
|
||||
width: 100%;
|
||||
padding: 2ch;
|
||||
margin: auto;
|
||||
border: 1px solid;
|
||||
color: #455;
|
||||
background: #fee;
|
||||
} .age,.countdown {
|
||||
padding: 4px;
|
||||
} .age { background: yellow; }
|
||||
.cumulative .desc:not(:last-child)::after {
|
||||
content: ", ";
|
||||
}
|
||||
.cumulative .desc:nth-last-child(2)::after {
|
||||
content: ", and" !important;
|
||||
}
|
||||
.countdown { background: lime; }</style>
|
||||
<body>
|
||||
<main id="main">hmm....</main>
|
||||
<script src="age.js"> </script>
|
||||
<script>
|
||||
window.onload = init;
|
||||
var updateID = window.setInterval(update, 1000);
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Reference in New Issue