<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

* { box-sizing: border-box; margin: 0; padding: 0; } 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; text-transform: uppercase; } li span { display: block; font-size: 4.5rem; }

const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let countDown = new Date('May 22, 2019 03: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)