Pomodoro Clock

Developer
Kevin
Size
4,580 Kb
Views
36,432
  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?

What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Kevin on 27 August 2022, Saturday.

Pomodoro Clock Previews
IQ Test

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link href='https://fonts.googleapis.com/css?family=Cabin:400,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <audio id="breakTriangle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/breakTriangle.wav"></audio>
<audio id="pomodoroTriangle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/pomodoroTriangle.wav"></audio>
<div class="main-body"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="row set-boxes"> <div class="col-xs-6 text-center right-border"> <h1 class="set-box-title">Break</h1> <div class="break-box"> <button id="breakMinus">-</button> <h1 id="breakDuration">5</h1> <button id="breakPlus">+</button> </div> </div> <div class="col-xs-6 text-center left-border"> <h1 class="set-box-title">Pomodoro</h1> <div class="pomodoro-box"> <button id="pomodoroMinus">-</button> <h1 id="pomodoroDuration">25</h1> <button id="pomodoroPlus">+</button> </div> </div> </div> </div> <div class="col-md-6 col-md-offset-3"> <div class="row clock-box text-center"> <div class="button-box"> <div class="button-wrapper"> <button id="stop" class="btn btn-primary"><span class="glyphicon glyphicon-stop" aria-hidden="true"></button> <button id="start" class="btn btn-primary"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button> </div> </div> <div class="col-xs-6 filler right-border"> </div> <div class="col-xs-6 filler left-border"> </div> <div class="col-xs-12"> <div class="clock-wrapper"> <div id="clock"> <h1 id="clockTime">25:00</h1> </div> </div> </div> <div class="col-xs-6 filler right-border"> </div> <div class="col-xs-6 filler left-border"> </div> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { font-family: 'Cabin', sans-serif; font-weight: 700; background-color: #263434; color: #111;
}
.button-wrapper { display: inline-block; padding: 10px; border-style: solid; border-width: 0 16px 16px 16px; border-color: #263434;
}
.button-box button { background-color: #117F7F; color: #111;
}
.button-box button span { position: inherit; font-size: 20px; font-weight: 700; padding: 5px 0 5px 0;
}
#start { margin-left: 8px;
}
.button-box button:hover,
.button-box button:focus,
.button-box button:active { background-color: #263434;
}
.main-body { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
h1 { font-family: 'Cabin', sans-serif; font-weight: 700;
}
.pomodoro-box > button,
.pomodoro-box > h1,
.break-box > button,
.break-box > h1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 30px; font-family: 'Cabin', sans-serif; font-weight: 700;
}
@media (max-width: 480px) { .set-box-title { font-size: 30px; }
}
.set-boxes button { background-color: rgba(255, 255, 255, 0); outline-width: 0; border: none; text-decoration: none; width: 40px; height: 40px; margin: 0 5px 0 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;
}
#clock { position: relative; background-color: #D41C1C; height: 300px; width: 300px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.clock-wrapper { display: inline-block; padding: 0px; border-radius: 50%; border: solid 16px #263434;
}
.clock-box { background-color: #376737;
}
.filler { height: 20px; margin: -1px 0 -1px 0;
}
#clockTime { color: #ddd; margin: 0; font-family: monospace; font-size: 50px;
}
.pomodoro-box,
.break-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.right-border { border-right: solid 8px #263434;
}
.left-border { border-left: solid 8px #263434;
}
.set-boxes { background-color: #117F7F; margin-bottom: 15px;
}

Pomodoro Clock - Script Codes JS Codes

$(document).ready(function() { var breakBoolean = false; //Boolean value to check it the timer is on the break or pomodoro. var startTime; var timer; var breakDuration = 300; //Default break duration, 5 minutes. var pomodoroDuration = 1500; //Default pomodoro duration, 25 minutes. var timerDuration = 1500; //Duration of the timer, swaps values between breakDuration, pomodoroDuration, and countDowns time when paused. var countDown = 1500; //Time remaining / var elapsedTime = 0; var startPause = false; //This is my personal temporary solution for retaining accessibility while maintining the ability to remove outlines. The outline width is set to 0 for buttons in the CSS. This resets the outline when the tab key is pressed for those that are not able to use a mouse. I need to look into alternative methods. $(document).on('keydown', function(e) { if (e.keyCode === 9 || e.which === 9) { $('button').css('outline-width', '1px'); }; }); $('#breakMinus').on('click', function() { if (breakDuration > 60) { breakDuration -= 60; $('#breakDuration').html(breakDuration / 60); }; }); $('#breakPlus').on('click', function() { breakDuration += 60; $('#breakDuration').html(breakDuration / 60); }); $('#pomodoroMinus').on('click', function() { if (pomodoroDuration > 60) { pomodoroDuration -= 60; timerDuration = pomodoroDuration; elapsedTime = 0; setClock(); $('#pomodoroDuration').html(pomodoroDuration / 60); }; }); $('#pomodoroPlus').on('click', function() { pomodoroDuration += 60; timerDuration = pomodoroDuration; elapsedTime = 0; setClock(); $('#pomodoroDuration').html(pomodoroDuration / 60); }); function setClock() { $('#clockTime').html(timerDuration / 60 + ':00') }; function startClock() { startTime = new Date().getTime(); clearInterval(timer); timer = setInterval(function() { var currentTime = new Date().getTime() - startTime; elapsedTime = Math.floor(currentTime / 1000); countDown = timerDuration - elapsedTime; var minutes = Math.floor(countDown / 60); var seconds = countDown % 60; if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } $('#clockTime').html(minutes + ":" + seconds); console.log(countDown); if (countDown === 0) { if (breakBoolean === false) { $('#breakTriangle')[0].play(); timerDuration = breakDuration; breakBoolean = true; startClock(); } else { $('#pomodoroTriangle')[0].play(); timerDuration = pomodoroDuration; breakBoolean = false; startClock(); } } }, 1000); } $('#start').on('click', function() { if (startPause === false) { startClock(); startPause = true; $(this).html('<span class="glyphicon glyphicon-pause" aria-hidden="true">'); } else { clearInterval(timer); timerDuration = countDown; startPause = false; $(this).html('<span class="glyphicon glyphicon-play" aria-hidden="true"></span>') } }); $('#stop').on('click', function(){ clearInterval(timer); timerDuration = pomodoroDuration; startPause = false; $('#start').html('<span class="glyphicon glyphicon-play" aria-hidden="true"></span>'); setClock(); });
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 4,580 Kb
Views 36,432
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!

Kevin (KevinBruland) Script Codes
Name
Canvas Snow
Experimenting1
A Pen by Kevin
Twitch
Canvas Mouse Position Radial Gradient
Local Weather
CSS Zen Garden Template
Canvas Optical Illusion
Canvas Spiral Loader
Canvas Circle Illusion
Create amazing blog posts 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!