SamEureka/app.css

## app.css
.jumbotron.vertical-center {
  margin-bottom: 0;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -webkit-align-items : center;
  -moz-box-align : center;
  -ms-flex-align : center;
  align-items : center;
  width: 100%;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
  -webkit-justify-content : center;
  justify-content : center;
}

## app.js
// Global variables
var interval = null,
    time = 65,
    onBreak = false;

// Starts the interval, calls timer function
var startTimer = function(){
    interval = setInterval(timer, 1000);
    buttonSwap('reset');
}

// Checks the onBreak variable, decrements time,
// sets break or resets, calls display function
var timer = function(){
  time === 0 ? reset() : time--;
  displayTime(time);
};

var reset = function(){
  clearInterval(interval);
  if (time === 0 && onBreak){
    buttonSwap('work');
  } else if (time === 0 && !onBreak){
    buttonSwap('break');
   } else if (!onBreak){
    buttonSwap('work')
  } else {
    buttonSwap('break');
  }
  displayTime(time);
};

// Converts total seconds into minutes and seconds in the desired display format
function formatTime(seconds){
    var min = Math.floor(seconds/60);
    var sec = Math.floor(seconds%60);
  min === 0 ? min = "" : min;
  sec < 10 ? sec = '0'+sec : sec;
  return min+':'+sec;
}

// Sends time to the DOM
function displayTime(time){
 $('#displayNow').html(formatTime(time));
}

// Swaps the button and click
function buttonSwap(type){
  switch (type) {
    case 'work':
      $('#btn').attr({'class': 'btn btn-md btn-primary btn-block', value: 'Work', onclick: 'startTimer()'});
      time = 65;
      onBreak = false;
      break;
    case 'break':
      $('#btn').attr({'class': 'btn btn-md btn-success btn-block', value: 'Break', onclick: 'startTimer()'});
      time = 10;
      onBreak = true;
      break;
    case 'reset':
      $('#btn').attr({'class': 'btn btn-md btn-danger btn-block', value: 'Reset', onclick:'reset()'});
      // Looking for a better way to do this...
      // $('#btn').addClass('btn-danger').removeClass('btn-primary','btn-success').attr({value: 'Reset', onclick:'resetTimer()'});
      break;
    default:
      console.log("I don't have a button for: "+type);
  }

}

// Sets everything up when the document is ready
$(document).ready(function(){
  displayTime(time);
});

## index.html
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Pomodoro JS</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
	<div class="jumbotron virtical-center">
  <div class="container center-block">
 		<div class="row">
    		<div class="col-md-2 col-md-offset-4">
  				<input class="btn btn-md btn-primary btn-block" id="btn" type="button" onclick="startTimer()" value="Work"></div>
  		</div>
  		<div class="row">
  			<div class="col-md-2 col-md-offset-4">
  				<h2 id="displayNow" class="text-center"></h2>
			</div>
		</div>
	</div>
  </div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
	.jumbotron.vertical-center {
	margin-bottom: 0;
	}

	.vertical-center {
	min-height: 100%;
	min-height: 100vh;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	-moz-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	width: 100%;
	-webkit-box-pack : center;
	-moz-box-pack : center;
	-ms-flex-pack : center;
	-webkit-justify-content : center;
	justify-content : center;
	}
	// Global variables
	var interval = null,
	time = 65,
	onBreak = false;

	// Starts the interval, calls timer function
	var startTimer = function(){
	interval = setInterval(timer, 1000);
	buttonSwap('reset');
	}

	// Checks the onBreak variable, decrements time,
	// sets break or resets, calls display function
	var timer = function(){
	time === 0 ? reset() : time--;
	displayTime(time);
	};

	var reset = function(){
	clearInterval(interval);
	if (time === 0 && onBreak){
	buttonSwap('work');
	} else if (time === 0 && !onBreak){
	buttonSwap('break');
	} else if (!onBreak){
	buttonSwap('work')
	} else {
	buttonSwap('break');
	}
	displayTime(time);
	};

	// Converts total seconds into minutes and seconds in the desired display format
	function formatTime(seconds){
	var min = Math.floor(seconds/60);
	var sec = Math.floor(seconds%60);
	min === 0 ? min = "" : min;
	sec < 10 ? sec = '0'+sec : sec;
	return min+':'+sec;
	}

	// Sends time to the DOM
	function displayTime(time){
	$('#displayNow').html(formatTime(time));
	}

	// Swaps the button and click
	function buttonSwap(type){
	switch (type) {
	case 'work':
	$('#btn').attr({'class': 'btn btn-md btn-primary btn-block', value: 'Work', onclick: 'startTimer()'});
	time = 65;
	onBreak = false;
	break;
	case 'break':
	$('#btn').attr({'class': 'btn btn-md btn-success btn-block', value: 'Break', onclick: 'startTimer()'});
	time = 10;
	onBreak = true;
	break;
	case 'reset':
	$('#btn').attr({'class': 'btn btn-md btn-danger btn-block', value: 'Reset', onclick:'reset()'});
	// Looking for a better way to do this...
	// $('#btn').addClass('btn-danger').removeClass('btn-primary','btn-success').attr({value: 'Reset', onclick:'resetTimer()'});
	break;
	default:
	console.log("I don't have a button for: "+type);
	}

	}

	// Sets everything up when the document is ready
	$(document).ready(function(){
	displayTime(time);
	});
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Pomodoro JS</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="app.css">
	</head>
	<body>
	<div class="jumbotron virtical-center">
	<div class="container center-block">
	<div class="row">
	<div class="col-md-2 col-md-offset-4">
	<input class="btn btn-md btn-primary btn-block" id="btn" type="button" onclick="startTimer()" value="Work"></div>
	</div>
	<div class="row">
	<div class="col-md-2 col-md-offset-4">
	<h2 id="displayNow" class="text-center"></h2>
	</div>
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>