Clean up rendering and added classes for styling

This commit is contained in:
Johanna Dorothea Reichmann 2019-03-04 15:01:19 +01:00
parent 195938cf1c
commit 0c6c387a14
Signed by untrusted user who does not match committer: transcaffeine
GPG Key ID: 03624C433676E465

View File

@ -24,29 +24,46 @@
return `${days} days, ${hours < 10 ? '0' + hours: hours}:${minutes < 10 ? '0' + minutes : minutes}:${secondsLeft < 10 ? '0' + secondsLeft : secondsLeft} left` return `${days} days, ${hours < 10 ? '0' + hours: hours}:${minutes < 10 ? '0' + minutes : minutes}:${secondsLeft < 10 ? '0' + secondsLeft : secondsLeft} left`
} }
function renderEvent(event) { function renderEventTitle(event) {
const container = document.createElement('div') const title = document.createElement('p')
container.classList += 'event_container'
const title = document.createElement('h4')
title.textContent = event.name title.textContent = event.name
title.style.cssFloat = 'left' title.classList += 'title'
const date = document.createElement('h4') return title
}
function renderEventDate(event) {
const date = document.createElement('p')
date.textContent = event.date date.textContent = event.date
date.style.cssFloat = 'right' date.classList += 'date'
return date
}
function renderEventDescription(event) {
const desc = document.createElement('p') const desc = document.createElement('p')
desc.textContent = event.description desc.textContent = event.description
desc.style.clear = 'both' desc.classList += 'description'
return desc
}
function renderEventCountdown(event) {
const eventUnix = Date.parse(event.date) const eventUnix = Date.parse(event.date)
const countdown = document.createElement('h1') const countdown = document.createElement('p')
countdown.classList += 'countdown'
countdown.textContent = eventUnix - Date.now() countdown.textContent = eventUnix - Date.now()
setInterval(() => { setInterval(() => {
const diff = eventUnix - Date.now() const diff = eventUnix - Date.now()
countdown.textContent = millisecondsToHumanReadable(diff) countdown.textContent = millisecondsToHumanReadable(diff)
}, 200) }, 200)
container.appendChild(title) return countdown
container.appendChild(date) }
container.appendChild(desc)
container.appendChild(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) window.document.body.appendChild(container)
} }