Workout Timer

index.html

<div  id="showcase">
  <div class="container">
           <h1>Workout Timer</h1>
             <div id="hours">00</div>
            <small>hrs</small>
            <div class="colon">:</div>
            <div id="minutes">00</div>
            <small>min</small>
            <div class="colon">:</div>
            <div id="seconds">00</div>
            <small>sec</small></div>
    <div class="buttons">
      <div class="container">
        <button id='start' ><img src="https://www.freeiconspng.com/uploads/pause-button-png-22.png"></button>
        <button id='pause' ><img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/512/Pause_button_play_stop_blue.png"></button>
        <button id='stop'><img src="https://cdn4.iconfinder.com/data/icons/flat-design-multimedia-set-2/24/btn-blue-play-stop-512.png"></button>
        <button id='reset'><img src="https://cdn2.iconfinder.com/data/icons/flat-arrows-2/100/arrow-22-512.png"</button>
</div>
      </div>


  

script.js

let start = document.getElementById("start");
let pause = document.getElementById("pause");
let stop = document.getElementById("stop");
let reset = document.getElementById("reset");


let hoursDisplay = document.getElementById("hours");
let minutesDisplay = document.getElementById("minutes");
let secondsDisplay = document.getElementById("seconds");

let counter,timer,divide,minutesLeft;
let isPaused,isStarted;
// onOff = "on";
isStarted = false;
counter=0;
divide = 100;

// window.onload = timerStart();

function startTimer(){
if (isStarted === false) {
 timer = setInterval(displayTimer,(1000/divide))
 isPaused = true;
 isStarted = true;
 }
 if (isPaused === false) {
    timer = setInterval(displayTimer,(1000/divide))
    isPaused = true;
 }
}

function pauseTimer(){
 if (isPaused === true) { 
    clearInterval(timer);
    isPaused = false;
   }
}

function stopTimer(){
  if (isStarted === true) {
    clearInterval(timer);
    timer = null;
    counter = 0;
    isStarted = false;
    pause.removeEventListener("click",pauseTimer);
    stop.removeEventListener("click", stopTimer);
  }
}
function resetTimer(){
  if(isStarted === false){
  hoursDisplay.innerHTML = '00';
  minutesDisplay.innerHTML = '00';
  secondsDisplay.innerHTML = '00';
  }
}

function displayTimer(){
    counter++;
    result=(counter/divide);
    let seconds = sec(result);
    let minutes = min(result,seconds);
    minutesLeft = minutes%60;
    let hours = hrs(minutes,minutesLeft);    
}
function sec(result){
    let seconds = Math.floor(result % 60) ;
    if (seconds < 10) {
        secondsDisplay.innerHTML = `0${seconds}`;
    } else {
        secondsDisplay.innerHTML = seconds;
    }
 return seconds;
}
function min(result,seconds){
    let minutes = Math.floor((result-seconds)/60);
    if (minutes < 10) {
        minutesDisplay.innerHTML = `0${minutes}`;
    } 
    else if( minutes < 60) {
        minutesDisplay.innerHTML = minutes;
    }
    else {
        if (minutesLeft < 10) {
            minutesDisplay.innerHTML = `0${minutesLeft}`;
        } else {
            minutesDisplay.innerHTML = minutesLeft; ;
        }
       
    }
    return minutes;
}
function hrs(minutes,minutesLeft){
    let hours =Math.floor((minutes-minutesLeft)/60);
    if (Number(hours) === 24) {
        clearInterval(timer);
    }
    if (hours < 10) {
        hoursDisplay.innerHTML = `0${hours}`;
    } else {
        hoursDisplay.innerHTML = hours;
    }
    return hours;
}
start.addEventListener("click",startTimer);
pause.addEventListener("click", pauseTimer);
stop.addEventListener("click", stopTimer);
reset.addEventListener("click", resetTimer);

style.css

@import url(https://fonts.googleapis.com/css?family=Orbitron);
body {
    font-family: 'Courier New', Courier, monospace;
   background-color: black;
    padding: 0px;
  /* background:url('https://i.pinimg.com/originals/ee/27/79/ee2779330766f8e9dd00ed038538a639.jpg') repeat 0 0px;*/
}
.displayFrame{
  width: 80%;
  height: 300px;
  margin: 0 auto;
  box-shadow: 0px 0px 2px 3px rgba(0,0,0, 0.2);
}
small{
    font-size: initial;
}
small.m{
    display: inline-block;
    margin-left: 4px;
}
#hours, #minutes, #seconds {
    display: inline-block;
    width: 100px;
    text-align: center;
    font-size: 3.5em;
    font-weight: bold;
    line-height: 100px;
    border-radius: 10px;
    border: 5px ridge gray;
    color: lime;
    font-family: 'Orbitron', sans-serif;
}
.hide {
    display: inline-block;
    visibility: hidden;
    color: white;
    height: 50px;
    font-size: 50px;
}
.colon {
    display: inline-block;
    height: 50px;
    font-size: 50px;
    color: lime;
    font-family: 'Orbitron', sans-serif;
}
#start, #unknown1 {
    padding: 1px;
    margin-left: 0px;
    border-radius: 5px;
    background-color: rgba(175, 243, 144, 0.4);
    cursor: pointer;
}
#pause, #unknown1 {
    padding: 1px;
    margin-left: 0px;
    border-radius: 5px;
    background-color: rgba(175, 243, 144, 0.4);
    cursor: pointer;
}
#resume, #stop, #unknown2, #reset {
    padding: 1px;
    border-radius: 5px;
    background-color: rgba(175, 243, 144, 0.4);
    cursor: pointer;
}
#resume, #unknown2{
    margin-right: 0px; 
}
#start:hover,#resume:hover, #pause:hover, #stop:hover, #unknown1:hover, #unknown2:hover, #reset:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(150, 248, 125); 
}
#start:active,#resume:active, #pause:active, #stop:active, #unknown1:active, #unknown2:active, #reset:active {
    color: rgb(255, 255, 255);
    background-color: rgba(5, 105, 5, 0.4); 
}
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}
.header{
  background:#35424a;
  color:#fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom:#2196F3 3px solid;
}
.header #branding h1{
  margin:0;
}

/*Showcase*/
#showcase{
  text-align: center;
  color:#2196f3;
}
#showcase h1{
  margin-top:50px;
  font-size: 55px;
  margin-bottom: 10px;
}


/* search*/
#search{
  padding:15px;
  color:#fff;
  background: #35424a;
  border-top:#2196F3 3px solid;
  margin-top:40px;
  margin-bottom:0px;
}
#search h1{
  float:left;
}

.buttons{
  padding: 20px 0px 0px 20px;
  margin: 0 auto;
  align: center;
}
.buttons img{
width:50px;
  height: 50px;
}
/*@media screen and (max-width: 400px) {
  #hours, #minutes, #seconds {
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size:15px;
    font-weight: bold;
    line-height: 30px;
    border-radius: 4px;
    border: 2px ridge gray;
    color: lime;
    font-family: 'Orbitron', sans-serif;
    float: left;
}
.buttons{
  padding: 10px 0px 0px 70px;
  margin: 5px auto;
  align: center;
  display: inline-block;
  float: left;
}
  
.buttons img{
width:20px;
  height: 20px;
}
.colon {
    height: 20px;
    font-size: 20px;
}
#showcase h1{
  margin-top:20px;
  font-size: 30px;
  margin-bottom: 50px;
}
 .displayFrame{
  width: 80%;
  margin: 50px auto;
}
  small{
    font-size: 0.5em;
}
}*/

workout-timer.markdown

Workout Timer

A Pen by Akinyele Oluwatosin Akintayo on CodePen.

License.