JSFiddle - React, Tailwind, and code Playground

by omni5cience

HTML

<meta name="viewport" content="width=390; user-scalable=no">
<body class="home">
<div class="container">
<header>
     <h1>SleepyTime</h1>
     <h2>Bedtime Calculator</h2>
</header>
<section id="information-card">
    <p>Waking up in the middle of a sleep cycle leaves you feeling tired and groggy, but waking up in between cycles lets you wake up feeling refreshed and alert!</p>
    <p>Sleepyti.me works by counting in 90 minute sleep cycles.</p>
    <button id="sleep-now">Sleep Now</button>
</section>
<section id="action-card">
    <p>It takes the average human fourteen minutes to fall asleep.</p>
    <p>If you head to bed right now, you should try to wake up at one of the following times:</p>
    <ul id="results">
        <li>3:11</li>
        <li>4:41</li>
        <li>6:11</li>
        <li class="good">7:41</li>
        <li class="good-er">9:11</li>
        <li class="good-est">10:41</li>
    </ul>
    <p>A good night's sleep consists of 5-6 complete sleep cycles.</p>
    <button id="back">Back</button>
</section>
</div>
</body>

CSS

body.sleeping #information-card,
body.home #action-card{
	display: none;
}

body {
    background-color: #333;
    color: #AAA;
    font-family: "Helvetica Neue", "HelveticaNeue", Helvetica;
    font-weight: 100;
    text-align: center;
}

.container {
    background-color: #444;
    max-width: 40em;
    margin: 2em auto 0;
    border-radius: 0.5em;
    padding: 1em 0.5em;
}

h1, h2 {
    font-weight: 100;
    margin: 0;
}
header {
    text-align: center;
}
header h2 {
    color: #888;
}
#results {
    list-style: none;
    padding: 0;
}
#results > li {
	display: inline-block;
	background: #222;
	border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	padding: 0.25em 0.5em;
	line-height: 1.25em;
	margin-top: 0.45em;
}
#results > li.good {
	background-color: #007034;
}
#results > li.good-er {
	background-color: #009947;
	color: #BBB;
}
#results > li.good-est {
	background-color: #00A824;
	color: #CCC;
}

JavaScript

var FOURTEEN_MIN = 1000 * 60 * 14,
	NINETY_MIN = 1000 * 60 * 90;

function formatTime (date) {
	var hours = date.getHours(),
		minutes = date.getMinutes();
	return hours + ":" + (minutes < 10 ? "0" + minutes : minutes);
}

function wakeupTimes (bedtime) {
	bedtime = +bedtime + FOURTEEN_MIN;
	return Array(6).map(
		function(_, i){
			return new Date(bedtime + NINETY_MIN * (i + 1));
		}
	);
}

function updateWakeupTimes(wakeupTimes) {
	var timeNodes = document.getElementById("results").children;
	for (var time in wakeupTimes) {
		timeNodes[time].textContent = formatTime(wakeupTimes[time]);
	}
}

document.getElementById("sleep-now").addEventListener("click", function(){
	updateWakeupTimes(wakeupTimes(new Date()));
	document.body.className = "sleeping";
}, false);

document.getElementById("back").addEventListener("click", function(){
	document.body.className = "home";
}, false);