Pomodoro Clock

In this example below you will see how to do a Pomodoro Clock with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Pomodoro Clock</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css'>

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

  
</head>

<body>

  
<div id='second' class="container-fluid">
   
  <div class='row'>
    <div id='app-title' class='col-md-12 text-center'><h1>Pomodoro Clock</h1></div>
  </div>
  
  <div id='clocks' class='row'>
    <div class='col-md-12'>
      <div id='wclock'></div>
      <div id='bclock'></div>

    </div>

  </div>
<div id="buttons">
  <button class='btn  btn-lg mainbuttons' id="start">start</button>

  <button class='btn  btn-lg mainbuttons' id="reset">reset</button>
</div>
  
  
  
  <div class="row">
    
    <div id="breaktimer" class="col-md-6 col-xs-6 col-sm-6">
      <ul class="list-unstyled"><li><h4>break session</h4></li>
       
     <li> 
     <button id='bplus' class="btn  changer">+</button>
      <span id='breaktime'>5</span>
      <button id='bminus' class="btn  changer">-</button>
      </li></ul>
    </div>


    <div id="worktimer" class="col-md-6 col-xs-6 col-sm-6">
      
      <ul class="list-unstyled"><li>  <h4>work session</h4></li>
     <li> <button id='wplus' class="btn  changer">+</button>
      <span id='worktime'>25</span>
      <button id='wminus' class="btn changer">-</button>
        </div></li></ul>
  </div>

 

</div>


</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/snwolak/pomodoro-clock-rLMrNa */
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
  font-family: 'Fjalla One', sans-serif;
  color: white;
  background-color: #F5D76E;
  
  }

#second {
  
  max-width: 375px;
  height: 550px;
  background-color: #e74c3c;
  
  position: relative;
  margin: 5% auto;
  
  
}
#app-title {
  margin-top: 30px;
  margin-bottom: 50px;
  
}
#breaktimer, #worktimer, #buttons, #wclock, #bclock{
  margin: 0 auto; 
  display:flex;justify-content:center;align-items:center;
  
}

#buttons{
  
  padding: 25px;
}

.changer, .mainbuttons{
  color: white;

  background-color: transparent;
  
}

.btn:focus,.btn:active {
   outline: none !important;
}

@media (max-width: 425px){
 
  #second {margin: 0% auto; overflow:hidden;
  }
    
  }




/*Downloaded from https://www.codeseek.co/snwolak/pomodoro-clock-rLMrNa */
$('document').ready(function() {
  var wtime = 25;
  var btime = 5;
  var workclock;
  var breakclock;
  

  $('#bclock').hide();
//WORK SESSION CLOCK
  workclock = $('#wclock').FlipClock(wtime * 60, {
    autoStart: false,
    clockFace: "MinuteCounter",
    countdown: true,
    callbacks: {
      interval: function() {
        var time = workclock.getTime().time;
        if (time === 0) {
          $('#wclock').hide();
          $('#bclock').show();
          breakclock.setTime(parseInt($("#breaktime").html()) * 60);
          breakclock.start();
        }
      },
    }
});
//BREAK SESSION CLOCK
  breakclock = $('#bclock').FlipClock(btime * 60, {
    autoStart: false,
    clockFace: "MinuteCounter",
    countdown: true,
   callbacks: {
     
     interval: function() {
        var time2 = breakclock.getTime().time;
        if (time2 === 0) {
          $('#bclock').hide();
          $('#wclock').show();
          
          workclock.setTime(parseInt($("#worktime").html()) * 60);
          workclock.start();
        }
      },
     
     
   }
    

  });
// START RESET BUTTONS
  $("#start").click(function() {
    //workclock.setTime(parseInt($("#worktime").html()) * 60);
      $('#wclock').show();
      $('#bclock').hide();
    workclock.start();
      
    $('.changer').prop("disabled", true);

  });

  $('#reset').click(function() {
    workclock.stop();
    breakclock.stop();
    workclock.setTime(parseInt($("#worktime").html()) * 60);

    $('.changer').prop("disabled", false);
    $('#wclock').show();
    $('#bclock').hide();

  });
//WORK SESSION BUTTONS
  $('#wplus').click(function() {
    $('worktime').text(wtime++);
    $('#worktime').html(wtime);
      $('#wclock').show();
    $('#bclock').hide();
    workclock.setTime(parseInt($("#worktime").html()) * 60);
  });
  $('#wminus').click(function() {
    if (wtime > 1) {
      $('#workclock').text(wtime--);
      $('#worktime').html(wtime);
        $('#wclock').show();
    $('#bclock').hide();
      workclock.setTime(parseInt($("#worktime").html()) * 60);
    }
  });
//BREAK SESSION BUTTONS
   $('#bplus').click(function() {
    $('breaktime').text(btime++);
    $('#breaktime').html(btime);
      $('#bclock').show();
     $('#wclock').hide();
    breakclock.setTime(parseInt($("#breaktime").html()) * 60);
     
  });

  $('#bminus').click(function() {
    if (btime > 1) {
      $('#breaktime').text(btime--);
      $('#breaktime').html(btime);
      $('#bclock').show();
        $('#wclock').hide();
      breakclock.setTime(parseInt($("#breaktime").html()) * 60);
    }
  });
});

Comments