add countdown timer

_layouts/default.html

@@ -18,7 +18,7 @@
 			{% assign pagestyle = layout.pagestyle %}
 		{% endif %}
 		{% if page.script %}
-		<script src="js/{{ page.script }}.js" type="text/javascript">
+		<script src="/js/{{ page.script }}.js" type="text/javascript">
 		</script>
 		{% endif %}
 		{% if pagestyle %}

countdown.html

+<div id="countdown">
+	<div id="countdown-numbers">
+		<div class="days" id="days"></div>
+		<div class="hours" id="hours"></div>
+		<div class="minutes" id="minutes"></div>
+	</div>
+	<svg id="arcs">
+		<circle class="days" id="dayarc" r="24vw" cx="50%" cy="50%"></circle>
+		<circle class="hours" id="hourarc" r="25vw" cx="50%" cy="50%"></circle>
+		<circle class="minutes" id="minarc" r="25.65vw" cx="50%" cy="50%"></circle>
+	</svg>
+</div>

css/countdown.css

+#main section {
+	width: 60vw;
+	height: 60vw;
+	line-height: initial;
+}
+
+#countdown {
+	position: relative;
+	margin: auto;
+	text-align: center;
+	width: 100%;
+	height: 100%;
+}
+
+#countdown-numbers {
+	display: inline-block;
+	position: relative;
+	top: 40%;
+	text-align: center;
+}
+
+.days {
+	font-size: 8vw;
+	color: mediumpurple;
+	stroke: mediumpurple;
+}
+
+.hours {
+	font-size: 6vw;
+	color: lawngreen;
+	stroke: lawngreen;
+}
+
+.minutes {
+	font-size: 4vw;
+	color: gold;
+	stroke: gold;
+}
+
+#days {
+	font-size: 8vw;
+}
+
+#hours {
+	font-size: 6vw;
+}
+
+#minutes {
+	font-size: 4vw;
+}
+
+svg {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	transform: rotateY(-180deg) rotateZ(-90deg);
+}
+
+svg circle {
+	/* stroke-linecap: round; */
+	fill: none;
+}
+
+svg circle.days {
+	stroke-width: 1.2vw;
+}
+
+svg circle.hours {
+	stroke-width: 0.8vw;
+}
+
+svg circle.minutes {
+	stroke-width: 0.5vw;
+}
+
+@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
+	#main section {
+		width: auto;
+	}
+}
+
+@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
+	#main section {
+		max-width: 60vw;
+	}
+}

cv.md

@@ -12,6 +12,7 @@ description: What have I been upto?
 {:.org}
 
 <details markdown="1">
+### Devops, NoSQL Team
 - Tokyo, Japan
 </details>
 

deepika.md

+---
+title: +Deepika
+pagestyle: countdown
+permalink: /+deepika/
+description: Countdown
+script: countdown
+---
+
+{% include_relative countdown.html %}

js/countdown.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 updateArc(id, value, max) {
+	// From Paul LeBeau, https://stackoverflow.com/a/37781274/2072269
+	var elem = document.getElementById(id);
+	// Get the radius ("r" attribute)
+	var radius = elem.r.baseVal.value;
+	// Calculate the circumference of the circle
+	var circumference = radius * 2 * Math.PI;
+	// How long the bar has to be
+	var barLength = value * circumference / max;
+
+	// Set a dash pattern for the stroke.
+	// The dash pattern consists of a dash of the right length,
+	// followed by a gap big enough to ensure that we don't see the next dash.
+	elem.setAttribute("stroke-dasharray", barLength + " " + circumference);
+}
+
+function initializeClock(id, endtime) {
+	var clock = document.getElementById(id);
+	var daysElem = clock.querySelector('#days');
+	var hoursElem = clock.querySelector('#hours');
+	var minutesElem = clock.querySelector('#minutes');
+
+	function plural(n, w, wp) {
+		if ((n % 10) == 1) {
+			return n + ' ' + w;
+		}
+		return n + ' ' + wp;
+	}
+
+	function updateClock() {
+		var t = getTimeRemaining(endtime);
+
+		daysElem.innerHTML = plural(t.days, 'day', 'days');
+		hoursElem.innerHTML = plural(t.hours, 'hour', 'hours');
+		minutesElem.innerHTML = ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2);
+
+		minLength = t.minutes + t.seconds/60;
+		hrLength = t.hours + minLength/60;
+		dayLength = t.days + hrLength/24;
+
+		updateArc("dayarc", dayLength, 365);
+		updateArc("hourarc", hrLength, 24);
+		updateArc("minarc", minLength, 60);
+
+		if (t.total <= 0) {
+			clearInterval(timeinterval);
+		}
+	}
+
+	updateClock();
+	var timeinterval = setInterval(updateClock, 1000);
+}
+
+var deadline = new Date('2019-12-22 09:00 +5:30');
+document.addEventListener("DOMContentLoaded", function(event) {
+	initializeClock('countdown', deadline);
+});