JavaScript: Pomodoro Clock

Demo: Pomodoro Clock

HTML Code:

<body>
<div class="header">
<h1>Pomodoro Timer</h1>
<h2>A Free Code Camp Student Project</h2>
</div>
<div class=container>
<div class=controls>
<div class="breakControl">
<div class="breakUp btn btn-primary">&#8679</div>
<div class="breakTime">5</div>
<div class="breakDown btn btn-primary">&#8681</div>
</div>
<div class="sessionControl">
<div class="sessionUp btn btn-primary">&#8679</div>
<div class="sessionTime">5</div>
<div class="sessionDown btn btn-primary">&#8681</div>
</div>
</div>
</div>
<div class="clock">
<div class="clockDisplay btn">Timer</div>
</div>
<h3 class="intervalType">Select Break and Session Intervals - Click On Timer to Start</h3>

</body>

CSS Code:

body{
text-align: center;
font-weight: bold;
font-family:"Garamond";
background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
background-size: 100%;
}

.header{
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
color:white;
}
.controls{
z-index: 2;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
padding-bottom:20px;
top: 40px;
color: white;
}

.sessionControl{
cursor:pointer;
float:right;
padding-top: 5px;
}

.breakControl{
cursor:pointer;
float:left;
padding-top: 5px;
}

.breakUp{
box-shadow: inset -1px -6px 12px 1px blue;
}
.breakDown{
box-shadow: inset -1px -6px 12px 1px blue;
}

.sessionUp{
box-shadow: inset -1px -6px 12px 1px blue;
}
.sessionDown{
box-shadow: inset -1px -6px 12px 1px blue;
}

.sessionLabel{
padding-top: 5px;
}

.breakLabel{
padding-top: 5px;
}

.clock{
margin: auto;
position:relative;
bottom:20px;
top: 20px;
// z-index: 1;
width: 370px;
height: 150px;
background: #99a3d8;
box-shadow: 1px 1px 20px 5px #b1b6ce, inset -1px -6px 12px 1px #ced3ef;
border-radius: 150px;
padding-top: 40px;
}

.clockDisplay{
cursor:pointer;
width: 200px;
height: 70px;
display: inline-block;
font-size: 36px;
font-weight: bold;
background: yellow;
color: black;
box-shadow: inset -1px -1px 6px 1px yellow;
}

.intervalType{
font-size: 18px;
font-weight: bold;
color: white;
padding-top: 40px;
}

JavaScript Code:

$(document).ready(function() {

var buzzer = new Audio('http://dragoncoin.com/piano/bellsound.mp3');

$clockDisplay=$(".clockDisplay");
$controls=$(".controls");
$breakUp=$(".breakUp");
$breakDown=$(".breakDown");
$breakTime=$(".breakTime");
$sessionUp=$(".sessionUp");
$sessionDown=$(".sessionDown");
$sessionTime=$(".sessionTime");
$intervalType=$(".intervalType");
$header=$(".header");

var flag=false;
var breakTime=parseInt($breakTime.html());
var sessionTime=parseInt($sessionTime.html());
var clockDisplay=parseInt($clockDisplay.html());
var count, breakCount;
var counter, counter2;

// Start the count-down when the clock is clicked
$clockDisplay.click (function(){
if (flag==false){
count=sessionTime*60;
startTimer();
} else {
// breakCount=breakTime;
stopTimer();
}
})

function startTimer(){
buzzer.play();
$header.hide();
$intervalType.html("Session in Progress...");
$clockDisplay.css("background",'green');
// buzzer.play();
flag=true;
$controls.hide();
counter=setInterval(timer,1000);
function timer(){
count-=1;
if (count==0){
clearInterval(counter);
breakCount=breakTime*60;
breakTimer();
}
// $clockDisplay.html(count);
updateDisplay(count);
}
}

function stopTimer(){
buzzer.play();
count=sessionTime;
breakCount=breakTime;
$intervalType.html("");
$clockDisplay.css("background",'yellow');
updateDisplay(sessionTime*60);
$controls.show();
// $header.show();
clearInterval(counter);
clearInterval(counter2);
flag=false;
}

function breakTimer(){
buzzer.play();
$intervalType.html("Break Time In Progress...");
$clockDisplay.css("background",'yellow');
counter2=setInterval(timer,1000);
function timer(){
breakCount-=1;
if (breakCount==0){
clearInterval(counter2);
count=sessionTime*60;
startTimer();
}
updateDisplay(breakCount);
}
}

// Controls for Session Length
$sessionDown.click(function() {
if (+$sessionTime.text() > 5) {
clockDisplay=sessionTime-=5;
count=sessionTime*60;
$sessionTime.text(sessionTime);
$clockDisplay.html("Sessions");
// $clockDisplay.text(clockDisplay);
}
});

$sessionUp.click(function() {
sessionTime+=5;
count=sessionTime*60;
$sessionTime.text(sessionTime);
$clockDisplay.html("Sessions");
// $clockDisplay.text(clockDisplay);
});

// Controls for Break Length
$breakDown.click(function() {
if (+$breakTime.text() > 5) {
breakTime-=5;
breakCount=breakTime*60;
$breakTime.html(breakTime);
$clockDisplay.html("Breaks");
}
});

$breakUp.click(function() {
breakTime+=5;
breakCount=breakTime*60;
$breakTime.html(breakTime);
$clockDisplay.html("Breaks");
});

// This function displays a formatted time value on screen
function updateDisplay(t) {
var hours = Math.floor(t / 3600);
t -= hours * 3600;
var minutes = Math.floor(t / 60);
t -= minutes * 60;
var seconds = Math.floor(t);
var clock = formatDigit(hours) + ':' + formatDigit(minutes) + ':' + formatDigit(seconds);
$clockDisplay.html(clock);
// console.log(clock);
}

// format the time to always show two digits
function formatDigit(x){
return ("0" + x).slice(-2);
}

}) // Ends document.ready.function

Leave a Reply

Your email address will not be published. Required fields are marked *