Pomodoro Clock

Developer
Sam Koshy
Size
5,358 Kb
Views
10,120
  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?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/VemPZX.. What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<div class="topBar"> <div class="topSlice1"></div>
</div>
<div class="topSlice2"></div> <!--added since spacing of title was different in chrome and firefox browsers-->
<div class="topSlice3"></div> <!--added since spacing of title was different in chrome and firefox browsers-->
<div class="topRight"></div>
<div class="title"> <h1 style="font-family: 'Oswald', sans-serif;">Pomodoro Timer</h1>
</div>
<br>
<br>
<br>
<div> <div class="Rtop1"></div> <div class="Rtop2"></div>
</div>
<div style="font-family: 'Oswald', sans-serif;"> <div class="R1"> <p>LCARS 23744</p> </div> <div class="R2"> <p>01-23847</p> </div> <div class="R3"></div> <div class="R4"></div> <div class="R5"></div> <div class="R6"></div> <div class="R7"></div> <div class="R8"></div>
</div>
<div style="font-family: 'Oswald', sans-serif"> <div class="B1"> <p>06-84920</p> </div> <div class="B2"> <p>05-25374</p> </div> <div class="B3"> <p>04-16493</p> </div> <div class="B4"> <p>03-26749</p> </div> <div class="B5"> <p>02-32437</p> </div> <div class="B6"></div> <div class="B7"></div> <div class="B8"></div> <div class="B9"></div> <div class="B10"></div> <div class="B11"></div> <div class="B12"></div> <div class="B13"></div> <div class="B14"></div>
</div>
<div class="clock" style="font-family: 'Oswald', sans-serif;"> <span class="progressBar"></span> <h2 id="clockTitle">Session</h2> <h1 id="runTime">25:00</h1> <p><i class="fa fa-refresh fa-3x"></i></p>
</div>
<div class="session" style="font-family: 'Oswald', sans-serif;"> <h1>Session<br> Length</h1> <div class="sessionPillplus"> <p><i class="fa fa-plus-square fa-2x session-plus"></i></div> <span id="sessionFont">25</span> <br> <div class="sessionPillminus"> <i class="fa fa-minus-square fa-2x session-minus"></i> </div> </p>
</div>
<div class="break" style="font-family: 'Oswald', sans-serif;"> <h1>Break <br> Length</h1> <div class="breakPillplus"> <p><i class="fa fa-plus-square fa-2x break-plus"></i> </div> <span id="breakFont"> 5</span> <div class="breakPillminus"> <i class="fa fa-minus-square fa-2x break-minus"></i></div> </p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { background: rgb(0, 0, 0); height: 100%;
}
.topBar { position: absolute; width: 593px; height: 58px; background-color: rgb(255, 174, 0); border-radius: 500px 0 0 500px; //z-index: -1; margin-top: 32px; margin-left: 250px;
}
.topSlice1 { position: relative; width: 13px; height: 58px; margin-left: 93px; background-color: rgb(0, 0, 0);
}
.topSlice2 { position: absolute; width: 2px; height: 58px; margin-left: 1270px; background-color: rgba(255, 174, 0, 0.4); margin-top: 32px;
}
.topSlice3 { position: absolute; width: 2px; height: 58px; margin-left: 1275px; background-color: rgba(255, 174, 0, 0.6); margin-top: 32px;
}
.topRight { position: absolute; width: 93px; height: 58px; margin-left: 1280px; margin-top: 32px; background-color: rgb(255, 174, 0); border-radius: 0 500px 500px 0;
}
.title { position: absolute; color: rgb(147, 222, 245); font-size: 200%; margin-left: 850px; margin-right: -502px; margin-top: -30px;
}
.Rtop1 { position: absolute; z-index: 1; width: 30px; height: 30px; background-color: rgb(0, 0, 0); margin-top: 48px; border-radius: 0 0 0 45%; margin-left: 120px;
}
.Rtop2 { position: absolute; z-index: 1; width: 373px; height: 19px; background-color: rgb(0, 0, 0); margin-top: 59px; margin-left: 138px;
}
.R1 { position: absolute; width: 120px; height: 70px; background-color: rgb(194, 76, 76); margin-top: -55px;
}
.R1 p { position: relative; margin-top: 45px; float: right; margin-right: 3px;
}
.R2 { position: absolute; width: 120px; height: 78px; background-color: rgb(153, 153, 255); margin-top: 20px; border-radius: 0 0 0 60%;
}
.R2 p { position: relative; margin-top: 3px; float: right; margin-right: 3px;
}
.R3 { position: absolute; width: 400px; height: 30px; background-color: rgb(153, 153, 255); margin-top: 68px; margin-left: 90px; //border-radius:40% 0 0 0;
}
.R4 { position: absolute; width: 20px; height: 20px; background-color: rgb(87, 121, 158); margin-top: 78px; margin-left: 494px;
}
.R5 { position: absolute; width: 125px; height: 20px; background-color: rgb(180, 143, 189); margin-top: 78px; margin-left: 518px;
}
.R6 { position: absolute; width: 330px; height: 20px; background-color: rgb(180, 143, 189); margin-top: 78px; margin-left: 647px;
}
.R7 { position: absolute; width: 210px; height: 20px; background-color: rgb(153, 164, 247); margin-top: 78px; margin-left: 981px;
}
.R8 { position: absolute; width: 232px; height: 20px; background-color: rgb(240, 189, 143); margin-top: 78px; margin-left: 1195px;
}
.B1 { position: absolute; width: 120px; height: 160px; background-color: rgb(153, 164, 247); margin-top: 700px;
}
.B1 p { position: relative; margin-top: 5px; float: right; margin-right: 3px;
}
.B2 { position: absolute; width: 120px; height: 40px; background-color: rgb(250, 250, 250); margin-top: 655px;
}
.B2 p { position: relative; margin-top: 10px; float: right; margin-right: 3px;
}
.B3 { position: absolute; width: 120px; height: 190px; background-color: rgb(240, 189, 143); margin-top: 460px;
}
.B3 p { position: relative; margin-top: 165px; float: right; margin-right: 3px;
}
.B4 { position: absolute; width: 120px; height: 203px; background-color: rgb(180, 143, 189); margin-top: 252px;
}
.B4 p { position: relative; margin-top: 178px; float: right; margin-right: 3px;
}
.B5 { position: absolute; width: 120px; height: 138px; background-color: rgb(209, 107, 107); margin-top: 110px; border-radius: 70% 0 0 0;
}
.B5 p { position: relative; margin-top: 113px; float: right; margin-right: 3px;
}
.B6 { position: absolute; width: 191px; height: 35px; background-color: rgb(209, 107, 107); margin-top: 110px; margin-left: 99px;
}
.B7 { position: absolute; width: 30px; height: 30px; background-color: rgb(0, 0, 0); margin-top: 130px; margin-left: 120px; border-radius: 70% 0 0 0;
}
.B8 { position: absolute; width: 180px; height: 16px; background-color: rgb(0, 0, 0); margin-top: 130px; margin-left: 139px;
}
.B9 { position: absolute; width: 200px; height: 20px; background-color: rgb(209, 107, 107); margin-top: 110px; margin-left: 289px;
}
.B10 { position: absolute; width: 20px; height: 20px; background-color: rgb(87, 121, 158); margin-top: 110px; margin-left: 494px;
}
.B11 { position: absolute; width: 124px; height: 14px; background-color: rgb(240, 189, 143); margin-top: 110px; margin-left: 518px;
}
.B12 { position: absolute; width: 330px; height: 20px; background-color: rgb(180, 143, 189); margin-top: 110px; margin-left: 647px;
}
.B13 { position: absolute; width: 210px; height: 20px; background-color: rgb(255, 174, 0); margin-top: 110px; margin-left: 981px;
}
.B14 { position: absolute; width: 232px; height: 20px; background-color: rgb(209, 107, 107); margin-top: 110px; margin-left: 1195px;
}
.clock { position: relative; width: 390px; height: 390px; border-radius: 50%; text-align: center; background: rgb(87, 121, 158); border: 40px solid; //border-color:rgb(255,141,13); border-color: rgb(240, 218, 129); box-shadow: 0 0 0 3px rgb(255, 255, 255); margin: 220px 340px; z-index: 1; overflow: hidden;
}
.clock h2 { position: relative; font-size: 250%; /*text-align: center; //line-height: 0; //margin-top:-250px;*/
}
.clock h1 { font-size: 920%; text-align: center; line-height: 28px;
}
.fa-refresh { position: relative; text-align: center;
}
.clock:hover { cursor: pointer;
}
.clock .progressBar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(180, 143, 189); z-index: -1; transform: scaleY(0.00001); transform-origin: 50% 100%; /*margin:0 auto; margin-top:150px;*/
}
.session { position: absolute; color: rgb(214, 214, 214); margin-top: -790px; margin-left: 1010px;
}
.session h1 { text-align: center; margin-left: -150px; margin-bottom: -5px;
}
#sessionFont { width:42px; display:inline-block; text-align:center; font-size: 250%;
}
.sessionPillplus { width: 120px; height: 50px; background-color: rgb(255, 174, 0); border-radius: 500px; margin-left: -40px;
}
.session-plus { position: absolute; text-align: center; margin: 9px auto; margin-left: 47px; color: rgb(0, 0, 0);
}
.sessionPillminus { width: 120px; height: 50px; background-color: rgb(191, 78, 78); border-radius: 500px; margin-right: 100px; margin-left: -40px;
}
.session-minus { position: absolute; text-align: center; margin: 9px auto; margin-left: 47px; color: rgb(0, 0, 0);
}
.session-plus:hover { cursor: pointer;
}
.session-minus:hover { cursor: pointer;
}
.break { position: absolute; color: rgb(214, 214, 214); margin-top: -790px; margin-left: 1100px; //margin-right:50px;
}
.break h1 { text-align: center; margin-left: -5px; margin-bottom: -5px;
}
#breakFont { width:100%; display:inline-block; text-align:center; font-size: 250%;
}
.breakPillplus { width: 120px; height: 50px; background-color: rgb(166, 158, 247); //(153,164,247); border-radius: 500px;
}
.break-plus { position: absolute; text-align: center; margin: 9px auto; margin-left: 47px; color: rgb(0, 0, 0);
}
.breakPillminus { width: 120px; height: 50px; background-color: rgb(255, 174, 0); border-radius: 500px;
}
.break-minus { position: absolute; text-align: center; margin: 9px auto; margin-left: 47px; color: rgb(0, 0, 0);
}
.break-plus:hover { cursor: pointer;
}
.break-minus:hover { cursor: pointer;
}
/*Following is used to prevent blue highlight when user selects divs*/
*,
*:before,
*:after { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /*chrome on android*/
}

Pomodoro Clock - Script Codes JS Codes

var mins = 25, secs = 0, TimeoutID = null, start, interval, delta, resetMins = mins, breakMins = 5, sessionLength = mins, scaleVal = 0.00001;
var snd1 = new Audio("http://www.trekcore.com/audio/toscomputer/tos_com_beep_3.mp3");
var snd2 = new Audio("http://www.trekcore.com/audio/toscomputer/tos_intercom_whistle.mp3");
/**************************************************************************/
/**************************************************************************/
/**************************************************************************/
function updateClock() { if (secs >= 10 && mins >= 0) { scaleVal = ((resetMins * 60) - (mins * 60 + secs)) / (resetMins * 60); scaleString = "scaleY(" + scaleVal + ")"; $(".progressBar").css("transform", scaleString); //update fill by changing css delta = Date.now() - start; //accounts for the extra time it takes to run setTimeout .... also Date.now() is only accurate to milliseconds if (delta > 1000 && delta <= 2000) { interval = 2000 - delta; //since function takes a few millisecs to run, we subtract that from our interval } else if (delta > 2000) { if ((secs - Math.round(delta / 1000)) > 0) { //update secs if delta is large but check if update still leaves secs a positive number secs -= Math.round(delta / 1000); interval = 0; } else { if (mins > 0) { //so that we do not have the clock drifting to -1 mins mins -= 1; secs = 60 + (secs - Math.round(delta / 1000)); //if delta is large update the next mins and secs } interval = 0; } } else { interval = 1000; } if (secs >= 10) { document.getElementById("runTime").textContent = mins + ':' + secs; } else if (secs === 60) { document.getElementById("runTime").textContent = mins + ':00'; } else { document.getElementById("runTime").textContent = mins + ':0' + secs; } TimeoutID = setTimeout(updateClock, interval); //behavior of SetTimeout is more preditable than setInterval secs -= 1; start = Date.now(); /**************************************************************************/ } else if (secs < 10 && secs > 0 && mins >= 0) { scaleVal = ((resetMins * 60) - (mins * 60 + secs)) / (resetMins * 60); scaleString = "scaleY(" + scaleVal + ")"; $(".progressBar").css("transform", scaleString); //update fill delta = Date.now() - start; if (delta > 1000 && delta <= 2000) { interval = 2000 - delta; } else if (delta > 2000) { if ((secs - Math.round(delta / 1000)) > 0) { secs -= Math.round(delta / 1000); interval = 0; } else { if (mins > 0) { mins -= 1; secs = 60 + (secs - Math.round(delta / 1000)); } interval = 0; } } else { interval = 1000; } if (secs >= 10 && secs < 60) { document.getElementById("runTime").textContent = mins + ':' + secs; } else if (secs === 60) { document.getElementById("runTime").textContent = mins + ':00'; } else { document.getElementById("runTime").textContent = mins + ':0' + secs; } TimeoutID = setTimeout(updateClock, interval); secs -= 1; start = Date.now(); /**************************************************************************/ } else if (secs === 0 && mins > 0) { scaleVal = ((resetMins * 60) - (mins * 60 + secs)) / (resetMins * 60); scaleString = "scaleY(" + scaleVal + ")"; $(".progressBar").css("transform", scaleString); //update fill document.getElementById("runTime").textContent = mins + ':0' + secs; mins -= 1; delta = Date.now() - start; if (delta > 1000 && delta <= 2000) { interval = 2000 - delta; //since function takes a few millisecs to run, we subtract that from our interval secs = 59; } else if (delta > 2000) { secs = 60 - Math.abs(secs - Math.round(delta / 1000)); interval = 0; } else { interval = 1000; secs = 59; } TimeoutID = setTimeout(updateClock, interval); start = Date.now(); } else if (secs === 0 && mins === 0) { switch (document.getElementById("clockTitle").textContent) { case ("Session"): snd1.play(); //play sound at end of session //setTimeout(function(){snd.pause();},3000);//stop sound after 3 seconds break; case ("Break Time!"): snd2.play(); break; } scaleVal = ((resetMins * 60) - (mins * 60 + secs)) / (resetMins * 60); scaleString = "scaleY(" + scaleVal + ")"; $(".progressBar").css("transform", scaleString); //update fill document.getElementById("runTime").textContent = mins + ':0' + secs; if (document.getElementById("clockTitle").textContent == "Session") { setTimeout(function() { document.getElementById("clockTitle").textContent = "Break Time!" }, 1000); start = Date.now(); mins = breakMins; resetMins = breakMins; setTimeout(function() { $(".progressBar").css("background", "rgb(176,189,143)"); }, 1000); setTimeout(updateClock, 1000); } else { snd2.play(); //play sound at end of break setTimeout(function() { document.getElementById("clockTitle").textContent = "Session" }, 1000); start = Date.now(); mins = sessionLength; resetMins = sessionLength; setTimeout(function() { $(".progressBar").css("background", "rgb(180,143,189)"); }, 1000); setTimeout(updateClock, 1000); } } } /**************************************************************************/ /**************************************************************************/ /**************************************************************************/
$(document).ready(function() { $(".clock").click(function() { start = Date.now(); if (TimeoutID === null) { //document.getElementById("runTime").textContent = mins + ':' + secs; //starts on click without one second delay updateClock(); } else { clearTimeout(TimeoutID); //used to pause the setTimeout TimeoutID = null; //resets the interval to satisfy 'if' statement } }); $(".fa-refresh").click(function() { //reset clock start = Date.now(); mins = resetMins; secs = 0; updateClock(); }); $(".session-plus").click(function() { //reset clock mins += 1; secs = 0; resetMins = mins; sessionLength = mins; document.getElementById("runTime").textContent = mins + ':00'; document.getElementById("sessionFont").textContent = mins; }); $(".session-minus").click(function() { //reset clock if (mins > 0) { //safeguard against negative mins mins -= 1; secs = 0; resetMins = mins; sessionLength = mins; document.getElementById("runTime").textContent = mins + ':00'; document.getElementById("sessionFont").textContent = mins; } }); $(".break-plus").click(function() { //reset clock breakMins += 1; document.getElementById("breakFont").textContent = breakMins; }); $(".break-minus").click(function() { //reset clock if (breakMins > 0) { //safeguard against negative mins breakMins -= 1; document.getElementById("breakFont").textContent = breakMins; } });
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 5,358 Kb
Views 10,120
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!

Sam Koshy (codinger) Script Codes
Name
Tic Tac Toe _ Alternate
Tic Tac Toe
Local Weather App
Data Visualization - US GDP
Simon
Personal Portfolio Webpage
Random Quote Machine
A Pen by Sam Koshy
Twitchtv Status
Javascript Calculator
Create amazing Facebook ads 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!