Skip to content

Instantly share code, notes, and snippets.

@chemok78

chemok78/Pomodoro Clock.markdown

Created July 22, 2016 06:22
Show Gist options
  • Save chemok78/5b0f9b6a47bb38fe2536ee7fc89af167 to your computer and use it in GitHub Desktop.
Save chemok78/5b0f9b6a47bb38fe2536ee7fc89af167 to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Clock
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--to make sure latest rendering mode for IE-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--to ensure proper rendering and touch zooming-->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
<title>Pomodoro Clock</title>
</head>
<body>
<div class="wrapper">
<h1 class="title">Pomodoro Clock</h1>
<div class="button">
<p>BREAK LENGTH</p>
<div class="teller">
<button id="minus-break">-</button>
<span id="break">5</span>
<button id="plus-break">+</button>
</div>
</br>
</div>
<div class="button">
<p>SESSION LENGTH</p>
<div class="teller">
<button id="minus-session">-</button>
<span id="session">25</span>
<button id="plus-session">+</button>
</div>
</br>
</div>
<div id="timer">
<h2 id="timer-title">Session</h2>
<p id="countdown">Click to start</p>
</div>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function(){
var resize = function() {
// a function to always center the wrapper in the centre of the viewport
$('.wrapper').css({
position:'absolute',
left: ($(window).width() - $('.wrapper').outerWidth())/2,
//outerWidth is a jQuery method for width including padding and border
//difference between window with and wrapper width divided by 2
top: ($(window).height() - $('.wrapper').outerHeight())/2,
//height:($(window).height()/6)*4,
//width:($(window).width()/6)*4
});
}
resize();
//call the resize function once when the document is loaded
$(window).resize(function(){
//call the resize function every time the window resizes
resize();
})
var toggle;
//hold time interval: to set and to clear in Run/Stop Timer/Break
var sessionOn = 1;
//toggle to check whether session or break process is running, for on click event. Intitialize with 1 = session is running
var sessionToggle = 0;
//toggle to check if session is running or on pause
var breakToggle = 0;
//toggle to check if break is running or on pause
var sessionLength = 25;
//initialize sessionLength in minutes with 25
var sessionHours = 0;
var sessionMinutes = 0;
var sessionSeconds = sessionLength * 60;
var breakLength = 5;
//initialize breakLength in minutes with 5 minutes
var breakHours = 0;
var breakMinutes = 0;
var breakSeconds = breakLength * 60;
$('#plus-session').on("click", function(){
sessionLength += 1;
document.getElementById("session").innerHTML = sessionLength;
document.getElementById("countdown").innerHTML = sessionLength;
sessionSeconds = sessionLength * 60;
//recalculate sessionSeconds with plus or minus in minutes
});
$('#minus-session').on("click", function(){
if(sessionLength > 1){
//stop being able to decrease when session reaches 1 (no 0 length sessions)
sessionLength -= 1;
document.getElementById("session").innerHTML = sessionLength;
document.getElementById("countdown").innerHTML = sessionLength;
}
sessionSeconds = sessionLength * 60;
//recalculate sessionSeconds with plus or minus in minutes
});
$('#plus-break').on("click", function(){
breakLength += 1;
document.getElementById("break").innerHTML = breakLength;
breakSeconds = breakLength * 60;
});
$('#minus-break').on("click", function(){
if(breakLength > 1){
//stop being able to decrease when break reaches 1 (no 0 length breaks)
breakLength -= 1;
document.getElementById("break").innerHTML = breakLength;
breakSeconds = breakLength * 60;
}
});
var stopTimer = function(){
//clear the interval set for Timer
clearInterval(toggle);
sessionToggle = 0;
//set session to paused
}
var runTimer = function () {
//function to be called when clicking Session circle
document.getElementById("timer-title").innerHTML = "Session";
if (sessionToggle === 0){
//if session not running at the moment, activate interval and call setSession every second
toggle = setInterval(setSession,1000);
sessionToggle = 1;
//set session to running
} else {
//if session is running, stop timer
stopTimer();
}
}
var stopBreak = function() {
//clear the interval for Break
clearInterval(toggle);
breakToggle = 0;
//set Break to not running
}
var runBreak = function () {
//function to called when click on Session circle
document.getElementById("timer-title").innerHTML = "Break";
//set circle title to Break first
if (breakToggle === 0){
//if break not running, activate it by setting interval with every second calling setBreak
toggle = setInterval(setBreak,1000);
breakToggle = 1;
//set break to running
} else {
stopBreak();
}
}
var setBreak = function(){
//we have the global variables breakLength in minutes and breakSeconds in seconds here
//function to called with timeInterval from runBreak
var remainBreakSeconds = 0;
//local variable to hold the remaining seconds calculating from hours to minutes to seconds
//calculate how many hours: 1 hour is 3600 seconds
breakHours = Math.floor(breakSeconds/3600);
//remaining seconds after hour calculation
remainBreakSeconds = breakSeconds % 3600;
//calculate how many minutes with remainder: 1 minute is 60 seconds
breakMinutes = Math.floor(remainBreakSeconds/60);
//remaining seconds after minutes calculation
remainBreakSeconds = remainBreakSeconds % 60;
if (breakSeconds == 0){
//if all the seconds has been counted down, start Session again
stopBreak();
//call function that clears timeInterval on break
sessionSeconds = sessionLength * 60;
//reset sessionSeconds again for running Session again
runTimer();
//call function that sets timeInterval on runTimer();
sessionOn = 1;
//set session to running for click event on circle that pauses and resumes the Session
} else {
//add a zero to display when numbers are 0-9
if (breakHours < 10){
breakHours = "0" + breakHours;
}
if (breakMinutes < 10){
breakMinutes = "0" + breakMinutes;
}
if (remainBreakSeconds < 10){
remainBreakSeconds = "0" + remainBreakSeconds;
}
//display the time in id="countdown"
document.getElementById("countdown").innerHTML = breakHours + ":" + breakMinutes + ":" + remainBreakSeconds;
breakSeconds = breakSeconds - 1;
//substract a second at the end for every 1 second timeInterval
}
}
var setSession = function(){
//we have the global variables sessionLength in minutes and sessionSeconds in seconds here
//function to called with timeInterval from runBreak
var remainSeconds = 0;
//calculate how many hours: 1 hour is 3600 seconds
sessionHours = Math.floor(sessionSeconds/3600);
//remaining seconds after hour calculation
remainSeconds = sessionSeconds % 3600;
//still 1499 here
//calculate how many minutes with remainder: 1 minute is 60 seconds
sessionMinutes = Math.floor(remainSeconds/60);
//remaining seconds after minutes calculation
remainSeconds = remainSeconds % 60;
if (sessionSeconds == 0){
//if all the seconds has been counted down, start break (again)
stopTimer();
//call function that clears timeInterval on session
breakSeconds = breakLength * 60;
//reset sessionSeconds again for running Session again
runBreak();
//call function that sets timeInterval on runBreak();
sessionOn = 0;
//set session to not running for click event on circle that pauses and resumes the Session
} else {
if (sessionHours < 10){
sessionHours = "0" + sessionHours;
}
if (sessionMinutes < 10){
sessionMinutes = "0" + sessionMinutes;
}
if (remainSeconds < 10){
remainSeconds = "0" + remainSeconds;
}
//display the time in id="countdown"
document.getElementById("countdown").innerHTML = sessionHours + ":" + sessionMinutes + ":" + remainSeconds;
//end setInterval;
sessionSeconds = sessionSeconds - 1;
//substract a second at the end for every 1 second timeInterval
}
}
$('#timer').on("click", function() {
if (sessionOn === 1){
//if session process running call function that starts or stops the timer
runTimer();
} else {
//else call function that starts or stops break
runBreak();
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body {
min-height: 100%;
padding-top 60px;
background-repeat: no-repeat;
background-size:cover;
background-color: #34495e;
font-family: work sans;
}
.wrapper {
height:500px;
width:700px;
background-color: #34495e;
overflow-y:auto;
color:white;
}
.title {
text-align:center;
font-weight: 700;
}
.button {
display:inline;
float:left;
width: 250px;
margin-top:10px;
margin-left: 50px;
margin-right: 50px;
/*background-color:black;*/
text-align:center;
padding-top:10px;
}
button {
background-color: #e74c3c;
border-color: #e74c3c;
}
.teller {
font-size:22px;
font-weight:600;
}
#timer {
height: 250px;
width: 250px;
border-radius: 125px;
border-style: solid;
border-width: 3px;
clear:left;
margin: 0 auto;
}
#timer-title {
text-align:center;
padding-top: 10%;
}
#countdown {
font-size: 22px;
font-weight: 600;
text-align:center;
padding-top: 25%;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment