Add HTML skeleton, add timer counting down the time until the event

2019-03-04 14:02:53 +01:00 · 2019-03-04 14:02:53 +01:00 · 35c988aeff
commit 35c988aeff
2 changed files with 69 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Simple Countdown timer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
+    <script src="timer.js"></script>
+</head>
+<body>
+    
+</body>
+</html>
--- a/timer.js
+++ 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);