polbins/countdown-timer.markdown

## countdown-timer.markdown

      
    Raw
  

              countdown-timer.markdown
            
          
    Countdown Timer

A how-to for a countdown clock.
A Pen by polbins on CodePen.
License.

  
## index.html
<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>

## script.js
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)

## style.css
* {
  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;
}

## styles
<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" />
	<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" />