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 |
Calcul | 3,248 Kb |
Weekly UI - Statue of liberty | 4,032 Kb |
A Pen by Fred Hawk | 2,201 Kb |
Weather App | 4,171 Kb |
Weekly UI - Mobile design sketches | 4,908 Kb |
Weekly UI - Dropbox Hero Component | 3,811 Kb |
Weekly UI - Airbnb Footer Component | 15,526 Kb |
Weekly UI - ToDo mobile design | 5,967 Kb |
Weekly UI - Stripe - Pricing section | 5,848 Kb |
Weekly UI - Paypal Navigation | 9,240 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 |
Wrap_Test | Mscfourn | 7,503 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
SVG Circle Progress | JMChristensen | 3,368 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!