In today’s fast-paced world, staying productive can be a challenge. The Pomodoro Technique, a time management method that breaks work into intervals (typically 25 minutes) separated by short breaks, has become a popular way to maintain focus and productivity. To make this technique even more effective, I’ve built a Customizable Pomodoro Timer with Soundscapes that not only helps you stay on track but also provides ambient sound options and exportable productivity stats.
In this blog, I’ll walk you through the development process, share the code, and explain how each component works. Whether you're a developer looking to build something similar or a productivity enthusiast curious about the inner workings, this blog has something for you.
Features of the Pomodoro Timer
- Customizable Timer: Adjust focus, short break, and long break durations.
- Ambient Soundscapes: Choose from rain, forest, ocean, or coffee shop sounds to enhance focus.
- Productivity Stats: Track completed sessions, total focus time, and your current streak.
- Exportable Stats: Export your productivity data as a text file for easy tracking.
- Responsive Design: Works seamlessly on both desktop and mobile devices.
Live Demo
You can try the app here: Pomodoro Timer with Soundscapes.
Code Walkthrough
Let’s dive into the code. The app is built using HTML, CSS, and JavaScript. Below, I’ll break down each part of the code and explain how it works.
HTML Structure
The HTML file sets up the structure of the app. It includes:
- A timer display.
- Buttons for starting, pausing, and resetting the timer.
- Input fields for customizing focus, short break, and long break durations.
- A dropdown menu for selecting soundscapes.
- A section for displaying and exporting productivity stats.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pomodoro Timer with Soundscapes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Pomodoro Timer</h1>
<div class="timer-display">
<span id="timer">25:00</span>
<div class="session-type" id="sessionType">Focus</div>
</div>
<div class="controls">
<button id="startBtn">Start</button>
<button id="pauseBtn">Pause</button>
<button id="resetBtn">Reset</button>
</div>
<div class="settings">
<h2>Settings</h2>
<div class="time-settings">
<div>
<label>Focus (min):</label>
<input type="number" id="focusTime" min="1" max="60" value="25">
</div>
<div>
<label>Short Break (min):</label>
<input type="number" id="shortBreak" min="1" max="30" value="5">
</div>
<div>
<label>Long Break (min):</label>
<input type="number" id="longBreak" min="1" max="60" value="15">
</div>
</div>
<div class="soundscapes">
<h3>Soundscapes</h3>
<select id="soundSelect">
<option value="none">None</option>
<option value="rain">Rain</option>
<option value="forest">Forest</option>
<option value="ocean">Ocean</option>
<option value="coffee">Coffee Shop</option>
</select>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
</div>
</div>
<div class="stats">
<h2>Productivity Stats</h2>
<div id="statsDisplay">
<p>Completed Sessions: <span id="completedSessions">0</span></p>
<p>Total Focus Time: <span id="totalFocusTime">0</span> min</p>
<p>Current Streak: <span id="streak">0</span> days</p>
</div>
<button id="exportBtn">Export Stats</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Styling
The CSS file styles the app, making it visually appealing and user-friendly. It uses CSS variables for consistent theming and a responsive design for mobile devices.
:root {
--primary-color: #2ecc71;
--secondary-color: #27ae60;
--bg-color: #f5f6fa;
--text-color: #2c3e50;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 2rem;
color: var(--primary-color);
}
.timer-display {
text-align: center;
margin-bottom: 2rem;
}
#timer {
font-size: 4rem;
font-weight: bold;
color: var(--text-color);
}
.session-type {
font-size: 1.2rem;
margin-top: 0.5rem;
color: var(--secondary-color);
}
.controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
button {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
}
button:hover {
transform: translateY(-2px);
background-color: var(--secondary-color);
}
.settings, .stats {
background: var(--bg-color);
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 2rem;
}
.time-settings {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.time-settings div {
display: flex;
flex-direction: column;
}
input[type="number"] {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 0.3rem;
}
.soundscapes {
margin-top: 1rem;
}
select, input[type="range"] {
width: 100%;
margin-top: 0.5rem;
padding: 0.5rem;
}
.stats p {
margin: 0.5rem 0;
}
@media (max-width: 600px) {
.container {
margin: 1rem;
padding: 1rem;
}
#timer {
font-size: 2.5rem;
}
}
JavaScript Logic
The JavaScript file handles the core functionality of the app, including:
- Timer logic (start, pause, reset).
- Soundscape selection and volume control.
- Productivity stats tracking and exporting.
class PomodoroTimer {
constructor() {
this.focusTime = 25 * 60;
this.shortBreak = 5 * 60;
this.longBreak = 15 * 60;
this.currentTime = this.focusTime;
this.isRunning = false;
this.interval = null;
this.sessionCount = 0;
this.currentSession = 'focus';
this.stats = {
completedSessions: 0,
totalFocusTime: 0,
streak: 0,
lastDate: null
};
this.sounds = {
rain: new Audio('./sounds/rain.mp3'),
forest: new Audio('./sounds/forest.mp3'),
ocean: new Audio('./sounds/ocean.mp3'),
coffee: new Audio('./sounds/coffee-shop.mp3')
};
this.initElements();
this.loadStats();
this.bindEvents();
this.updateDisplay();
}
// ... (rest of the JavaScript code as provided)
}
document.addEventListener('DOMContentLoaded', () => {
new PomodoroTimer();
});
How It Works
- Timer Logic: The timer counts down from the set duration (focus, short break, or long break). When the timer reaches zero, it automatically switches to the next session.
- Soundscapes: Users can select ambient sounds to play during their sessions. The volume can be adjusted using a slider.
- Productivity Stats: The app tracks completed sessions, total focus time, and streaks. Stats are saved in local storage and can be exported as a text file.
Conclusion
This Customizable Pomodoro Timer with Soundscapes is a powerful tool for boosting productivity. By combining the Pomodoro Technique with ambient sounds and detailed stats, it provides a holistic approach to time management. Feel free to use the code, customize it, or even contribute to its development.
Try it out here: Pomodoro Timer with Soundscapes.
Happy coding and stay productive! 🚀
Top comments (2)
Loved it
Appreciate that! Thanks for reading!