Pomodoro Clock
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 - 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
Developer | Fred Hawk |
Username | osycon |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 3,705 Kb |
Views | 14,168 |
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!
Name | Size |
Collapsing Text Animation | 2,056 Kb |
Weekly UI - Invisionapp Sign up | 4,382 Kb |
Portfolio example FCC | 5,105 Kb |
A Pen by Fred Hawk | 2,201 Kb |
Lilli | 6,117 Kb |
Calcul | 3,248 Kb |
Weather App | 4,171 Kb |
Camper News | 3,606 Kb |
Pomodoro Clock | 3,705 Kb |
Weekly UI - Stripe - Pricing section | 5,848 Kb |
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!
Name | Username | Size |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Add This API | ThatGuySam | 2,848 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!