Render description, tag container divs to be able to properly use CSS

timer.js

@@ -26,29 +26,35 @@
 
     function renderEvent(event) {
         const container = document.createElement('div')
+        container.classList += 'event_container'
         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
+        date.style.cssFloat = 'right'
+        const desc = document.createElement('p')
+        desc.textContent = event.description
+        desc.style.clear = 'both'
         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(desc)
         container.appendChild(countdown)
         window.document.body.appendChild(container)
     }
 
     window.onload = () => {
         fetchEvents().then(events => {
-            events.forEach(event => renderEvent(event))
+            events
+                .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
+                .forEach(event => renderEvent(event))
         })
     }