commit 35c988aeffeb6fd23fbc73e8fc64e1db949da2e8 Author: jreichmann Date: Mon Mar 4 14:02:53 2019 +0100 Add HTML skeleton, add timer counting down the time until the event diff --git a/index.html b/index.html new file mode 100644 index 0000000..01bf47c --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Simple Countdown timer + + + + + + + + \ No newline at end of file diff --git a/timer.js b/timer.js new file mode 100644 index 0000000..e6b5a6d --- /dev/null +++ b/timer.js @@ -0,0 +1,55 @@ +(function(window) { + + function fetchEvents() { + const events = [ + {name: "EH19", date: "2019-04-19T10:00:00.000+01:00", description: "Wien c:"} + ]; + return new Promise((fullfill, reject) => { + fullfill(events) + }) + } + + const dateMeasures = { + day : (60 * 60 * 24), + hour : (60 * 60), + minute : 60 + } + + function millisecondsToHumanReadable(mseconds) { + const seconds = mseconds / 1000 + const days = Math.floor(seconds / dateMeasures.day) + const hours = Math.floor((seconds - days * dateMeasures.day) / dateMeasures.hour) + const minutes = Math.floor((seconds - days * dateMeasures.day - hours * dateMeasures.hour) / dateMeasures.minute) + const secondsLeft = (seconds - days * dateMeasures.day - hours * dateMeasures.hour - minutes * dateMeasures.minute).toFixed(2) + return `${days} days, ${hours < 10 ? '0' + hours: hours}:${minutes < 10 ? '0' + minutes : minutes}:${secondsLeft < 10 ? '0' + secondsLeft : secondsLeft} left` + } + + function renderEvent(event) { + const container = document.createElement('div') + const title = document.createElement('h4') + title.textContent = event.name + title.style.cssFloat = 'left' + const date = document.createElement('h4') + date.textContent = event.date + date.style.cssFloat = 'right'/1 + const eventUnix = Date.parse(event.date) + const countdown = document.createElement('h1') + countdown.textContent = eventUnix - Date.now() + countdown.style.clear = 'both' + setInterval(() => { + const diff = eventUnix - Date.now() + countdown.textContent = millisecondsToHumanReadable(diff) + }, 200) + container.appendChild(title) + container.appendChild(date) + container.appendChild(countdown) + window.document.body.appendChild(container) + } + + window.onload = () => { + fetchEvents().then(events => { + events.forEach(event => renderEvent(event)) + }) + } + +})(window); \ No newline at end of file