<header>
  <h1>Timer</h1>
</header>

<section>
  <div>
    <div id="clock">
      <form>
        <input id="min" type="number" step="1" min="0" max="59" value="25"></input>
        <span>:</span>
        <input id="sec" type="number" step="1" min="0" max="59" value="00"></input>
      </form>
      <div id="controls">
        <button id="start">START</button>
        <button id="reset">RESET</button>
      </div>
    </div>
  </div>
</section>

<footer>
  <p>Built by <a href="https://remybeumier.be">Rémy Beumier</a></p>
</footer>

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  background: #5E7ECC;
  background-image: linear-gradient(to top left, #3498db, #9b59b6);
  text-align: center;
  color: whitesmoke;
  letter-spacing: .1em;
}

header {
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  header {
    font-size: 24px;
  }
}

section {
}

#clock {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, .4);
  margin: auto;
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  #clock {
    flex-direction: row;
    padding: 40px;
  }
}

#clock form {
  margin-bottom: 20px;
  display: flex;
}
@media only screen and (min-width: 768px) {
  #clock form {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

#clock input {
  display: inline-block;
  padding-left: 10px;
  width: 70px;
  text-align: right;
  font-size: 42px;
  background: transparent;
  color: whitesmoke;
  font-weight: bold;
  border: none;
  transition: background .8s ease;
}
@media only screen and (min-width: 768px) {
  #clock input {
    font-size: 84px;
    width: 120px;
  }
}
#clock input:focus:not([disabled]), 
#clock input:hover:not([disabled]) {
  background: rgba(0, 0, 0, .2);
}
#clock form span {
  font-size: 42px;
}
@media only screen and (min-width: 768px) {
  #clock form span {
    font-size: 84px;
  }
}

#controls {
  display: flex;
}
@media only screen and (min-width: 768px) {
  #controls {
    flex-direction: column;
    margin-left: 20px;
    font-size: 20px;
  }
}

#controls button {
  -webkit-appearance: button;
  font-size: inherit;
  color: white;
  background: transparent;
  border: solid 2px white;
  padding: 10px;
  width: 100px;
  transition: background .4s ease, color .4s ease;
  border-radius: 2px;
  margin: 0 5px;
}
@media only screen and (min-width: 768px) {
  #controls button {
    margin: 10px 0;
  }
}
#controls button:hover,
#controls button:focus {
  cursor: pointer;
  background: white;
  color: black;
}

footer {
  font-size: 14px;
  padding: 5px;
}

a {
  color: lightgray;
  text-decoration: none;
}
a:hover,
a:focus {
  color: whitesmoke;
  text-decoration: underline;
}

// add quick timer: 1min 5min etc.
// add status bar

var time = document.getElementById("time");
var minute = document.getElementById("min");
var second = document.getElementById("sec");
var startButton = document.getElementById("start");
var resetButton = document.getElementById("reset");
var seti = undefined;
var mm = "25";
var ss = "00";

startButton.addEventListener("click", function start () {
  if (startButton.innerHTML === "START") {
    startButton.innerHTML = "PAUSE";
    mm = minute.value;
    ss = second.value;
    if (minute.value === "") minute.value = "00";
    if (second.value === "") second.value = "00";
    minute.setAttribute("disabled", true);
    second.setAttribute("disabled", true);
    seti = setInterval(function () {
      if (second.value > 0) {
        second.value -= 1;
        if (second.value < 10 && second.value >= 0) {
          second.value = "0" + second.value;
        }
      }
      else if (minute.value > 0) {
        second.value = "59";
        minute.value -= 1;
        if (minute.value < 10 && minute.value >= 0) {
          minute.value = "0" + minute.value;
        }
      }
      else {
        clearInterval(seti);
        document.body.style.backgroundImage = "linear-gradient(to top left, #c0392b, #e74c3c , #9b59b6)";
        setTimeout(function() {
          alert("Time Out !");
          res();
        }, 100);
      }
    }, 1000);
  }
  else {
    minute.removeAttribute("disabled");
    second.removeAttribute("disabled");
    startButton.innerHTML = "START";
    clearInterval(seti);
  }
});

resetButton.addEventListener("click", res);

function res() {
  clearInterval(seti);
  minute.value = mm;
  second.value = ss;
  minute.removeAttribute("disabled");
  second.removeAttribute("disabled");
  startButton.innerHTML = "START";
  document.body.style.backgroundImage = "linear-gradient(to top left, #2980b9, #9b59b6)";
}