init

6 years ago · a6b996d772
commit a6b996d772
3 changed files with 47 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
 <!DOCTYPE html>
 <html>
    <head>
        <title>Good Times ahead</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <span id="days">∞∞</span> Days<br>
        <span id="hours">∞∞</span> Hours<br>
        <span id="minutes">∞∞</span> Minutes<br>
        <span id="seconds">∞∞</span> Seconds<br>
        <script type="text/javascript" src="main.js"></script>
    </body>
 </html>
--- a/main.css
+++ b/main.css
@ -0,0 +1,6 @@
 body {
    background-color: black;
    color: #0f0;
    font-family: monospace;
    font-size: 4rem;
 }
--- a/main.js
+++ b/main.js
@ -0,0 +1,26 @@
 const target = new Date('2019-06-21T10:54:00+02:00');
 const second = 1000;
 const minute = second*60;
 const hour = minute*60;
 const day = hour*24;
 setInterval(() => {
    const now = new Date();
    const diff = target - now;
    const timeleft = {}; 
    timeleft.days = Math.floor(diff/day);
    timeleft.hours = Math.floor(diff%day/hour);
    timeleft.minutes = Math.floor(diff%day%hour/minute);
    timeleft.seconds = Math.floor(diff%day%hour%minute/second);
    Object.keys(timeleft).forEach((unit) => {
        // retrieve value, cast it to string and optionally pad it with a leading 0
        const value = timeleft[unit]
        .toString()
        .padStart(2, '0');
        document.getElementById(unit).innerHTML = value;
    });
 }, 500);