Pomodoro Clock Bonfire for FreeCodeCamp
Created
February 8, 2016 21:38
-
-
Save db001/99d66c3bc8a4a77c91cb to your computer and use it in GitHub Desktop.
Pomodoro Clock
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> | |
| <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> | |
| <h2>Pomodoro Clock</h2> | |
| <div class="inputs"> | |
| <div id="work"> | |
| <div class="timeInput glyphicon glyphicon-triangle-top" onclick="up()" aria-hidden="true"></div> | |
| <div class="timeInput" id="workTime">25</div> | |
| <div class="timeInput glyphicon glyphicon-triangle-bottom" onclick="down()" aria-hidden="true"></div> | |
| <h5>Session Length</h5> | |
| </div> | |
| <div id="break"> | |
| <div class="timeInput glyphicon glyphicon-triangle-top" onclick="upBreak()" aria-hidden="true"></div> | |
| <div class="timeInput" id="breakTime">5</div> | |
| <div class="timeInput glyphicon glyphicon-triangle-bottom" onclick="downBreak()" aria-hidden="true"></div> | |
| <h5>Break length</h5> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="container"> | |
| <div id="statusDisp">Session time</div> | |
| <div id="timeDisplay">00:00</div> | |
| <br> | |
| <div class="display btn" onclick="start()">Start</div> | |
| <div class="display btn" onclick="stop()">Stop</div> | |
| <div class="display btn" onclick="reset()">Reset</div> | |
| </div> | |
| </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
| var workTime = document.getElementById("workTime"); | |
| var breakTime = document.getElementById("breakTime"); | |
| var timeInSeconds = 0; | |
| var timeDisplay = document.getElementById("timeDisplay"); | |
| var timerRunning = false; | |
| var working = true; | |
| var breaking = false; | |
| var statusDisp = document.getElementById("statusDisp"); | |
| function display(time) { | |
| var seconds = time % 60; | |
| seconds = ("0" + seconds).slice(-2); | |
| var minutes = Math.floor(time / 60); | |
| minutes = ("0" + minutes).slice(-2); | |
| return minutes + ":" + seconds; | |
| } | |
| function start() { | |
| if (!timerRunning) { | |
| if (working) { | |
| timeInSeconds = workTime.innerHTML * 60; | |
| } else if (breaking) { | |
| timeInSeconds = breakTime.innerHTML * 60; | |
| } | |
| timer = setInterval(updateDisplay, 1000); | |
| timerRunning = true; | |
| } | |
| } | |
| function updateDisplay() { | |
| timeDisplay.innerHTML = display(timeInSeconds); | |
| if (timeInSeconds <= 0 && working) { | |
| timeInSeconds = breakTime.innerHTML * 60; | |
| working = false; | |
| breaking = true; | |
| statusDisp.innerHTML = "Break time!"; | |
| } else if (timeInSeconds <= 0) { | |
| statusDisp.innerHTML = "Session time"; | |
| clearInterval(timer); | |
| timerRunning = false; | |
| working = true; | |
| breaking = false; | |
| } | |
| timeInSeconds--; | |
| } | |
| function stop() { | |
| clearInterval(timer); | |
| timerRunning = false | |
| } | |
| function reset() { | |
| stop(); | |
| timeInSeconds = workTime.innerHTML * 60; | |
| timeDisplay.innerHTML = display(timeInSeconds); | |
| } | |
| function up() { | |
| if (!timerRunning && workTime.innerHTML < 59) { | |
| workTime.innerHTML++; | |
| timeInSeconds = workTime.innerHTML * 60; | |
| } | |
| } | |
| function down() { | |
| if (!timerRunning && workTime.innerHTML > 1) { | |
| workTime.innerHTML--; | |
| timeInSeconds = workTime.innerHTML * 60; | |
| } | |
| } | |
| function upBreak() { | |
| if (!timerRunning && breakTime.innerHTML < 59) { | |
| breakTime.innerHTML++; | |
| timeInSeconds = breakTime.innerHTML * 60; | |
| } | |
| } | |
| function downBreak() { | |
| if (!timerRunning && breakTime.innerHTML > 1) { | |
| breakTime.innerHTML--; | |
| timeInSeconds = breakTime.innerHTML * 60;; | |
| } | |
| } |
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
| body { | |
| font-family: 'Oswald', sans-serif; | |
| color: #0d0; | |
| text-align: center; | |
| text-transform: uppercase; | |
| background-color: #111; | |
| } | |
| .glyphicon { | |
| font-size: 1.25em; | |
| } | |
| .glyphicon:hover { | |
| color: #090; | |
| } | |
| .inputs { | |
| width: 50%; | |
| margin: 25px auto; | |
| } | |
| h2 { | |
| margin-top: 25px; | |
| } | |
| #work, #break { | |
| display: inline-block; | |
| margin: 0px 120px; | |
| font-size: 2em; | |
| } | |
| #timeDisplay { | |
| font-size: 3em; | |
| border: 1px solid #0d0; | |
| width: 200px; | |
| margin: auto; | |
| background-color: #111; | |
| } | |
| .btn { | |
| font-size: 1em; | |
| width: 80px; | |
| height: 40px; | |
| margin:0 5px 20px 5px; | |
| line-height: 25px; | |
| } | |
| .btn:hover { | |
| background-color: #0d0; | |
| color: #111; | |
| border-radius: 0px; | |
| } |
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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment