JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container-fluid">
	<div class="col-md-12">
	<div id="countdown">
		<p class="days">00</p>
		<p class="timeRefDays">days</p>
		<p class="hours">00</p>
		<p class="timeRefHours">hours</p>
		<p class="minutes">00</p>
		<p class="timeRefMinutes">minutes</p>
		<p class="seconds">00</p>
		<p class="timeRefSeconds">seconds</p>
	</div>
	</di

CSS

body {
	background-color: #490404;
}

p {
	font-family: "Helvetica", "Arial", sans-serif;
	color: #fff;
	text-align: center;
	padding: 25px;
}

.days {
	font-size: 2.8rem;
	margin-left: 1px;
}

.hours {
	font-size: 2.8rem;
	margin-left: 1px;
}

.minutes {
	font-size: 2.8rem;
	margin-left: 1px;
}

.seconds {
	font-size: 2.8rem;
	margin-left: 1px;
}

.timeRefDays {
	font-size: 1.4rem;
	padding-top: 40px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

.timeRefHours {
	font-size: 1.4rem;
	padding-top: 40px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

.timeRefMinutes {
	font-size: 1.4rem;
	padding-top: 40px;
	padding-bottom: 5px;
	padding-right: 30px;
	text-align: center;
	margin-left: 1px;
}

.timeRefSeconds {
	font-size: 1.4rem;
	padding-top: 40px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

#countdown {
	background-color: #490404;
	margin-top: 15%;
}

#countdown p {
	display: inline-block;
	background-color: #6d1717;
	width: 95px;
	height: 95px;
}

/*Mobile*/

@media (max-width: 768px) {
.days {
	font-size: 3.5rem;
	margin-left: 1px;
}

.hours {
	font-size: 3.5rem;
	margin-left: 1px;
}

.minutes {
	font-size: 3.5rem;
	margin-left: 1px;
}

.seconds {
	font-size: 3.5rem;
	margin-left: 1px;
}

.timeRefDays {
	font-size: 2rem;
	padding-top: 42px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

.timeRefHours {
	font-size: 2rem;
	padding-top: 42px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

.timeRefMinutes {
	font-size: 2rem;
	padding-top: 42px;
	padding-bottom: 5px;
	padding-right: 30px;
	text-align: center;
	margin-left: 1px;
}

.timeRefSeconds {
	font-size: 2rem;
	padding-top: 42px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: 1px;
}

#countdown p {
	display: inline-block;
	background-color: #6d1717;
	width: 165px;
	height: 95px;
	margin-bottom: 10px;
}

p {
	font-family: "Helvetica", "Arial", sans-serif;
	color: #fff;
	text-align: center;
}

#countdown...

JavaScript

(function (e) {
	e.fn.countdown = function (t, n) {
		function i() {
			eventDate = Date.parse(r.date) / 1e3;
			currentDate = Math.floor(e.now() / 1e3);
			if (eventDate <= currentDate) {
				n.call(this);
				clearInterval(interval)
			}
			seconds = eventDate - currentDate;
			days = Math.floor(seconds / 86400);
			seconds -= days * 60 * 60 * 24;
			hours = Math.floor(seconds / 3600);
			seconds -= hours * 60 * 60;
			minutes = Math.floor(seconds / 60);
			seconds -= minutes * 60;
			days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
			hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
			minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
			seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
			if (r["format"] == "on") {
				days = String(days).length >= 2 ? days : "0" + days;
				hours = String(hours).length >= 2 ? hours : "0" + hours;
				minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
				seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
			}
			if (!isNaN(eventDate)) {
				thisEl.find(".days").text(days);
				thisEl.find(".hours").text(hours);
				thisEl.find(".minutes").text(minutes);
				thisEl.find(".seconds").text(seconds);
			}
			else {
				alert("Invalid Date. Ex: 15 Wednesday 2015 10:00:00");
				clearInterval(interval)
			}
		}
		var thisEl = e(this);
		var r = {
			date: null,
			format: null
		};
		t && e.extend(r, t);
		i();
		interval = setInterval(i, 1e3)
	}	
})(jQuery);
$(document).ready(function () {
	function e() {
		var e = new Date;
		e.setDate(e.getDate() + 60);
		dd = e.getDate();
		mm = e.getMonth() + 1;
		y = e.getFullYear();
		futureFormattedDate = mm + "/" + dd + "/" + y;
		return futureFormattedDate
	}
	$("#countdown").countdown({
		date: "13 September 2015 13:00:00", // date being...