Break/Lunch Timer

In this example below you will see how to do a Break/Lunch Timer with some HTML / CSS and Javascript

I made this for my job which is strictly is scheduled.

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Break/Lunch Timer</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid background">

  <div class="topPusher"></div>

  <div class="row buttons">
    <div class="col-xs-12">
      <button class="btn btn-warning" id="start">Start</button>
      <button class="btn btn-primary" id="break">Break</button>
      <button class="btn btn-primary" id="lunch">Lunch</button>
      <button class="btn btn-primary" id="training">Training</button>
      <button class="btn btn-danger" id="stop">Stop</button >  
    </div>  
  </div>  
  
  <div class="topPusher"></div>
  
  <div class="row settings">
   <div class="col-xs-12">
         <div class="clock" id="clock"><h1 class="text-center"> 00:00</h1></div>
    </div>  
  </div>  
  
  <div class="topPusher"></div>
  
  <div class="row timer" id="timer">
    <div class="col-xs-12">
      <div class="top"></div>
    
    <div class="topBubble">
      <div class="drainer" id="drainer"></div>
      <div class="topSand" id="topSand"></div>
    </div>
    
     <div class="connector" id ="connector"> </div>
    
     <div class="bottomBubble">
       <div class="filler" id="filler"></div>
       <div class="bottomSand" id="bottomSand"></div>
      
     </div>
    <div class="bottom"></div>
    </div>  
  </div>  


</div>  

 <div class="text-center footer"> Coded by Conor Hinchee </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/breaklunch-timer-qNJmqR */
.background {
  background-color: #D99A6C;
  min-height: 800px;
}

.buttons {
  text-align: center;
}

.btn {
  border: solid;
}

.settings {
  background-color: white;
  height: 60px;
  width: 200px;
  border-radius: 20px;
  margin: 0 auto;
}

.topPusher {
  padding-bottom: 45px;
}

.footer {
  background-color: #56887D;
  margin: 0 auto;
}

.timer {
  height: 500px;
  background: #D99A6C;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin: 0 auto;
  padding-top: 2%;
  text-align: center;
}

.top {
  width: 240px;
  height: 65px;
  background: #87421F;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  border: #87421F solid;
  box-shadow: 1px 0 0 black, 0 -10px 0 black;
  margin: 25px auto;
}

.bottom {
  width: 240px;
  height: 65px;
  background: #87421F;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  border-style: solid;
  box-shadow: 0 10px 0 black;
  margin: 37px auto;
}

.topBubble {
  width: 186px;
  height: 157px;
  background-color: white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 97px;
  border-bottom-right-radius: 97px;
  margin: -70px auto;
  box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, .2), 0 0 2px 2px rgba(255, 255, 255, .03);
  position: relative;
}

.bottomBubble {
  width: 186px;
  height: 157px;
  background-color: white;
  border-top-left-radius: 97px;
  border-top-right-radius: 97px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left: 3px solid #BCEAFF;
  border-right: 1px solid #BCEAFF;
  margin: -80px auto;
  position: relative;
}

.connector {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50px;
  margin: 65px auto;
  box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, .2), 0 0 2px 2px rgba(255, 255, 255, .03);
}

.topSand {
  background-color: grey;
  background-image: url('http://oi67.tinypic.com/4k9ute.jpg');
  background-size: 100px;
  background-repeat: repeat;
  image-rendering: pixelated;
  height: 98%;
  width: 99%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  margin: 0 auto;
}

.bottomSand {
  background-color: grey;
  background-image: url('http://oi67.tinypic.com/4k9ute.jpg');
  background-size: 100px;
  background-repeat: repeat;
  image-rendering: pixelated;
  height: 99%;
  width: 99%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.rotated {
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(180deg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -o-transform: rotate(180deg);
  /* Opera 10.50-12.00 */
  transform: rotate(180deg);
  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

.filler {
  margin: 0 auto;
  width: 10px;
  height: 0;
  background-size: 100px;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.drainer {
  width: 186px;
  height: 0;
}

.connector {
  background-repeat: repeat;
  image-rendering: pixelated;
  background-size: 100px;
}

.clock {
  display: block;
  text-align: center;
}

/*Downloaded from https://www.codeseek.co/captnstarburst/breaklunch-timer-qNJmqR */
$(document).ready(function() {

  $("#topSand").hide();
  var currentTimeInterval;
  var countdownInterval;
  var count = 0;
  var running = "initial";
  var direction = "down";
  var initialStart;
  var endTraining;
  var moveSandCount = 0;

  $("#break").on("click", function() {
    if (running === "initial") {
      running = "set";
      changeText("15:00", "h1");
    }
  });
  $("#lunch").on("click", function() {
    if (running === "initial") {
      running = "set";
      changeText("30:00", "h1");
    }
  });

  $("#training").on("click", function() {
    if (running === "initial") {
      running = "training";
      alert("training started at " + getCurrentTime());
      var arr = [5];
      startDrain();
      currentTimeInterval = setInterval(function() {
        changeText(getCurrentTime(), "h2");
        count++;
        if (interval(count, arr)) {
          moveSandCount++;
          moveSand(moveSandCount);
          if (moveSandCount === 157) {
            startScreen();
            $("#timer").toggleClass('rotated');
            count = 0;
            moveSandCount = 0;
            $("#timer").toggleClass('rotated');
            startDrain();
          }
        }
      }, 1000);
    }

  });
  $("#start").on("click", function() {
    if (running === "set") {
      running = "running";
      initialStart = getText();
      startDrain();
      countdownInterval = setInterval(function() {
        var arr = getText();
        count++;
        if (arr[0] === "00" && arr[1] === "00") {
          direction = "up";
          startScreen();

        }
        if (direction !== "up") {
          countDown();
          if (interval(count, initialStart)) {
            moveSandCount++;
            moveSand(moveSandCount);
          }
        } else {
          countUp();
        }
      }, 1000);
    }
  });

  $("#stop").on("click", function() {
    if (running === "training") {
      clearInterval(currentTimeInterval);
      alert("training ended at " + $("#clock").text());
      changeText("00:00", "h1");
      running = "initial";
      startScreen();
      count = 0;
      moveSandCount = 0;
    } else if (running === "running") {
      clearInterval(countdownInterval);
      running = "initial";
      count = 0;
    }
  });

});

function changeText(text, type) {
  var h1str = "<h1 class='text-center'>";
  var h1strEnd = "</h1>";

  var h2str = "<h2 class='text-center'>";
  var h2strEnd = "</h2>";
  var rtnStr;

  if (type !== "h1") {
    rtnStr = h2str + text + h2strEnd;
  } else {
    rtnStr = h1str + text + h1strEnd;
  }
  $("#clock").html(rtnStr);
}

function countUp() {

  var arr = getText();
  var int;
  var toStr;
  var rtnStr;
  arr[0] = arr[0].replace("+", "");
  if (arr[1] !== "59") {
    int = parseInt(arr[1]) + 1;
    toStr = int.toString();
    if (toStr.length === 1) {
      toStr = "0" + toStr;
    }
    rtnStr = "+" + arr[0] + ":" + toStr;
  } else {
    int = parseInt(arr[0]) + 1;
    toStr = int.toString();

    if (toStr.length === 1) {
      toStr = "0" + toStr;
    }
    rtnStr = "+" + toStr + ":" + "00";
  }

  changeText(rtnStr);

}

function countDown() {

  var arr = getText();
  var int;
  var toStr;
  var rtnStr;
  if (arr[1] !== "00") {
    int = parseInt(arr[1]) - 1;
    toStr = int.toString();
    if (toStr.length === 1) {
      toStr = "0" + toStr;
    }
    rtnStr = arr[0] + ":" + toStr;
  } else {
    int = parseInt(arr[0]) - 1;
    toStr = int.toString();
    if (toStr.length === 1) {
      toStr = "0" + toStr;
    }

    rtnStr = toStr + ":59";
  }

  changeText(rtnStr, "h1");
}

function getText() {
  var str = $("#clock").text();
  var arr = str.split(":");
  return arr;

}

function moveSand(height) {

  var drain = height.toString() + "px";
  var fillInt = 157 - height;
  var fill = fillInt.toString() + "px";
  console.log(height);

  $("#drainer").css("height", drain);
  $("#bottomSand").css("height", drain);
  $("#filler").css("height", fill);
  $("#topSand").css("height", fill);
  $("#bottomSand").show();

  if (height === 80) {
    $("#topSand").css("width", "90%");
  }
  if (height === 90) {
    $("#topSand").css("width", "80%");
  }
  if (height === 100) {
    $("#topSand").css("width", "70%");
  }

  if (height === 120) {
    $("#topSand").css("width", "60%");
  }
  if (height === 130) {
    $("#topSand").css("width", "50%");
  }

  if (height === 140) {
    $("#topSand").css("width", "30%");
  }

}

function interval(count, initialTime) {
  var seconds = parseInt(initialTime[0]) * 60;
  var pps = 157 / seconds;
  var movement = Math.ceil(1 / pps);

  if (count % movement === 0) {
    return true;
  } else {
    return false;
  }

}

function getCurrentTime() {
  var t = new Date();
  return t.toLocaleTimeString();
}

function startScreen() {
  $("#drainer").css("height", "0px");
  $("#bottomSand").css("height", "99%");
  $("#filler").css("height", "0px");
  $("#topSand").css("height", "99%");
  $("#topSand").hide();
}

function startDrain() {
  $("#topSand").show();
  $("#bottomSand").css("height", "0%");
  $("#topSand").css("width", "99%");
  $("#connector").css("background-image", "url('http://oi67.tinypic.com/4k9ute.jpg')");
  $("#filler").css("background-image", "url('http://oi67.tinypic.com/4k9ute.jpg')");
}

Comments