Skip to content

Instantly share code, notes, and snippets.

@michaelroy-yvr

michaelroy-yvr/eminus-v0-1.markdown

Last active February 13, 2018 09:05
Show Gist options
  • Save michaelroy-yvr/1f830a5b7ca6feeab229b65f89603817 to your computer and use it in GitHub Desktop.
Save michaelroy-yvr/1f830a5b7ca6feeab229b65f89603817 to your computer and use it in GitHub Desktop.
Download ZIP
eminus v0.2
Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>EMinus.ca</title>
</head>
<body>
<div class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<li id="on">
<figure><div class="prov">
<h1>Ontario</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>Ontario Election Day:<br><a href="https://www.elections.on.ca/en/voting-in-ontario/how-to-vote.html">Thursday, June 7, 2018 - 8:00AM ET</a></h3></figcaption>
</figure>
</li>
<li id="bcmuni">
<figure><div class="prov">
<h1>BC Municipal</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>BC Municipal Election Day:<br><a href="http://vancouver.ca/your-government/civic-elections.aspx">Saturday, October 20, 2018 - 8am PT</a></h3></figcaption>
</figure>
</li>
<li id="onmuni">
<figure><div class="prov">
<h1>ON Municipal</h1>
</div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>ON Municipal Election Day:<br><a href="https://www.amo.on.ca/AMO-Content/Municipal-101/Municipal-Elections.aspx">Monday, October 22, 2018 - 8:00AM ET</a></h3></figcaption>
</li>
<li id="ab">
<figure><div class="prov">
<h1>Alberta</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>Alberta Election Day:<br><a href="https://en.wikipedia.org/wiki/30th_Alberta_general_election">Tuesday, May 7, 2019 - 8am MT</a></h3></figcaption>
</figure>
</li>
<li id="ca">
<figure><div class="prov">
<h1>Canada</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>Canadian Election Day:<br><a href="http://www.elections.ca/content.aspx?section=vot&dir=faq&document=faqelec&lang=e#a10">Monday, October 21, 2019 - 9:30am AT</a></h3></figcaption>
</figure>
</li>
<li id="mb">
<figure><div class="prov">
<h1>Manitoba</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>Manitoba Election Day:<br><a href="http://www.electionsmanitoba.ca/en/Voting">Tuesday, October 6, 2020 - 8:00am CT</a></h3></figcaption>
</figure>
</li>
<li id="sk">
<figure><div class="prov">
<h1>Saskatchewan</h1></div>
<div class="clock">
<div class="block">
<p class="digit" id="days"></p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>Saskatchewan Election Day:<br><a href="https://en.wikipedia.org/wiki/29th_Saskatchewan_general_election">Monday, November 2, 2020 - 8am CT</a></h3></figcaption>
</figure>
</li>
<li id="bc">
<figure><div class="prov">
<h1>British Columbia</h1>
</div>
<div class="clock">
<div class="block">
<span class="digit" id="days"></span>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit" id="hours"></p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit" id="minutes"></p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit" id="seconds"></p>
<p class="text">Seconds</p>
</div>
</div>
<figcaption><h3>BC Election Day:<br><a href="http://www.elections.bc.ca/index.php/voting/">Tuesday, May 11, 2021 - 8:00AM PT</a></h3></figcaption>
</li>
</ul>
</section><!-- section grid-wrap -->
</div> <!-- div grid-gallery -->
<div id="footer">
<p>EMinus.ca by <a href="http://www.twitter.com/mikelroy">@mikelroy</a> | <a href="https://gist.github.com/michaelroy-yvr/1f830a5b7ca6feeab229b65f89603817">Code available</a> via Github</p>
</div>
</body>
</html>
Raw
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, 11 May 2021 08:00:00 -0700'));
// var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
var oneday = new Date(Date.parse('Thur, 7 Jun 2018 05:00:00 -0700'));
var caeday = new Date(Date.parse('Mon, 21 Oct 2019 04:30:00 -0700'));
var abeday = new Date(Date.parse('Tues, 7 May 2019 07:00:00 -0700'));
var skeday = new Date(Date.parse('Mon, 2 Nov 2020 06:00:00 -0700'));
var mbeday = new Date(Date.parse('Tues, 6 Oct 2020 06:00:00 -0700'));
var bcmunieday = new Date(Date.parse('Sat, 20 Oct 2018 08:00:00 -0700'));
var onmunieday = new Date(Date.parse('Mon, 22 Oct 2018 05:00:00 -0700'));
initializeClock('bc', bceday);
initializeClock('on', oneday);
initializeClock('ca', caeday);
initializeClock('sk', skeday);
initializeClock('ab', abeday);
initializeClock('mb', mbeday);
initializeClock('bcmuni', bcmunieday);
initializeClock('onmuni', onmunieday);
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100,400);
body {
background:#777 url("http://eminus.michaelroy.ca/images/parliament-bw.jpg") no-repeat fixed center;
background-size:cover;
color:white;
text-align:center;
font-family: 'Raleway', sans-serif;
font-weight:100;
height: 100%;
}
.grid-gallery ul {
list-style:none;
margin:0;
padding:1em;
}
.grid-gallery figure {
margin:0;
}
li figure {
background:rgba(30,30,80,0.8);
}
.time {
background:#555;
font-size:2vw;
display: inline-block;
padding: .25em .5em;
}
.time .units {
font-weight:light;
font-size:.75vw;
}
.grid-wrap {
max-width:1200px;
margin: 0 auto;
//padding: 0 1em 2em;
//margin-bottom: 10em;
}
.grid {
margin: 0 auto;
}
.grid li {
width: 31%;
float: left;
margin: .5em;
}
.clockdiv > div {
padding:10px;
//border-radius:3px;
display:inline-block;
background:#555;
margin:-.15em;
}
.clockdiv div > span {
padding:10px;
//border-radius:3px;
background:#333;
display:inline-block;
}
.smalltext {
padding-top:5px;
font-size:0.65em;
}
h3 {
padding-top:.5em;
font-size:0.75em;
font-weight:100;
}
h3 a {
color:#999;
text-decoration:none;
}
.block {
//display: flex;
flex-direction: column;
margin: .5em;
margin-top: 0;
}
.text {
color: #1abc9c;
font-size: 1em;
font-family: 'Roboto Condensed', serif;
font-weight: 40;
margin-top:10px;
margin-bottom: 10px;
text-align: center;
}
.digit {
color: #ecf0f1;
font-size: 2em;
font-weight: 100;
font-family: 'Roboto', serif;
margin: 10px;
text-align: center;
}
.clock {
//align-items: center;
//bottom: 0;
//background-color: #34495e;
display: flex;
justify-content: center;
//left: 0;
//position: absolute;
//right: 0;
//top:0;
}
.prov {
margin: 0 auto;
display: block;
padding: .5em 0;
background: rgba(255,255,255,0.1);
margin-bottom: 1em;
}
figure h1 {
font-family: 'Roboto', serif;
font-weight: 400;
}
figcaption {
display: block;
padding: .25em 0;
background: rgba(255,255,255,0.1);
margin-bottom: 1em;
}
/* Media queries */
@media screen and (min-width: 960px) {
.grid li {
width: 31%;
}
.digit { font-size: 1.5em; margin: 0em; }
.text { font-size: .75em; }
}
@media screen and (max-width: 960px) {
.grid li {
width: 47%;
}
.digit { font-size: 1em; }
.text { font-size: .5em; }
}
@media screen and (max-width: 640px) {
.grid li {
width: 100%;
}
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:3em;
width:100%;
background:#999;
}
#footer p {
font-size:1em;
text-align:right;
margin-right:3em;
}
#footer a {
color: #333;
text-decoration:none;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100,400" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment