Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="row text-center" id="title">
        <h1>Pomodoro Clock</h1>
    </div>
​
    <div class="center-block app">
        <div class="row text-center">
            <div class="col-lg-4 break">
                <h2>Break</h2>
                <button type="button" class="upButton"></button>
                <p class="breakMin">5</p>
                <button type="button" class="downButton"></button>
                
            </div>
            <div class="col-lg-4 play">
                <h3 id="test"></h3>
                <button type="button" class="playButton" id="pButton"></button>
            </div>
            <div class="col-lg-4 session">
                <h2>Session</h2>
                <button type="button" class="upButton"></button>
                <p class="sessionMin" id="ses">5</p>
                <button type="button" class="downButton"></button>
            </div>
        </div>
    </div>
</div>
  
  
</body>
</html>
 
#title{
    padding-top: 10%;
}
​
.app{
    background-color: red;
    height: 50%;
    width: 50%;
    border-radius: 10%;
}
​
.break button{
    margin-top: 20px;
    margin-bottom: 20px;
}
​
.session button{
    margin-top: 20px;
    margin-bottom: 20px;
}
​
.upButton{
    height:30px;
    width: 30px;
    background-image: url("up.png");
    background-size: cover;
}
​
.downButton{
    height:30px;
    width: 30px;
    background-image: url("down.png");
    background-size: cover;
}
​
.play{
    margin-top: 80px;
}
​
.playButton{
    height: 90px;
    width: 90px;
    background-image: url("play.png");
    background-size: cover;
    border-radius: 10%;
    opacity: 0.7;
}
​
.playButton:hover{
    opacity: 1.0;
}
 
//makes sure the page is loaded first
$(document).ready(function() {
    //global variables
    //grabs text of an id and converts it to an int
    var countMin = 5;
    var count1 = 60;
    
​
    //when button id "but" is clicked...
​
       //while page is up, it keeps track each second that has passed
       for(; countMin >=0;countMin--){
            var counter1 = setInterval(function(){
                //calls timer function to count down
                 count1 = Timer(count1,counter1,countMin);
            },1000);
          count1 =60;
        }
​
​
​
    //counts down
    function Timer(count,counter,minutes){
        count--;
        //once it hits 0 seconds, the interval will stop counting
        if(count <=0){
            clearInterval(counter);     
        }
​
        //displays the countdown
        if(minutes < 10){
            if(count < 10){
                console.log("0:0" + count);
            } else {
                console.log("0:" + count);
            }
        }else if(minutes > 0 && minutes < 10){
            if(count < 10){
                console.log("0" + minutes +":0" + count);
            } else {
               console.log("0"+minutes+":" + count);
            }
        } else{
            if(count < 10){
                console.log(minutes+":0" + count);
            } else {
               console.log=minutes+":" + count;
            }
        }
        
        return count;
    }
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers