Pomodoro Clock

What is a pomodoro clock How do you make a pomodoro clock? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an pomodoro clock?
  1. Pomodoro Clock Previews
  2. Pomodoro Clock HTML Codes
  3. Pomodoro Clock CSS Codes
  4. Pomodoro Clock JS Codes
Pomodoro Clock Previews

Pomodoro Clock HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pomodoro Clock</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Abel|Lato|Orbitron|Droid+Sans+Mono|'>

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

  
</head>

<body>
  <div id="container">
  <div id="top-bar">
    <div id="session">
      <span class="timer-text" id="sess">SESSION</span>
      <span class="timer-incrementor" id="sessAdd" onclick="addTime('session-time')">+</span>
      <span class="timer" id="session-time">15</span>
      <span class="timer-incrementor" id="sessSub" onclick="subtractTime('session-time')">-</span>
    </div>
    <div id="break">
      <span class="timer-incrementor" id="breakAdd" onclick="addTime('break-time')">+</span>
      <span class="timer" id="break-time">2</span>
      <span class="timer-incrementor" id="breakSub" onclick="subtractTime('break-time')">-</span>
      <span class="timer-text" id="bre">BREAK</span>
    </div>
  </div>
  <div id="body1" onclick="timerSwitch()">
    <div id="clock">
      <span id="hours"></span><span id="minutes">mm</span><span id="seconds"></span>
    </div>
    <div class="instruc">click on the screen to start or stop the timer</div>
    <div id="color-back"></div>
   </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

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

</body>
</html>

Pomodoro Clock CSS Codes

#container {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  background-color: #666;
}
#top-bar {
  width: 100%;
  height: 50px;
  min-width: 640px;
  background-color: #333;
}
#session {
  float: left;
}
#break {
  float: right;
}
.timer-text {
  font-size: 36px;
  padding: 1px 24px;
  font-family: 'Abel', sans-serif;
  float: left;
}
#sess {
  color: #3AB22B;
}
#bre {
  color: #CC5C14;
}
.timer-incrementor {
  color: #fff;
  font-size: 40px;
  padding: 0px 12px;
  font-family: 'Abel', sans-serif;
  float: left;
  margin-top: 0px;
}
.timer-incrementor:hover {
  cursor: pointer;
}
#body1 {
  display: block;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.timer {
  display: block;
  color: #fff;
  font-size: 42px;
  padding: 0px 8px;
  font-family: 'Abel', sans-serif;
  float: left;
  margin-top: -4px;
}
#clock {
  display:inline-block;
  width: 100%;
  font-family: 'Droid Sans Mono', monospace;
  Text-align: center;
  color: #fff;
  font-size: 160px;
  position: relative;
  z-index: 999;
  margin-top: 4%;
  letter-spacing: -.1em;
}
.instruc {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  margin: 0 0 6px 60px;
  opacity: .25;
  color: #fff;
  font-size: 40px;
  font-family: 'Abel', sans-serif;
  font-weight: 700;
  z-index: 999;
}
#color-back {
  position: absolute;
  left: 0;
  height: 96%;
  width: 100%;
  background-color: #3AB22B;
  z-index: 1;
  top: 50px;
}

Pomodoro Clock JS Codes

var currentTimer = "sess";
var hrs = 0;
var mins = 0;
var secs = 0;
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var running = false;
var counter;
var heightCounter;
var totalSecs;
var decreasePercent;
var bgHeight = 100;
var audio = new Audio('https://www.acoustica.com/sounds/user_requests/alarm1.wav');
var count = 0;

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        timerSwitch();
    }
}

function setTimer(time) {
  console.log("time is", time);
  if(time >= 60) {
    hrs = Math.floor(time/60);
    mins = time % 60;
    hours.innerHTML = hrs + ":";
  } else {
    mins = time;
  }
  secs = 0;
  minutes.innerHTML = ("0" + mins).slice(-2);
  seconds.innerHTML = "";
  console.log("set hours:", hrs);
  console.log("set mins:", mins);
  console.log("set secs:", secs);
}

function addTime(elem) {
  if(running === false) {
    var time = document.getElementById(elem).innerHTML;
    time++;
    document.getElementById(elem).innerHTML = time;
    if(elem === 'session-time') {
      setTimer(time); 
    }
  }
}

function subtractTime(elem) {
  var time = document.getElementById(elem).innerHTML;
  if(time > 1) {
    if(running === false) {
      time--;
      document.getElementById(elem).innerHTML = time;
      if(elem === 'session-time') {
        setTimer(time); 
      }
    }
  }
}

function setBackground() {
  totalMiliSecs = mins*60;
  decreasePercent = ((1/totalMiliSecs)*100)/4;
  bgHeight = 100;
  console.log("decease:", decreasePercent);
  if(currentTimer === "sess") {
    document.getElementById('body1').style.backgroundColor = '#CC5C14';
    document.getElementById('color-back').style.backgroundColor = '#3AB22B';
  } else {
    document.getElementById('body1').style.backgroundColor = '#3AB22B';
    document.getElementById('color-back').style.backgroundColor = '#CC5C14'; 
  }
}

function countDown() {
  console.log(hrs);
  console.log(mins);
  console.log(secs);
  console.log("paercent", bgHeight);
  if(hrs <= 0 && mins <= 0 && secs <= 0) {
    audio.play();
    if(currentTimer === "sess") {
      setTimer(document.getElementById("break-time").innerHTML);
      currentTimer = "break";
      console.log("mins is:", mins);
    } else {
      setTimer(document.getElementById("session-time").innerHTML);
      currentTimer = "sess";
      console.log("mins is:", mins);
    }
    setBackground();
  }
  running = true;
  if(secs === 0) {
    mins--;
    secs = 60;
  }
  if(hrs > 0) {
    if(mins === 0){
      hrs--;
      mins = 60;
    } 
    hours.innerHTML = hrs + ":";
    minutes.innerHTML = ("0" + mins).slice(-2) + ":";
  } else {
    minutes.innerHTML = mins + ":";
  }
  seconds.innerHTML = ("0" + secs).slice(-2);
  bgHeight -= decreasePercent;
  document.getElementById('color-back').style.height = bgHeight + "%";
  if(count >= 4) {
    secs--;
    count = 0;
  }
  count++;
  console.log(count);
  counter = setTimeout('countDown()', 250);
}

function timerSwitch() {
  if(running === false) {
    running = true;
    console.log("run");
    setBackground();
    countDown();
  } else {
    clearInterval(counter);
    console.log("stop");
    running = false;
  }
}
  
setTimer(document.getElementById("session-time").innerHTML);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.