Pomodoro Clock

Developer
Devin
Size
5,289 Kb
Views
12,144
  1. Pomodoro Clock Previews
  2. Pomodoro Clock HTML Codes
  3. Pomodoro Clock CSS Codes
  4. Pomodoro Clock JS Codes

How do I make an pomodoro clock?

Created for the freecodecamp zipline: Build a Pomodoro Clock.. What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Devin on 23 November 2022, Wednesday.

Pomodoro Clock Previews
IQ Test

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1 class="text-center" id="title">~FreeCodeCamp~</h1>
<div class="container center-block"> <div class="row center-block"> <div class="body1"> <div class="row center-block text-center" id="options"> <div class="left-option col-md-4 col-md-offset-2"> <p>Break length</p> <div class="buttons"> <div class="subtraction" id="break-sub">~</div> <div class="value" id="break-value">5</div> <div class="addition" id="break-add">+</div> </div> </div> <div class="right-option col-md-4"> <p>Session length <p> <div class="buttons"> <div class="subtraction" id="session-sub">~</div> <div class="value" id="session-value">25</div> <div class="addition" id="session-add">+</div> </div> </div> </div> <div class="row center-block text-center"> <div class="main text-center"> <div class="time-tracker" id="time-tracker"> <h1 id="main-message">Session</h1> <h4 id="main-value">25</h4> <div class="progress"></div> </div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { background-color: #352F31; -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ /* Code pulled from http://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click */
}
#title { font-family: "lobster", cursive; font-size: 80px; color: #FFFFFF;
}
.left-option,
.right-option { display: inline-block; font-family: "raleway", sans-serif; font-size: 15px; color: #E886A4; line-height: 10px; padding-left: 50px; padding-right: 50px; padding-bottom: 25px;
}
.buttons div { display: inline-block; font-size: 30px; padding: 5px;
}
.subtraction,
.addition { cursor: pointer;
}
.main { position: absolute; top: 230px; left: 50%; right: 50%; margin-left: -130px;
}
.time-tracker { border: 3px solid #68001F; font-family: "raleway", sans-serif; border-radius: 50%; box-shadow:inset 0px 0px 4px 5px #352F31; height: 300px; width: 300px; padding-top: 50px; color: #FFFFFF; postion: absolute; top: 30px; cursor: pointer; overflow: hidden; z-index:1;
}
.time-tracker h1 { font-size: 50px;
}
.time-tracker h4 { font-size: 80px; padding-top: 40px;
}
.progress { background-color: #609732; height: 1000px; margin-top: 35px; position:relative; z-index:-1;
}
/* progress styling during break */
.progress-break{ background-color: #E81353; height: 1000px; position:relative; z-index:-1;
}
.active-timer{ border-color: #D9A0B1;
}

Pomodoro Clock - Script Codes JS Codes

var break_number = 5;
var session_number = 25;
/* sessionArray: stores all values inputed by - and + keys in session option,
will be a log to return the clock to the last set number at certain points. */
var sessionArray = [25];
var breakArray = [5];
var secondsLeft = 59;
/* Session may be taken out */
var session = false;
/* count: used to determine weather the clock is in break mode or session mode, see around line 130. */
var count = 0;
/* determines weather to restart the clock with 60 seconds or to continue it from its stoping place. */
var restart = false;
/* clock_function: Used to determine if the clock is going to start, is paused, or should resume. */
var clock_function = 0;
var startClock = "";
var timeLeftArray = [];
/* storing html elements in javascript variables for manipulation. */
var session_sub = document.getElementById( "session-sub");
var session_add = document.getElementById( "session-add");
var session_value = document.getElementById( "session-value");
var break_sub = document.getElementById( "break-sub");
var break_add = document.getElementById( "break-add");
var break_value = document.getElementById( "break-value");
var main_value = document.getElementById( "main-value");
var main_message = document.getElementById( "main-message");
var time_tracker = document.getElementById("time-tracker");
/* event listeners on the buttons and main circle. */
session_sub.addEventListener("click", subtractSessionLength);
session_add.addEventListener("click", addSessionLength);
break_sub.addEventListener("click", subtractBreakLength);
break_add.addEventListener("click", addBreakLength);
time_tracker.addEventListener("click", countDown)
/* setting clock */
function subtractSessionLength() { /* compares session_number to the last number in sessionArray */ checkCountingSession(); session_number -= 1; if(count != 1){ clearInterval(startClock); /* This is to make sure when setting the clock to a new time after one was allready set, that the clock starts counting down instead of being paused. */ clock_function = 0; } /* make sure that the clock starts again on a session and not a break. */ if(session = false){ //count = 2; } restart = true; /* prevents user from picking a negative value for their session */ if (session_number < 0) { session_number = 0; } session_value.innerHTML = session_number; /* do not change the main clock value to the session number unless in session. */ if(count != 1){ main_value.innerHTML = session_number; } sessionArray.push(session_number);
};
function addSessionLength() { checkCountingSession(); /* add one while in session or not, but do not stop clock if it is a break */ session_number += 1; if(count != 1){ clearInterval(startClock); clock_function = 0; } //count = 2; restart = true; /* the session_number should always be acurate with the last number in sessionArray */ session_value.innerHTML = session_number; if(count != 1){ main_value.innerHTML = session_number; } sessionArray.push(session_number);
};
function subtractBreakLength() { /* if count is 1 then make sure that the break number is accurate with the last number in breakArray */ checkCountingBreak(); break_number -= 1; if(count == 1){ clearInterval(startClock); secondsLeft = 59; clock_function = 0; } /* prevents user from picking a negative break */ if (break_number < 0) { break_number = 0; } break_value.innerHTML = break_number; if(count == 1){ main_value.innerHTML = break_number; } breakArray.push(break_number);
};
function addBreakLength() { checkCountingBreak(); break_number += 1; if(count == 1){ clearInterval(startClock); secondsLeft = 59; clock_function = 0; } break_value.innerHTML = break_number; if(count == 1){ main_value.innerHTML = break_number; } breakArray.push(break_number);
};
/* Time counting and looping */
function checkCountingSession(){ /* if the program has allready run a bit make sure the session_value doesnt jump by reseting the session number to the last value pushed into the sessionArray */ /* make sure this only runs when in session and not in a break */ if(session_number != sessionArray[sessionArray.length - 1]){ session_number = sessionArray[sessionArray.length - 1]; }
}
function checkCountingBreak(){ /* same for break number */ if(break_number != breakArray[breakArray.length - 1]){ break_number = breakArray[breakArray.length - 1]; }
}
function countDown() { session = true; if (session == true) { main_value.innerHTML = (session_number - 1).toString() + ":" + secondsLeft; } /* clear any previous set intervals of the clock */ clearInterval(startClock); /* make sure clock starts with 60 seconds only if the session number was changed. */ if(clock_function == 0 && restart == true){ secondsLeft = 60; console.log("meh") restart = false; } /* adding one to clock_function at 0 will make it 1, this runs the clock */ clock_function += 1; if(clock_function == 1){ /* will begin to run the clock if clock_function is 1 once every 1 second */ startClock = setInterval(clockTick, 1000); } else{ /* if clock_function is 2 then set it back to 0 which will induce clock to stop. This is since the interval was cleared and there are no setIntervals to re-initiate it. */ if(clock_function == 2){ clock_function -= 2; } }
};
function clockTick() { /* this is to make sure that a user changing the session number during the break time does not affect the break timer */ if(count == 1){ session_number = break_number; } /* if session_number doesn't = 0 then keep counting down */ /* session_number changes, this is why it must be compared to the last value in sessionArray when a user wants to change the session length */ if (session_number != 0) { secondsLeft -= 1; /* add a 0 onto seconds below 10 for readability and accuracy. */ if (secondsLeft < 10) { main_value.innerHTML = (session_number - 1).toString() + ":0" + secondsLeft; } else { /* else use the session number that isn't below 10 */ main_value.innerHTML = (session_number - 1).toString() + ":" + secondsLeft; } } /* when clock hits 15:-1 after 15:00 it will go down to 14:59. */ if (secondsLeft == -1) { secondsLeft = 59; if(count == 1){ /* for break time when session number is deliberately set to the break number */ break_number -= 1; } session_number -= 1; /* since 59 is not below 10 no need for an if else statement. */ main_value.innerHTML = (session_number - 1).toString() + ":" + secondsLeft; } if (session_number == 0) { /* The first time this code runs a break will happen since count will be 1. The second time count will be 2 and a session will resume again. */ count += 1 /* audio for when a break or session finishes */ var mp3 = 'http://www.oringz.com/oringz-uploads/4f_here-I-am.mp3'; var audio = new Audio(mp3); audio.play(); if (count == 1) { /* set the main clock number to be 0:00 for a split second. This is to avoid it showing -1:59 or some strange value when reaching 0. */ main_value.innerHTML = (0 + ":00"); main_message.innerHTML = ("Break!"); /* the session number is changed to be now used to count down break. */ break_number = breakArray[breakArray.length - 1]; /* make sure break number is the one set */ session_number = break_number; /* reset progress bar when a break begins, turn the color of the progress bar to a pickish hue. */ $(".progress").clearQueue(); $(".progress").stop(); $(".progress").css("margin-top", "31px"); $(".progress").addClass("progress-break"); $(".progress").queue(function () { $(".progress").animate({ marginTop: "-272px" }, break_number * 60000, 'linear'); $(".progress").dequeue(); }); $("#main-message").html("Break!"); } if (count == 2) { count = 0; console.log("2") main_value.innerHTML = (0 + ":00"); main_message.innerHTML = ("Session"); session_number = sessionArray[sessionArray.length - 1]; if(clock_function == 1){ $(".progress").clearQueue(); $(".progress").stop(); $(".progress").css("margin-top", "31px"); $(".progress").removeClass("progress-break"); $(".progress").queue(function () { $(".progress").animate({ marginTop: "-272px" }, session_number * 60000, 'linear'); $(".progress").dequeue(); }); } } }
};
$(document).ready(function() { /* every click will trigger an event on the main clock */ $("#time-tracker").click(function() { $(".progress").queue(function () { $(".progress").animate({ marginTop: "-272px" }, session_number * 60000, 'linear'); $(".progress").dequeue(); }); $("#time-tracker").addClass("active-timer"); if(clock_function == 0){ /* this code stops the progress until resuming clock. It does not clear the queue, however. This is to avoid having the progress bar take 60 miliseconds * x to reach the end of the remaining portion*/ $(".progress").clearQueue(); $(".progress").stop(); $("#time-tracker").removeClass("active-timer"); }; });
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 5,289 Kb
Views 12,144
Do you need developer help for Pomodoro Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Devin (edwin0258) Script Codes
Name
Snake
React Musical Scale Display
React Composer Widget
Country Generator
Streaming Dashboard
A Pen by Devin
Dungeon Crawler
Artist Card Widget
Calculator
Descriptive Tags
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!