Time until/from counter #2
Show time until or from a certain date (factories)
by KooiInc MeHere
HTML
<div id="timedUntil" data-timer></div>
<div id="timedFrom" data-timer></div>
CSS
body {
font: 16px/20px normal verdana, arial, helvetica;
margin: 1.5em;
}
[data-timer] {
margin-bottom: 0.7em;
}
[data-timer] div:first-child {
font-style: italic;
color: #AAA;
}
[data-timer] b {
color: green;
}
JavaScript
timeFrom(new Date('2015/12/31'), document.querySelector("#timedFrom"));
timeUntil(new Date('2019/12/31 23:59'), document.querySelector("#timedUntil"));
function timeFrom(fromDate, fromField) {
const writer = (difference, dtElements) => `
<div>From ${fromDate.toLocaleString()} to now lasted</div>${
dtElements.day(difference.days)} ${
dtElements.hour(difference.hours)} ${
dtElements.minute(difference.minutes)} and ${
dtElements.second(difference.seconds)}`;
countUpOrDown().createAndStartTimer(fromField, fromDate, writer);
}
function timeUntil(untilDate, untilField) {
const date2Show = untilDate.toLocaleString();
const writer = (difference, dtElements) => `
<div>Time until ${date2Show}</div>${
dtElements.day(difference.days)} ${
dtElements.hour(difference.hours)} ${
dtElements.minute(difference.minutes)} and ${
dtElements.second(difference.seconds)}`;
const cb = () => {
const el = document.createElement("div");
el.appendChild(document.createTextNode(`${date2Show} passed`));
untilField.appendChild(el);
};
countUpOrDown().createAndStartTimer(untilField, untilDate, writer, cb);
}
function countUpOrDown() {
const logTo = (field, args) => field.innerHTML = args;
const dtElements = dateTimeFragments();
const writerFactory = (field, writer, value) =>
diff => logTo(field, writer(diff, dtElements));
const createTimer = (field, dateValue, writer, callback) =>
counterFactory(dateValue, writerFactory(field, writer, dateValue), callback)
return {
createTimer: createTimer,
createAndStartTimer: (...args) => createTimer.call(null, ...args)()
};
function counterFactory(value, writer, callback) {
const showTime = () => {
const diffMS = value - new Date();
const reIterate = () => {
writer(dateDiffCalc(diffMS));
setTimeout(showTime, 1000);
};
const exitCounter = () => callback instanceof Function &&...