Pomodoro Clock

Developer
Size
3,705 Kb
Views
14,168

How do I make an pomodoro clock?

What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Pomodoro Clock Previews

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="container"> <div class="row"> <h1 class="col-xs-12">Pomodoro Clock</h1> </div> <section class="row"> <article class="break col-xs-6 btns"> <h4>Break Length</h4> <div class="row"> <div class="col-xs-6 col-xs-offset-3"> <button class="in btn btn-primary" id="increaseBreak">+</button> <p class="in" id="break">5</p> <button class="in btn btn-primary" id="decreaseBreak">-</button> </div> </div> </article> <article class="worktime col-xs-6 btns"> <h4>Work Length</h4> <div class="row"> <div class="col-xs-6 col-xs-offset-3"> <button class="in btn btn-primary" id="increaseWork">+</button> <p class="in" id="work"> 25 </p> <button class="in btn btn-primary" id="decreaseWork">-</button> </div> </div> </article> </section> <section class="row"> <div class="col-xs-6 col-xs-offset-3 display"> <p class="title">Worktime</p> <span class="timer">25</span></div> </section> <section class="row"> <div class="col-xs-4 col-xs-offset-4 btns"> <button class="btn btn-success" id="startpause">Start</button> <button class="btn btn-danger" id="reset">Reset</button> </div> </section> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { background: #51B7FF;
}
h1 { text-align: center; font-size: 5em;
}
@media screen and (max-width: 570px) { h1 { font-size: 3em; }
}
.wrapper { padding: 4em;
}
.display { font-size: 3em; text-align: center;
}
@media screen and (max-width: 570px) { .display { font-size: 2em; }
}
.timer { font-size: 3em;
}
@media screen and (max-width: 570px) { .timer { font-size: 2em; }
}
.btns { text-align: center;
}
.btn { margin-left: 1em; margin-right: 1em; margin-top: 1em;
}
.in { display: block; margin: 0.4em auto;
}
@media screen and (min-width: 770px) { .in { display: inline-block; margin: 0.4em 0.6em; }
}
#break, #work { font-size: 1.4em;
}
.blink { -webkit-animation-name: blinker; animation-name: blinker; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 2; animation-iteration-count: 2;
}
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }
}
@keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }
}

Pomodoro Clock - Script Codes JS Codes

$(document).ready(function() { // vars var counTime = 25; var breakTime = 5; var pause = false; var minutes = 25; var seconds = 0; var working; var sound = new Audio('http://soundbible.com/grab.php?id=1477&type=mp3'); // add the trailing 0s to the timer $('.timer').html(minutes + ":00"); // play the sound function bell() { sound.play(); } function countdown() { // do when timer runs out if (minutes === 0 && seconds < 3) { // play a sound, blink the timer bell(); $('.timer').addClass('blink'); } // end if if (minutes === 0 && seconds === 0) { if ($('.title').text() === 'Worktime') { // change the title to Break $('.title').text('Break'); // remove the blink class from the timer $('.timer').removeClass('blink'); minutes = breakTime; $('.timer').html(minutes + ":0" + seconds); } else if ($('.title').text() === 'Break') { // change the title to Worktime $('.title').text('Worktime'); // remove the blink class from the timer $('.timer').removeClass('blink'); minutes = counTime; $('.timer').html(minutes + ":0" + seconds); } // end if } else { if (seconds === 0) { // when seconds reaches 0 reset the seconds to 60 and decrement minutes by 1 seconds = 60; minutes-- } // end if seconds--; if (seconds < 10) { // if seconds are less then 10 then add a leading 0 to the seconds $('.timer').html(minutes + ":0" + seconds); } else { // if seconds are 10 or more then skip the leading 0 $('.timer').html(minutes + ":" + seconds); } // end if } // end if } // end countdown(); $('#decreaseBreak').on('click', function() { if (pause === false) { if (breakTime > 1) { breakTime--; $("#break").html(breakTime); $('.title').text('Worktime'); $(".timer").html(counTime + ":00"); // reset times seconds = 0; minutes = counTime; } // end if } // end if }); // end click function $('#increaseBreak').on('click', function() { if (pause === false) { breakTime++; $("#break").html(breakTime); $('.title').text('Worktime'); $(".timer").html(counTime + ":00"); // reset times seconds = 0; minutes = counTime; } // end if }); // end click function $('#decreaseWork').on('click', function() { if (pause === false) { if (counTime > 1) { counTime--; $("#work").html(counTime); $(".timer").html(counTime + ":00"); $('.title').text('Worktime'); // reset times seconds = 0; minutes = counTime; } // end if } // end if }); // end click function $('#increaseWork').on('click', function() { if (pause === false) { counTime++; $("#work").html(counTime); $(".timer").html(counTime + ":00"); $('.title').text('Worktime'); // reset times seconds = 0; minutes = counTime; } // end if }); // end click function $('#startpause').on('click', function() { // start the timer if (pause === false) { working = setInterval(countdown, 1000); pause = true; $('#startpause').removeClass('btn-success').addClass('btn-warning').text("Pause"); } else if (pause === true) { // pause the timer clearInterval(working); pause = false; $('#startpause').removeClass('btn-warning').addClass('btn-success').text("Start"); } // end if }); // end #startpause click event // reset the timer $('#reset').on('click', function() { if (pause === false) { $("#work").html(counTime); $(".timer").html(counTime + ":00"); $('.title').text('Worktime'); // reset times seconds = 0; minutes = counTime; } // end if }); // end #reset click event
}); // end document rdy function
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 3,705 Kb
Views 14,168
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!

Fred Hawk (osycon) Script Codes
Create amazing web content 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!