Created
January 27, 2017 05:47
-
-
Save CSENoni/6bdbc67ddeb0e7984ea5b7ea8f4d7232 to your computer and use it in GitHub Desktop.
Pomodoro Clock
This file contains 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
<div class="container"> | |
<h1>Pomodoro Clock</h1> | |
<div id="sessionTime">25 : 00</div> | |
<div id="controls"> | |
<div id="breakControl"> | |
<label>Break Time</label> | |
<button type="button" id="breakminus">-</button> | |
<span id="bNumber">5</span> | |
<button type="button" id="breakplus">+</button> | |
</div> | |
<button type="button" id="operatedButton"><i class="fa fa-play"></i></button> | |
<div id="sessionControl"> | |
<label>Session Length</label> | |
<button type="button" id="sessionminus">-</button> | |
<span id="sNumber">25</span> | |
<button type="button" id="sessionplus">+</button> | |
</div> | |
</div> | |
</div> |
This file contains 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 sessionTime = document.querySelector("#sessionTime"); | |
var sNumber = document.querySelector("#sNumber"); | |
var bNumber = document.querySelector("#bNumber"); | |
var operatedButton = document.querySelector("#operatedButton"); | |
var breakminus = document.querySelector("#breakminus"); | |
var breakplus = document.querySelector("#breakplus"); | |
var sessionminus = document.querySelector("#sessionminus"); | |
var sessionplus = document.querySelector("#sessionplus"); | |
var minutes; | |
var seconds; | |
var pause = false; | |
var isBreak = false; | |
// This is main function, when we run the web, the program will be run | |
function main() { | |
var times; | |
minutes = Number(sNumber.innerHTML) - 1; | |
seconds = 60; | |
// We need to have an user interaction for each buttons on the screen | |
// if the the clock is running we could not click the buttons unless we pause it | |
sessionminus.addEventListener("click", function() { | |
if (!pause) { | |
var number = Number(sNumber.innerHTML); | |
sNumber.innerHTML = minus(number); | |
reset(minus(number) - 1); | |
} | |
}); | |
sessionplus.addEventListener("click", function() { | |
if (!pause) { | |
var number = Number(sNumber.innerHTML); | |
sNumber.innerHTML = add(number); | |
reset(add(number) - 1); | |
} | |
}); | |
breakminus.addEventListener("click", function() { | |
if (!pause) { | |
var number = Number(bNumber.innerHTML); | |
bNumber.innerHTML = minus(number); | |
} | |
}); | |
breakplus.addEventListener("click", function() { | |
if (!pause) { | |
var number = Number(bNumber.innerHTML); | |
bNumber.innerHTML = add(number); | |
} | |
}); | |
// We have a button to start and pause the clock, it will visually change when we click the button | |
operatedButton.addEventListener("click", function() { | |
if (pause) { | |
operatedButton.innerHTML = '<i class="fa fa-play"></i>'; | |
pause = false; | |
clearInterval(times) | |
} else { | |
operatedButton.innerHTML = '<i class="fa fa-pause"></i>'; | |
pause = true; | |
times = setInterval(play, 1000); | |
} | |
}); | |
} | |
// this function allows us to run the clock and visually change the webpage during the timer countdown | |
function play() { | |
if (minutes === 0 && seconds === 0) { | |
if (!isBreak) { | |
isBreak = true; | |
minutes = Number(bNumber.innerHTML) - 1; | |
} else { | |
isBreak = false; | |
minutes = Number(sNumber.innerHTML) - 1; | |
} | |
seconds = 59; | |
} else if (seconds === 0) { | |
minutes--; | |
seconds = 59; | |
} else { | |
seconds--; | |
} | |
// when we show the data on the screen, depending on the values, we could set it up on the good format | |
sessionTime.innerHTML = ((minutes < 10) ? ("0" + minutes) : minutes) + " : " + ((seconds < 10) ? ("0" + seconds) : seconds); | |
} | |
// these functions for adding and lowering the break and session time | |
function add(number) { | |
return number + 1; | |
} | |
function minus(number) { | |
return number - 1; | |
} | |
// reset the clock when the changes take place | |
function reset(number) { | |
minutes = number; | |
seconds = 60; | |
} | |
// run the main function | |
main(); |
This file contains 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 { | |
background: #ff4b1f; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to left, #ff4b1f , #ff9068); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to left, #ff4b1f , #ff9068); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
color: white; | |
} | |
.container { | |
margin: 120px 0; | |
} | |
h1 { | |
text-align: center; | |
} | |
#sessionTime { | |
text-align: center; | |
font-size: 128px; | |
font-weight: bold; | |
} | |
#controls { | |
text-align: center; | |
} | |
#breakControl { | |
display: inline-block; | |
} | |
#sessionControl { | |
display: inline-block; | |
} | |
#operatedButton { | |
font-size: 24px; | |
margin: 0 50px; | |
} | |
#bNumber, #sNumber { | |
font-size: 24px; | |
} | |
button { | |
border: none; | |
background: none; | |
outline: none; | |
color: white; | |
font-size: 24px; | |
} | |
label { | |
display: block; | |
font-weight: bold; | |
font-size: 18px; | |
} |
This file contains 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/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment