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.
</span>
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
Pomodoro Timer with Soundscapes
rel="stylesheet" href="styles.css">
class="container">
Pomodoro Timer
class="timer-display">
id="timer">25:00
class="session-type" id="sessionType">Focus
class="controls">
id="startBtn">Start
id="pauseBtn">Pause
id="resetBtn">Reset
class="settings">
Settings
class="time-settings">
Focus (min):
type="number" id="focusTime" min="1" max="60" value="25">
Short Break (min):
type="number" id="shortBreak" min="1" max="30" value="5">
Long Break (min):
type="number" id="longBreak" min="1" max="60" value="15">
class="soundscapes">
Soundscapes
id="soundSelect">
value="none">None
value="rain">Rain
value="forest">Forest
value="ocean">Ocean
value="coffee">Coffee Shop
type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
class="stats">
Productivity Stats
id="statsDisplay">
Completed Sessions: id="completedSessions">0
Total Focus Time: id="totalFocusTime">0 min
Current Streak: id="streak">0 days
id="exportBtn">Export Stats
<span class="na">src="script.js">
Enter fullscreen mode
Exit fullscreen mode
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;
}
}
Enter fullscreen mode
Exit fullscreen mode
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();
});
Enter fullscreen mode
Exit fullscreen mode
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! 🚀