Pomodoro Clock
About this app
Pomodoro Clock - A productivity app for managing work and break sessions.
Pomodoro Clock Pomodoro Clock Break Length 5 Session Length 25 Session 25:00
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pomodoro Clock</title>
<meta name="description" content="Pomodoro Clock - A productivity app for managing work and break sessions.">
<meta name="keywords" content="pomodoro, productivity, timer, clock, work, break">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
// App Javascript Goes Here
// Constants
const WORK_DURATION = 25 * 60; // 25 minutes in seconds
const BREAK_DURATION = 5 * 60; // 5 minutes in seconds
// State
let timerState = "stopped"; // Values: "stopped", "running", "paused"
let timerId = null;
let sessionDuration = WORK_DURATION;
let breakDuration = BREAK_DURATION;
// UI Elements
const $breakLabel = $("#break-label");
const $sessionLabel = $("#session-label");
const $breakDecrement = $("#break-decrement");
const $breakIncrement = $("#break-increment");
const $sessionDecrement = $("#session-decrement");
const $sessionIncrement = $("#session-increment");
const $breakLength = $("#break-length");
const $sessionLength = $("#session-length");
const $timerLabel = $("#timer-label");
const $timeLeft = $("#time-left");
const $startStop = $("#start_stop");
const $reset = $("#reset");
const $beep = $("#beep");
function updateUI() {
$breakLength.text(breakDuration);
$sessionLength.text(sessionDuration);
$timeLeft.text(formatTime(sessionDuration));
if (timerState === "stopped") {
$startStop.html('<i class="fa fa-play"></i>');
} else if (timerState === "running") {
$startStop.html('<i class="fa fa-pause"></i>');
} else if (timerState === "paused") {
$startStop.html('<i class="fa fa-play"></i>');
}
}
function formatTime(duration) {
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function startTimer() {
timerId = setInterval(function() {
sessionDuration--;
$timeLeft.text(formatTime(sessionDuration));
if (sessionDuration === 0) {
$beep[0].play();
clearInterval(timerId);
if ($timerLabel.text() === "Session") {
sessionDuration = breakDuration;
$timerLabel.text("Break");
} else {
sessionDuration = sessionDuration = WORK_DURATION;
$timerLabel.text("Session");
}
startTimer();
}
}, 1000);
}
function stopTimer() {
clearInterval(timerId);
}
$breakDecrement.on("click", function() {
if (breakDuration > 1) {
breakDuration--;
updateUI();
}
});
$breakIncrement.on("click", function() {
if (breakDuration < 60) {
breakDuration++;
updateUI();
}
});
$sessionDecrement.on("click", function() {
if (sessionDuration > 60) {
sessionDuration--;
updateUI();
}
});
$sessionIncrement.on("click", function() {
if (sessionDuration < 60) {
sessionDuration++;
updateUI();
}
});
$startStop.on("click", function() {
if (timerState === "stopped") {
timerState = "running";
startTimer();
} else if (timerState === "running") {
timerState = "paused";
stopTimer();
} else if (timerState === "paused") {
timerState = "running";
startTimer();
}
updateUI();
});
$reset.on("click", function() {
timerState = "stopped";
stopTimer();
sessionDuration = WORK_DURATION;
breakDuration = BREAK_DURATION;
$timerLabel.text("Session");
updateUI();
$beep[0].pause();
$beep[0].currentTime = 0;
});
updateUI();
});
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Lato', sans-serif;
background-color: #f1f1f1;
}
h1 {
text-align: center;
margin-top: 40px;
font-weight: 700;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.row {
margin-bottom: 20px;
}
.col-6 {
text-align: center;
}
.label {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #333;
margin-bottom: 5px;
}
.length {
font-size: 48px;
font-weight: 700;
color: #333;
}
.timer-label {
font-size: 24px;
font-weight: 700;
text-align: center;
margin-bottom: 10px;
}
.timer {
font-size: 72px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.timer-controls {
text-align: center;
}
.timer-controls button {
background-color: transparent;
border: none;
font-size: 24px;
color: #333;
padding: 10px;
cursor: pointer;
}
.timer-controls button:hover {
color: #666;
}
.start-stop {
font-size: 36px;
color: #333;
padding: 10px;
cursor: pointer;
}
.start-stop i {
transition: transform 0.2s;
}
.start-stop:hover i {
transform: scale(1.1);
}
.reset {
font-size: 24px;
color: #333;
padding: 10px;
cursor: pointer;
}
.reset:hover {
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>Pomodoro Clock</h1>
<div class="row">
<div class="col-6">
<div class="label" id="break-label">Break Length</div>
<div class="timer-controls">
<button id="break-decrement"><i class="fa fa-minus"></i></button>
<span class="length" id="break-length">5</span>
<button id="break-increment"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-6">
<div class="label" id="session-label">Session Length</div>
<div class="timer-controls">
<button id="session-decrement"><i class="fa fa-minus"></i></button>
<span class="length" id="session-length">25</span>
<button id="session-increment"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="timer-label" id="timer-label">Session</div>
<div class="timer" id="time-left">25:00</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="timer-controls">
<button class="start-stop" id="start_stop"><i class="fa fa-play"></i></button>
<button class="reset" id="reset"><i class="fa fa-refresh"></i></button>
<audio id="beep" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav" preload="auto"></audio>
</div>
</div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!