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 pawan92, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pawan92 ©

Technologies

  • HTML
  • CSS
<!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.5/css/bootstrap.min.css'>

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

  
</head>

<body>

  
<h1 class="heading text-center">Pomodoro Clock</h1>

  <div class="row text-center">
   <div class="col-lg-4">
    
    <h2>Break</h2>
    <button type="button" class="btn btn-success" id="breakup">+</button>
      <span id="minbreak" class="box">05:00</span>
      <button type="button" class="btn btn-danger" id="breakdown">-</button>
  </div>
    
    <!--play button-->
        <div class="col-lg-4 playbutton">
          <h3 id="test">25:00</h3>
          <button type="button" class="playButton" id="play"></button>
        </div>

  
  
     <h2>Session</h2>
    <button type="button" class="btn btn-success" id="seshup">+</button>
    <span id="session" class="box">25:00</span>
    <button type="button" class="btn btn-danger" id="seshdown">-</button>
  </div>
    
</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pawan92/pomodoro-clock-XXqMEE */
body{
  background-image:url("http://fullhdpictures.com/wp-content/uploads/2016/01/HQ-Clock-Wallpaper.jpg");
}
.heading{
  font-family:cursive;
  font-weight:bold;
  color: white;
  text-shadow: 2px 2px 4px orange;
}
.row{
  color:orange;
}


span{
  margin:40px;
}
.box{
    padding: 10px;
    margin: 25px;
    border: 5px solid navy;
    background: #4d4dff;
}
#screen{
    width:100px; 
    padding: 10px;
    margin: 25px;
    border: 5px solid navy;
    background: #00FFFF;
}
.playButton{
  width: 90px;
  height: 90px;
  background-image: url("http://www.free-icons-download.net/images/video-play-button-icon-76433.png");
  background-size:cover;
  background-color:;
  
}

Comments