Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Countdown Timer
<head>
<link href="https://fonts.googleapis.com/css?family=Sacramento&display=swap" rel="stylesheet">
</head>
<div class="container">
<!-- <h1 id="head">Countdown to my birthday:</h1> -->
<ul>
<li><span id="days"></span>Days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('Sep 30, 2019 00:00:00').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
// 'IT'S MY BIRTHDAY!;
//}
}, second)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Sacramento', cursive;
}
body {
background-color: #ffd54f;
}
.container {
color: #333;
text-align: center;
}
h1 {
font-weight: normal;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
}
li span {
display: block;
font-size: 4.5rem;
}
<link href="https://gitcdn.xyz/repo/AllThingsSmitty/e42d5dbd4f548b2a4ddbf442627a897f/raw/d2038e644ba35c5ec588057465c36435926ff7d9/flexbox-center-container.css" rel="stylesheet" />
<link href="https://gitcdn.xyz/repo/AllThingsSmitty/8fb1b38c77ddd4357287f242f07c7797/raw/6cad974c1f0e52b716a3cd1dc8f4407b93f1c375/system-fonts.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment