<!DOCTYPE html>
<html>
<style>
body
{
color: #DAD6D6;
font-size: 40pt;
background: #171A21;
text-align: center;
}
#start
{
width: 90%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #35492C;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
#run_in_up
{
width: 10%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #3E383F;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
#run_in_down
{
width: 10%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #3E383F;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
#clear
{
width: 50%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #3E383F;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
#font_up
{
width: 10%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #3E383F;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
#font_down
{
width: 10%;
margin: 5px auto;
text-align: center;
font-size: 40pt;
color: #DAD6D6;
background: #564E58;
border:solid 8px #3E383F;
border-radius:5px;
padding:5px 40px 5px;
letter-spacing: 2px;
cursor:pointer;
}
table{
padding: 40px;
background: #564E58;
margin:5px auto;
border:solid 8px #3E383F;
border-radius: 5px;
width: 90%;
text-align: center;
align-content: center;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<button id="start">00:00:00:0</button>
<br>
<button id="run_in_up">+</button>
<button id="run_in_down">-</button>
<button id="clear">RESET</button>
<button id="font_up">+</button>
<button id="font_down">-</button>
<table id="sessionData">
<tr>
<td>
Set
</td>
<td>
Rep
</td>
<td>
Interval
</td>
</tr>
</table>
<script language="JavaScript">
var start = document.getElementById('start'),
clear = document.getElementById('clear'),
runin_up = document.getElementById('run_in_up'),
runin_down = document.getElementById('run_in_down'),
fontsize_up = document.getElementById('font_up'),
fontsize_down = document.getElementById('font_down'),
currentfont_size = 40,
clockheight = window.innerHeight,
running = false,
runningDown = false,
stayGrey = false,
timeData = "00:00:00:0",
set_number = 1,
rep_number = 1,
tenths = 0, seconds = 0, minutes = 0, hours = 0,
t;
start.style.height = (clockheight * 7.5)/10+"px";
clear.style.height = (clockheight * 2)/10+"px";
function add() {
tenths++;
if (tenths >= 10){
tenths = 0;
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
}
timeData = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":"
+ (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":"
+ (seconds > 9 ? seconds : "0" + seconds) + ":" + (tenths);
start.textContent = timeData;
}
function downcount() {
tenths--;
if (tenths < 0){
tenths = 9;
seconds--;
if (seconds < 0) {
seconds = 59;
minutes--;
if (minutes < 0) {
minutes = 59;
hours--;
}
}
}
timeData = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":"
+ (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":"
+ (seconds > 9 ? seconds : "0" + seconds) + ":" + (tenths);
start.textContent = timeData;
if (tenths == 0 && seconds == 0 && minutes == 0 && hours == 0){
clearInterval(t);
running = false;
timer();
}
}
function timer() {
if (running == false){
running = true;
runningDown = false;
stayGrey = false;
start.style.backgroundColor = "#48633B";
t = setInterval(add, 100);
}
else{
if(runningDown == false){
runningDown = true;
addTableData();
clearInterval(t);
if (stayGrey == false){
start.style.backgroundColor = "#721329";
}
t = setInterval(downcount, 100);
}
}
}
function addTableData() {
if (timeData != '00:00:00:0'){
var table = document.getElementById("sessionData");
//create new row
var row = table.insertRow(-1);
//create new cells in row
var new_set = row.insertCell(0);
var new_rep = row.insertCell(1);
var new_interval = row.insertCell(2);
//populate cells
new_set.innerHTML = set_number;
new_rep.innerHTML = rep_number;
new_interval.innerHTML = timeData;
rep_number++;
}
}
/*run-in up button*/
runin_up.onclick = increaseRunIn;
function increaseRunIn(){
if(seconds < 59){
seconds++;
running = true;
stayGrey = true;
start.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":"
+ (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":"
+ (seconds > 9 ? seconds : "0" + seconds) + ":" + (tenths);
}
}
/*run-in down button*/
runin_down.onclick = decreaseRunIn;
function decreaseRunIn(){
if(seconds > 0){
seconds--;
if (seconds == 0) {
running = false;
stayGray = false;
}
start.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":"
+ (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":"
+ (seconds > 9 ? seconds : "0" + seconds) + ":" + (tenths);
}
}
/*font-size up button*/
fontsize_up.onclick = sizeUp;
function sizeUp(){
currentfont_size++;
start.style.fontSize = currentfont_size + "pt";
}
/*font-size down button*/
fontsize_down.onclick = sizeDown;
function sizeDown(){
currentfont_size--;
start.style.fontSize = currentfont_size + "pt";
}
/* Start button */
start.onclick = timer;
/* Clear button */
clear.onclick = function() {
clearInterval(t);
//zero the clock, clear running booleans and zero the time variables
start.textContent = "00:00:00:0";
start.style.backgroundColor = "#564E58";
running = false;
runningDown = false;
tenths = 0;
seconds = 0;
minutes = 0;
hours = 0;
timeData = '00:00:00:0';
//increase set number and reset rep number
rep_number = 1;
set_number++;
}
</script>
</body>
</html>