michaelroy-yvr/eminus-v0-1.markdown

## eminus-v0-1.markdown

      
    Raw
  

              eminus-v0-1.markdown
            
          
    eminus v0.1

A Pen by Michael Roy on CodePen.
License.

  
## index.html
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title>EMinus.ca</title>
  </head>
  <body>
    <div id="countwrapper">
    <h1>eminus.ca</h1>
    <div id="clockdiv">
      <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
      </div>
      <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
      </div>
      <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
      </div>
      <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
      </div>
    </div>
    <h3>BC Election Day: <a href="http://www.elections.bc.ca/index.php/voting/">Tuesday, May 9, 2016 - 8:00AM</a></h3>
    </div>
  </body>
</html>

## script.js
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var bceday = new Date(Date.parse('Tues, 9 May 2017 08:00:00 -0700'));
// var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', bceday);

## style.css
body {
  background:#777;
  color:white;
  text-align:center;
  font-family: 'Raleway', sans-serif;
  font-weight:100;
}

#countwrapper {
  position:absolute;
  top:35%;
  transform:translateY(-50%);
  left:50%;
  transform:translateX(-50%);
}

h1 {
  color:#555;
  font-size:3em;
  margin:1em 0 0.5em;
  font-weight:900;
}

#clockdiv {
  display:inline-block;
}


#clockdiv > div {
  padding:10px;
  border-radius:3px;
  display:inline-block;
  background:#555;
  margin:.5em;
}

#clockdiv div > span {
  padding:15px;
  border-radius:3px;
  background:#333;
  display:inline-block;
}

.smalltext {
  padding-top:5px;
  font-size:0.75em;
}

h3 {
  padding-top:1em;
  font-size:0.75em;
  font-weight:100;
}

h3 a {
  color:#999;
  text-decoration:none;
}
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<title>EMinus.ca</title>
	</head>
	<body>
	<div id="countwrapper">
	<h1>eminus.ca</h1>
	<div id="clockdiv">
	<div>
	<span class="days"></span>
	<div class="smalltext">Days</div>
	</div>
	<div>
	<span class="hours"></span>
	<div class="smalltext">Hours</div>
	</div>
	<div>
	<span class="minutes"></span>
	<div class="smalltext">Minutes</div>
	</div>
	<div>
	<span class="seconds"></span>
	<div class="smalltext">Seconds</div>
	</div>
	</div>
	<h3>BC Election Day: <a href="http://www.elections.bc.ca/index.php/voting/">Tuesday, May 9, 2016 - 8:00AM</a></h3>
	</div>
	</body>
	</html>
	function getTimeRemaining(endtime) {
	var t = Date.parse(endtime) - Date.parse(new Date());
	var seconds = Math.floor((t / 1000) % 60);
	var minutes = Math.floor((t / 1000 / 60) % 60);
	var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
	var days = Math.floor(t / (1000 * 60 * 60 * 24));
	return {
	'total': t,
	'days': days,
	'hours': hours,
	'minutes': minutes,
	'seconds': seconds
	};
	}

	function initializeClock(id, endtime) {
	var clock = document.getElementById(id);
	var daysSpan = clock.querySelector('.days');
	var hoursSpan = clock.querySelector('.hours');
	var minutesSpan = clock.querySelector('.minutes');
	var secondsSpan = clock.querySelector('.seconds');

	function updateClock() {
	var t = getTimeRemaining(endtime);

	daysSpan.innerHTML = t.days;
	hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
	minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
	secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

	if (t.total <= 0) {
	clearInterval(timeinterval);
	}
	}

	updateClock();
	var timeinterval = setInterval(updateClock, 1000);
	}

	var bceday = new Date(Date.parse('Tues, 9 May 2017 08:00:00 -0700'));
	// var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
	initializeClock('clockdiv', bceday);
	body {
	background:#777;
	color:white;
	text-align:center;
	font-family: 'Raleway', sans-serif;
	font-weight:100;
	}

	#countwrapper {
	position:absolute;
	top:35%;
	transform:translateY(-50%);
	left:50%;
	transform:translateX(-50%);
	}

	h1 {
	color:#555;
	font-size:3em;
	margin:1em 0 0.5em;
	font-weight:900;
	}

	#clockdiv {
	display:inline-block;
	}


	#clockdiv > div {
	padding:10px;
	border-radius:3px;
	display:inline-block;
	background:#555;
	margin:.5em;
	}

	#clockdiv div > span {
	padding:15px;
	border-radius:3px;
	background:#333;
	display:inline-block;
	}

	.smalltext {
	padding-top:5px;
	font-size:0.75em;
	}

	h3 {
	padding-top:1em;
	font-size:0.75em;
	font-weight:100;
	}

	h3 a {
	color:#999;
	text-decoration:none;
	}