jdreichmann/simple-countdown
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Johanna Dorothea Reichmann 2019-03-04 14:02:53 +01:00
commit 35c988aeff
Signed by untrusted user who does not match committer: transcaffeine
GPG Key ID: 03624C433676E465
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html Normal file
View File

@ -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>

55
timer.js Normal file
View File

@ -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);