World Clock and timer

index.html

<h1>Current Time</h1>
<h2 id="clock"></h2>

<div id="PomodoroTimer">
  
  <div><h2>Pomodoro Clock</h2></div>
  <div><h4 id="timerDisplay"></h4></div>
  
  <div><button id="addTime">+</button></div>
  <div><button id="pause">Start</button></div>
  <div><button id="subTime">-</button></div>
  
</div>

script.js

// define the timer object with functions to be called
var timer = {
  defaultMinutes : 25,
  defaultSeconds : 0,
  defaultTenthSeconds : 0,
  pause : false,
  
  add : function () {
    timer.defaultMinutes = timer.defaultMinutes + 1;
    document.getElementById("timerDisplay").innerHTML = 
      timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;
    
  },
  
  sub : function () {
    timer.defaultMinutes = timer.defaultMinutes - 1;
    document.getElementById("timerDisplay").innerHTML = 
      timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;
  }
}

function setClock() {
  // get & set the data for current time
  var d = new Date ();
  var hours = d.getHours();
  var minutes = d.getMinutes();
  var seconds = d.getSeconds();
  document.getElementById("clock").innerHTML = hours + " : " + minutes + " : " + seconds;
 
  if (timer.pause) {
    if (timer.defaultMinutes === 0 && timer.defaultSeconds === 0 && timer.defaultTenthSeconds === 0) {
      document.getElementById("timerDisplay").innerHTML = "COMPLETE";
    } else {

      if (timer.defaultSeconds === 0 && timer.defaultTenthSeconds === 0) {
        timer.defaultSeconds = 6;
        timer.defaultMinutes = timer.defaultMinutes - 1;
        document.getElementById("timerDisplay").innerHTML = 
          timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;
      } 

      if (timer.defaultTenthSeconds === 0) {
        timer.defaultTenthSeconds = 10;

        document.getElementById("timerDisplay").innerHTML = 
          timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;

        timer.defaultSeconds = timer.defaultSeconds - 1;
      }

      if (timer.defaultTenthSeconds !== 0) {
        timer.defaultTenthSeconds -= 1;
        document.getElementById("timerDisplay").innerHTML = 
          timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;
      }
    }
  }
}

// increase timeout once button click
document.getElementById("addTime").onclick = timer.add;

// decrease timeout once button is clicked
document.getElementById("subTime").onclick = timer.sub;

// when pause button is clicked, change the pause value to true or false
document.getElementById("pause").onclick = function () {
  if (timer.pause === true) {
    timer.pause = false;
    document.getElementById("pause").innerHTML = "Start";
    document.getElementById("PomodoroTimer").style.animationPlayState = "paused";
  } else if (timer.pause === false) {
    timer.pause = true;
    document.getElementById("pause").innerHTML = "Pause";
    if (document.getElementById("PomodoroTimer").className != "animation") {
      document.getElementById("PomodoroTimer").className += "animation";}
    document.getElementById("PomodoroTimer").style.animationPlayState = "running";
  }
}

window.onload = function () {
  document.getElementById("timerDisplay").innerHTML = 
    timer.defaultMinutes + " : " + timer.defaultSeconds + timer.defaultTenthSeconds;
  window.setInterval(setClock, 1000);
  
}

style.css

@keyframes slowDown {
  0% {
    background-color: blue;
  }
  
  100% {
    background-color: red;
  }
}

.animation {
  animation: slowDown 2s infinite;
  animation-direction: alternate;
}

body {
  background: blue;
}

world-clock-and-timer.markdown

World Clock and timer

A Pen by John on CodePen.

License.