A Pen by VenomSnake on CodePen.
Created
December 2, 2017 11:38
-
-
Save HuangStanley050/5ea290ca7309465da49ce7a3f3bf25a7 to your computer and use it in GitHub Desktop.
Pomodoro Clock project
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div id="jumbo_style"class="jumbotron"> | |
| <h1 id="heading">Pomodoro Clock</h1> | |
| </div> | |
| <div class="row"> | |
| <div id="break_style"class="col-sm-3 col-sm-offset-3"> | |
| <h2>Break</h2> | |
| <h3 id="break_display">1</h3> | |
| <button id="break_plus"type="button" class="btn btn-default ">+</button> | |
| <button id="break_minus"type="button" class="btn btn-default ">-</button> | |
| </div> | |
| <div id="session_style"class="col-sm-3"> | |
| <h2>Session</h2> | |
| <h3 id="session_display">1</h3> | |
| <button id="session_plus"type="button" class="btn btn-default ">+</button> | |
| <button id="session_minus"type="button" class="btn btn-default ">-</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div id="timer_style" class="col-sm-6 col-sm-offset-3"> | |
| <div id="clock"class="full-circle center-block"> | |
| <h3 id="clock_status">Session</h3> | |
| <br> | |
| <br> | |
| <h3 id="clock_display">1:00</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| var break_count = 1; | |
| var session_count = 1; | |
| var clock_pause = 0; | |
| var session_time = 1; | |
| var test; | |
| var rest_time=0; | |
| var work_time=1; | |
| var sec = 59; | |
| var correct_min; | |
| var ini_or_not=0; | |
| var session_counter=0; | |
| $("#break_plus").click(function() { | |
| break_count++; | |
| $("#break_display").html(break_count); | |
| ini_or_not=0; | |
| }); | |
| $("#break_minus").click(function() { | |
| break_count--; | |
| $("#break_display").html(break_count); | |
| ini_or_not=0; | |
| }); | |
| $("#session_plus").click(function() { | |
| session_count++; | |
| $("#session_display").html(session_count); | |
| ini_or_not = 0; | |
| }); | |
| $("#session_minus").click(function() { | |
| session_count--; | |
| $("#session_display").html(session_count); | |
| ini_or_not = 0; | |
| }); | |
| $("#clock").click(function(){ | |
| if ( ini_or_not == 0){ //has the clock being initialzied or not? | |
| ini_Clock(session_count); | |
| } | |
| run_Clock(); | |
| }); | |
| function ini_Clock(min) { | |
| correct_min = min - 1; | |
| sec = 59; | |
| //console.log(correct_min); | |
| if ( correct_min < 10 ) { | |
| $("#clock_display").html("0"+correct_min+":"+sec); | |
| } | |
| else { | |
| $("#clock_display").html(correct_min+":"+sec); | |
| } | |
| console.log("hello"); | |
| } | |
| function run_Clock() { | |
| if ( session_time == 1) { //toggle "ON" | |
| if ( work_time == 1 ){ | |
| $("#clock_status").html("Running"); | |
| session_time = setInterval(countdown ,1000); | |
| ini_or_not = 1; | |
| } | |
| if(rest_time == 1) { | |
| $("#clock_status").html("Break"); | |
| //alert("Break"); | |
| session_time = setInterval(countdown,1000); | |
| ini_or_not= 1; | |
| } | |
| } | |
| else { //toggle "OFF" | |
| clearInterval(session_time); | |
| $("#clock_status").html("Paused"); | |
| session_time = 1; | |
| ini_or_not = 1; | |
| } | |
| } | |
| function countdown(){ | |
| //console.log(counter); | |
| $("#clock_display").html(makeTwodigit(correct_min)+":"+makeTwodigit(sec)); | |
| if ( sec == 0 && correct_min == 0) { | |
| ini_or_not = 0; | |
| //$("#clock_status").append(" :Break Time!"); | |
| clearInterval(session_time); | |
| //alert("Time is up! "+rest_time); | |
| sec = 59; | |
| session_time = 1; | |
| session_counter++; | |
| // console.log(session_counter); | |
| if(work_time == 1){ | |
| rest_time =1; | |
| work_time = 0; | |
| ini_Clock(break_count); | |
| run_Clock(); | |
| } | |
| else { | |
| work_time = 1; | |
| rest_time = 0; | |
| ini_Clock(session_count); | |
| run_Clock(); | |
| } | |
| //console.log(session_count); | |
| //console.log(correct_min); | |
| } | |
| if ( sec==0 && correct_min !=0){ | |
| //clearInterval(session_time); | |
| correct_min--; | |
| sec = 59; | |
| } | |
| sec--; | |
| } | |
| function makeTwodigit(n) { | |
| if ( n < 10){ | |
| return "0"+n; | |
| } | |
| else { | |
| return ""+n; | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: gray; | |
| } | |
| #heading { | |
| text-align: center; | |
| color: blue; | |
| } | |
| #jumbo_style { | |
| background-color: DodgerBlue; | |
| font-family: ArialBlack; | |
| } | |
| #break_style { | |
| background-color: green; | |
| text-align: center; | |
| } | |
| #session_style { | |
| background-color: LightBlue; | |
| text-align: center; | |
| } | |
| #timer_style { | |
| background-color: cornflowerblue; | |
| } | |
| .btn { | |
| width: 40px; | |
| display: inline-block; | |
| } | |
| .full-circle { | |
| background-color: white; | |
| border: 3px solid green; | |
| height: 300px; | |
| width: 300px; | |
| border-radius: 150px; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment