JSFiddle - React, Tailwind, and code Playground

by Zoran Stanić

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
  <div class = "container text-center">
    <div>
      <h1>Pomodoro Clock</h1>
    </div>

    <div class="container text-center" id = "length">

      <h5>BREAK LENGTH</h5>
      <h5>SESSION LENGTH</h5>
    </div>



    <div class="btn-group text-center">
      <button type="button" class="btn btn-primary"id = "breakplus">+</button>
      <p id = "breakvalue"></p> 
      <button type="button" class="btn btn-primary"id = "breakminus">-</button>

    </div>

    <div class="btn-group text-center">
      <button type="button" class="btn btn-primary" id = "sessionplus">+</button>
      <p id = "sessionvalue"></p> 
      <button type="button" class="btn btn-primary"id = "sessionminus">-</button>

    </div>

    <div class="center-block"><button type="button" class=" circle btn btn-primary" id = "crcl"></button></div>

  </div>
</body>

CSS

h5{
  display:inline-block;
}
p{
  font-size:30px;
}
.circle
{
  width:500px;
  height:500px;
  border-radius:50%;
  font-size:20px;
  color:#fff;
  line-height:500px;
  text-align:center;
  background:#000;

}

JavaScript

$( document ).ready(function(){
  var toggle = true;
  var a = document.getElementById("breakvalue");
  a.innerHTML = 7;
  var b = document.getElementById("sessionvalue");
  b.innerHTML = 25;
  $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");

  $("#breakplus").on("click", function(){
    $("#breakvalue").html(eval(a.innerHTML)+1);
  });
  $("#breakminus").on("click", function(){
    if (a.innerHTML>=2){
      $("#breakvalue").html(eval(a.innerHTML)-1);
    }
  });
  $("#sessionplus").on("click", function(){
    $("#sessionvalue").html(eval(b.innerHTML)+1);
    $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
  });
  $("#sessionminus").on("click", function(){
    if(b.innerHTML>=2){
      $("#sessionvalue").html(eval(b.innerHTML)-1);
      $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1 id = numb>" + b.innerHTML + "</h1>");
    }
  });

  $("#crcl").on("click", function (){
    var capture = document.getElementById("crcl");

    var inner = capture.innerHTML;

    var head = document.getElementById("numb");

    var inn =  head.innerHTML;
    if(toggle&&isNaN(inn)){
      inter = setInterval(function(){
        console.log(inn);
        minutes = eval(inn.slice(0,2));

        seconds=eval(inn.slice(3));
        console.log(minutes);
        console.log(seconds);

        if(seconds>=0){
          $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1>" + minutes + ":" + seconds-- + "</h1>");}
        if (seconds<0){
          seconds=59;
          minutes = eval(minutes-1);
          $("#crcl").html("<h3>Session</h3>" + "</break>" + "<h1>" + minutes + ":" + seconds-- + "</h1>");}
        if(eval(minutes)<0){
          $("#crcl").html("<h1>BREAK!!!</h1>");
          clearInterval(inter);

        }
        toggle=false;
      }, 1000); 

    }
    if(toggle&&!isNaN(inn)){

      var minutes = eval(b.innerHTML-1);
      var seconds=59;

      inter =...