From 0c6c387a141979076228a412fbcd10c0ffd1c822 Mon Sep 17 00:00:00 2001
From: jreichmann <johanna.reichmann@delta-industries.de>
Date: Mon, 4 Mar 2019 15:01:19 +0100
Subject: [PATCH] Clean up rendering and added classes for styling

---
 timer.js | 43 ++++++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/timer.js b/timer.js
index 21527ca..c1a2bac 100644
--- a/timer.js
+++ b/timer.js
@@ -24,29 +24,46 @@
         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')
-        container.classList += 'event_container'
-        const title = document.createElement('h4')
+    function renderEventTitle(event) {
+        const title = document.createElement('p')
         title.textContent = event.name
-        title.style.cssFloat = 'left'
-        const date = document.createElement('h4')
+        title.classList += 'title'
+        return title
+    }
+
+    function renderEventDate(event) {
+        const date = document.createElement('p')
         date.textContent = event.date
-        date.style.cssFloat = 'right'
+        date.classList += 'date'
+        return date
+    }
+
+    function renderEventDescription(event) {
         const desc = document.createElement('p')
         desc.textContent = event.description
-        desc.style.clear = 'both'
+        desc.classList += 'description'
+        return desc
+    }
+
+    function renderEventCountdown(event) {
         const eventUnix = Date.parse(event.date)
-        const countdown = document.createElement('h1')
+        const countdown = document.createElement('p')
+        countdown.classList += 'countdown'
         countdown.textContent = eventUnix - Date.now()
         setInterval(() => {
             const diff = eventUnix - Date.now()
             countdown.textContent = millisecondsToHumanReadable(diff)
         }, 200)
-        container.appendChild(title)
-        container.appendChild(date)
-        container.appendChild(desc)
-        container.appendChild(countdown)
+        return countdown
+    }
+
+    function renderEvent(event) {
+        const container = document.createElement('div')
+        container.classList += 'event_container'
+        container.appendChild(renderEventTitle(event))
+        container.appendChild(renderEventDate(event))
+        container.appendChild(renderEventDescription(event))
+        container.appendChild(renderEventCountdown(event))
         window.document.body.appendChild(container)
     }