SamEureka/app.css

## app.css
div {
  font-size: 10rem;
  text-align: center;
}

.pointing {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.box {
  position: relative;
  width: 310px;
  height: 310px;
  border: 14px solid #666;
  border-radius: 14px;
}

.btns {
  display: inline-block;
  width: 50%;
  float: left;
  margin: 0;
}

.grey {
  color: #666;
}

.red {
  color: #800000;
}

## app.js
// Global vars
var interval = null;
var range = 3;

// Sets a time key/value pair in session storage
function setTime(vTime) {
  sessionStorage.setItem('time', vTime);
}

// Retreives the time value from session storage
function getTime() {
  var time = sessionStorage.getItem('time');
  return time;
}

// Decrements the time value in session storage
function decTime() {
  var dt = getTime();
  dt--;
  setTime(dt)
}

// Sets time to 30 seconds and starts the interval
function startTimer() {
  noThumb();
  check();
}

var check = function(){
    getTime() == range ? interval = setInterval(timer, 1000): console.log('Fuck it!');
  };

// Checks if time value is 0, if 0 we are done, if not decrement time and display
function timer() {
  getTime() == 0 ? done() : decTime();
  displayTime();
}

// Resets the timer
function reset() {
  clearInterval(interval);
  setTime(range);
  noThumb();
  displayTime()
}

// Displays the time
function displayTime() {
  d3.select('#out').text(getTime());
}

// Displays giant thumb when you hit 0
function done() {
  clearInterval(interval);
  setTime(range);
  d3.select('#done').html('<i class="fa fa-thumbs-o-up"></i>');
}

function noThumb() {
  d3.select('#done').html('<i class="fa fa-ban red"></i>');
}

setTime(range);
displayTime();

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Session Storage - Timer Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
  <div class="box">
    <div class="grey btns pointing" onclick="startTimer()"><i class="fa fa-clock-o"></i></div>
    <div class="grey btns pointing" onclick="reset()"><i class="fa fa-refresh"></i></div>
    <div class="grey btns bold" id="out">5</div>
    <div class="grey btns" id="done"><i class="fa fa-ban red"></i></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
	div {
	font-size: 10rem;
	text-align: center;
	}

	.pointing {
	cursor: pointer;
	}

	.bold {
	font-weight: bold;
	}

	.box {
	position: relative;
	width: 310px;
	height: 310px;
	border: 14px solid #666;
	border-radius: 14px;
	}

	.btns {
	display: inline-block;
	width: 50%;
	float: left;
	margin: 0;
	}

	.grey {
	color: #666;
	}

	.red {
	color: #800000;
	}
	// Global vars
	var interval = null;
	var range = 3;

	// Sets a time key/value pair in session storage
	function setTime(vTime) {
	sessionStorage.setItem('time', vTime);
	}

	// Retreives the time value from session storage
	function getTime() {
	var time = sessionStorage.getItem('time');
	return time;
	}

	// Decrements the time value in session storage
	function decTime() {
	var dt = getTime();
	dt--;
	setTime(dt)
	}

	// Sets time to 30 seconds and starts the interval
	function startTimer() {
	noThumb();
	check();
	}

	var check = function(){
	getTime() == range ? interval = setInterval(timer, 1000): console.log('Fuck it!');
	};

	// Checks if time value is 0, if 0 we are done, if not decrement time and display
	function timer() {
	getTime() == 0 ? done() : decTime();
	displayTime();
	}

	// Resets the timer
	function reset() {
	clearInterval(interval);
	setTime(range);
	noThumb();
	displayTime()
	}

	// Displays the time
	function displayTime() {
	d3.select('#out').text(getTime());
	}

	// Displays giant thumb when you hit 0
	function done() {
	clearInterval(interval);
	setTime(range);
	d3.select('#done').html('<i class="fa fa-thumbs-o-up"></i>');
	}

	function noThumb() {
	d3.select('#done').html('<i class="fa fa-ban red"></i>');
	}

	setTime(range);
	displayTime();
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Session Storage - Timer Test</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="app.css">
	</head>
	<body>
	<div class="box">
	<div class="grey btns pointing" onclick="startTimer()"><i class="fa fa-clock-o"></i></div>
	<div class="grey btns pointing" onclick="reset()"><i class="fa fa-refresh"></i></div>
	<div class="grey btns bold" id="out">5</div>
	<div class="grey btns" id="done"><i class="fa fa-ban red"></i></div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>