Introduction:
In this tutorial, we will learn how to create a simple Pomodoro timer web application using HTML, CSS, and JavaScript. The application allows users to set focus time, short breaks, and long breaks, helping them manage their time effectively and stay productive. Throughout the tutorial, we will cover the project folder structure, HTML markup, CSS styles, and JavaScript functionality.
Things You Will Learn:
- HTML and CSS structure for building a timer web app.
- JavaScript event handling and DOM manipulation.
- Implementing a countdown timer with start, pause, and reset functionalities.
Video Tutorial:
To complement this written tutorial, you can find a detailed video walkthrough on my YouTube channel. The video provides a step-by-step demonstration of the entire process, making it easier to follow along and understand the implementation.
Project Folder Structure:
- index.html (Contains the main HTML structure)
- style.css (Includes the CSS styles for the app)
- script.js (Contains the JavaScript code for timer functionality)
HTML:
The HTML file contains the necessary elements for the timer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pomodoro Timer</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="section-container">
<button id="focus" class="btn btn-timer btn-focus">Focus</button>
<button id="shortbreak" class="btn btn-shortbreak">Short Break</button>
<button id="longbreak" class="btn btn-longbreak">Long Break</button>
</div>
<div class="time-btn-container">
<span id="time"></span>
<div class="btn-container">
<button id="btn-start" class="show">Start</button>
<button id="btn-pause" class="hide">Pause</button>
<button id="btn-reset" class="hide">
<i class="fa-solid fa-rotate-right"></i>
</button>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
The CSS styles play a crucial role in the app’s appearance and layout. We’ve carefully crafted styles to make the timer visually appealing and easy to use:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #cd202d;
}
.container {
background-color: #1b1b1b;
width: min(90%, 500px);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 4em 2em;
border-radius: 0.5em;
}
button {
border: none;
outline: none;
cursor: pointer;
}
.section-container {
display: flex;
gap: 1em;
justify-content: center;
}
.btn {
padding: 1em 2em;
border-radius: 0.5em;
background-color: #3e3f43;
color: #a9a7a7;
}
.btn-focus {
background-color: #cb202d;
color: #ffffff;
}
.time-btn-container {
display: flex;
flex-direction: column;
margin-top: 2em;
}
#time {
text-align: center;
color: #ffffff;
font-size: 5em;
font-weight: 600;
}
.btn-container {
display: flex;
justify-content: center;
gap: 2em;
}
#btn-start,
#btn-pause {
padding: 1em 2em;
border-radius: 0.5em;
cursor: pointer;
background-color: #ffffff;
}
#btn-reset {
background-color: transparent;
border: none;
outline: none;
color: #ffffff;
font-size: 2em;
}
.hide {
display: none;
}
.show {
display: block;
}
Â
JS:
JavaScript adds functionality to our timer app. Through event handling and DOM manipulation, we implement the countdown timer logic, allowing users to start, pause, and reset the timer as needed:
let focusButton = document.getElementById("focus");
let buttons = document.querySelectorAll(".btn");
let shortBreakButton = document.getElementById("shortbreak");
let longBreakButton = document.getElementById("longbreak");
let startBtn = document.getElementById("btn-start");
let reset = document.getElementById("btn-reset");
let pause = document.getElementById("btn-pause");
let time = document.getElementById("time");
let set;
let active = "focus";
let count = 59;
let paused = true;
let minCount = 24;
time.textContent = `${minCount + 1}:00`;
const appendZero = (value) => {
value = value < 10 ? `0${value}` : value;
return value;
};
reset.addEventListener(
"click",
(resetTime = () => {
pauseTimer();
switch (active) {
case "long":
minCount = 14;
break;
case "short":
minCount = 4;
break;
default:
minCount = 24;
break;
}
count = 59;
time.textContent = `${minCount + 1}:00`;
})
);
const removeFocus = () => {
buttons.forEach((btn) => {
btn.classList.remove("btn-focus");
});
};
focusButton.addEventListener("click", () => {
removeFocus();
focusButton.classList.add("btn-focus");
pauseTimer();
minCount = 24;
count = 59;
time.textContent = `${minCount + 1}:00`;
});
shortBreakButton.addEventListener("click", () => {
active = "short";
removeFocus();
shortBreakButton.classList.add("btn-focus");
pauseTimer();
minCount = 4;
count = 59;
time.textContent = `${appendZero(minCount + 1)}:00`;
});
longBreakButton.addEventListener("click", () => {
active = "long";
removeFocus();
longBreakButton.classList.add("btn-focus");
pauseTimer();
minCount = 14;
count = 59;
time.textContent = `${minCount + 1}:00`;
});
pause.addEventListener(
"click",
(pauseTimer = () => {
paused = true;
clearInterval(set);
startBtn.classList.remove("hide");
pause.classList.remove("show");
reset.classList.remove("show");
})
);
startBtn.addEventListener("click", () => {
reset.classList.add("show");
pause.classList.add("show");
startBtn.classList.add("hide");
startBtn.classList.remove("show");
if (paused) {
paused = false;
time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
set = setInterval(() => {
count--;
time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
if (count == 0) {
if (minCount != 0) {
minCount--;
count = 60;
} else {
clearInterval(set);
}
}
}, 1000);
}
});
Â
Conclusion:
In this tutorial, we’ve covered the step-by-step process of creating a Pomodoro timer web application using HTML, CSS, and JavaScript. We’ve learned how to structure the project folder, write the HTML markup for the app layout, apply CSS styles for the visual design, and implement JavaScript functionality to handle the countdown timer, start, pause, and reset features. With this application, users can efficiently manage their time and improve productivity by incorporating focus and breaks into their work routine. Feel free to expand and enhance the app further to meet your specific needs or integrate it into other projects to improve time management for various tasks and activities. Happy coding!
