Skip to content

Instantly share code, notes, and snippets.

@amjohnson38

amjohnson38/Pomodoro Clock.markdown

Created July 24, 2016 00:25
Show Gist options
  • Save amjohnson38/31670c4967349a18c0df38ea177c4274 to your computer and use it in GitHub Desktop.
Save amjohnson38/31670c4967349a18c0df38ea177c4274 to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Clock
Raw
index.html
<body>
<div class="container text-center">
<div id="heading" class="row">
<div class="col-xs-12"></div>
<h1>Pomodoro Clock
</h1>
</div>
<div class="row">
<div class="col-xs-6">
<div id="workTimer" class="workTimer">
<h1 id="workTime" class="subheadings">WORK TIME</h1>
<h2 id="workTimeNum">25</h2>
<button id="increaseWorkTime" type="button" class="btn ghost">
<span id="plus" class="glyphicon glyphicon-plus"></span>
</button>
<button id="decreaseWorkTime" type="button" class="btn ghost">
<span id="minus" class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
<div class="col-xs-6">
<div id="downtimeTimer" class="downtimeTimer">
<h1 id="downTime" class="subheadings">DOWN TIME</h1>
<h2 id="downTimeNum">05</h2>
<button id="increaseBreakTime" type="button" class="btn ghost downTimeButtons">
<span id="plus" class="glyphicon glyphicon-plus"></span>
</button>
<button id="decreaseBreakTime" type="button" class="btn ghost downTimeButtons">
<span id="minus" class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="clock">
<h1 id="time">TIME</h1>
<h1 id="min" class="clockText">25</h1>
<h1 id="colon" class="clockText">:</h1>
<h1 id="sec" class="clockText">00</h1>
<div>
<button id="start" type="button" class="btn ghost green">
<span class="glyphicon glyphicon-play-circle"></span>Start
</button>
<button id="pause" type="button" class="btn ghost green">
<span class="glyphicon glyphicon-pause"></span> Pause
</button>
<button id="reset" type="button" class="btn ghost green">
<span class="glyphicon glyphicon-refresh"></span> Reset
</button>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
Pomodoro Clock.markdown

Pomodoro Clock

This Pomodoro clock was built to satisfy one of the requirements for Free Code Camp's Front End Certification. The clock starts with a 25 minute work timer and a 5 minute break timer (these can be changed to satisfy the user's need). The clock also has the functionality to be started, paused and reset by the user. I've added some animation and color to indicate which timer is active , and also an alarm that alerts the user when either the work time or break time has elapsed.

A Pen by Angela Johnson on CodePen.

License.

Raw
script.js
var workTime = 25;
var downTime = 5;
var seconds = 59;
var minutes = workTime;
var paused = false;
var workTimeLength = null;
var breakTimeLength = null;
var currentTime = null;
var timerAlarm = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/v1469195204/Beep-beep-beep_lxbbce.mp3");
/***************************************************************************************
* updates the timer and the minutes to equal the work time and displays it in the html*
****************************************************************************************/
function updateMinutes() {
minutes = workTime;
$("#workTimeNum").html(workTime);
$("#min").html(workTime);
}
function formatSeconds(seconds) {
if (seconds < 10) {
seconds = "0" + seconds;
}
return seconds;
}
$(function() {
//sets the HTML contents
$("#downTimeNum").html(downTime);
$("#workTimeNum").html(workTime);
$("#min").html(workTime);
$("#downtimeTimer").toggleClass("inactive");
$("#workTimer").toggleClass("inactive");
$("#clock").toggleClass("inactive");
//changes the work time length
$("#increaseWorkTime").on("click", function() {
workTime += 1; //increments the work time by 1
updateMinutes();
});
$("#decreaseWorkTime").on("click", function() {
workTime -= 1; //decrements the work time by 1
if (workTime < 1) {
workTime = 1;
}
updateMinutes();
});
$("#increaseBreakTime").on("click", function() {
downTime += 1; //increments the down time by 1
$("#downTimeNum").html(downTime);
});
$("#decreaseBreakTime").on("click", function() {
downTime -= 1; //decrements the work time by 1
if (downTime < 0) {
downTime = 0;
}
$("#downTimeNum").html(downTime);
});
$("#start").on("click", function() {
//disables the reset button
$("#reset").prop("disabled", true);
init();
});
$("#pause").on("click", function() {
clearInterval(currentTime);
clearInterval(breakTimeLength);
paused = true;
// gets the attribute value of start
$("#start").prop("disabled", false);
//enables the reset button to work after the pause button has been pressed
$("#reset").prop("disabled", false);
});
$("#reset").on("click", function() {
//reset button needs to change the time to equal the work time value
//make the timer minutes equal the worktime
$("#min").html(workTime);
// make the timer seconds equal "00"
$("#sec").html("00");
//the seconds have to be reset to reflect the initial value
seconds = 59;
//the minutes have to be reset to reflect the intial value
minutes = workTime;
//set pause, so that it doesn't equal true when the time is reset
paused = false;
$("#downtimeTimer").removeClass("active inactive");
$("#workTimer").removeClass("active inactive");
$("#downtimeTimer").addClass("inactive");
$("#workTimer").addClass("inactive");
});
});
/*******************************************************************************
* intializes the time clock *
*******************************************************************************/
function init() {
$("#start").prop("disabled", true);
$("#sec").html(seconds);
if (paused === false) {
minutes -= 1;
$("#min").html(minutes);
$("#workTimer").toggleClass("active inactive");
}
//set pause to false
paused = false;
workTimeLength = window.setInterval(workTimeTimer, 1000); //set's the work Time
currentTime = workTimeLength;
};
function workTimeTimer() {
seconds -= 1;
if (seconds < 0) {
seconds = 59;
minutes -= 1;
$("#min").html(minutes);
}
if (minutes <= 0 && seconds <= 0) {
//plays the alarm after the work time has elasped
timerAlarm.play();
$("#workTimer").toggleClass("active inactive");
clearInterval(workTimeLength); //clears the timer
currentTime = breakTimeLength;
downTimeTimerInit();
}
//gets the formatted seconds and displays them
$("#sec").html(formatSeconds(seconds));
}
//initalizes the down time clock
function downTimeTimerInit() {
$("#downtimeTimer").toggleClass("active inactive");
minutes = $("#downTimeNum").html() - 1;
$("#min").html(minutes);
seconds = 59;
breakTimeLength = window.setInterval(downTimeTimer, 1000);
}
function downTimeTimer() {
seconds -= 1;
if (seconds < 0) {
seconds = 59;
minutes -= 1;
$("#min").html(minutes);
}
if (minutes <= 0 && seconds <= 0) {
timerAlarm.play();
$("#downtimeTimer").toggleClass("active inactive");
clearInterval(breakTimeLength);
minutes = $("#workTimeNum").html();
seconds = 59;
init();
}
$("#sec").html(formatSeconds(seconds));
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body {
margin: 0;
padding: 0;
background-color: #6a7275;
background-image: url("https://www.transparenttextures.com/patterns/brick-wall-dark.png");
background-attachment: fixed;
}
#heading {
text-align: center;
background-color: black;
color: white;
border: 3px solid white;
margin-bottom: 20px;
margin-top: 5px;
font-family: 'Permanent Marker', cursive;
padding-bottom: 10px;
-webkit-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
}
.inactive {
background-color: darkcyan;
}
.active {
background-color: cyan;
animation-name: scale;
animation-duration: 2s;
animation-iteration-count: infinite;
/*animation-direction: alternate;*/
}
@keyframes scale {
0% {
transform: scale(1);
box-shadow: 1px 0px 11px 6px rgba(1, 1, 1, 0.75);
}
25% {
transform: rotate(10deg);
}
50% {
transform: scale(1.1);
box-shadow: 5px 4px 15px 10px rgba(255, 255, 255, 0.75);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: scale(1);
background-color: darkcyan;
box-shadow: 1px 0px 11px 6px rgba(1, 1, 1, 0.75);
}
}
#workTimer {
width: 250px;
height: 250px;
color: black;
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border-radius: 50%;
-webkit-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
}
#downtimeTimer {
width: 250px;
height: 250px;
color: black;
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border-radius: 50%;
-webkit-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
}
.subheadings {
font-size: 20px;
font-weight: bold;
text-align: center;
}
button {
display: inline-block;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
position: relative;
top: 7px;
color: black;
}
.ghost {
background-color: transparent;
border-color: black;
background: white;
}
.green {
margin-top: 50px;
}
#clock {
height: 400px;
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
border: 5px solid #000;
background-size: 100%;
border-radius: 50%;
-webkit-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
}
#time {
color: black;
font-weight: bold;
padding-top: 20px;
}
.clockText {
display: inline-block;
padding-top: 30px;
color: black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment