Cùng Tạo Pomodoro Timer Bằng JavaScript
Xin chào các bạn, mình là Thái! Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một ứng dụng Pomodoro Timer đơn giản, không chỉ giúp bạn tập trung trong học tập mà còn giúp những người mới bắt đầu hiểu về DOM và JavaScript thuần túy (vanilla JS).
Giới thiệu về Pomodoro Timer
Pomodoro Timer là một công cụ giúp bạn quản lý thời gian làm việc hiệu quả. Nguyên lý hoạt động của nó rất đơn giản:
- Đặt hẹn giờ (thường là 25 phút) – gọi là một "Pomodoro".
- Tập trung làm việc cho đến khi hết giờ.
- Nghỉ ngắn (thường là 5 phút).
- Lặp lại quy trình này để tối ưu hóa năng suất làm việc của bạn.
Giao Diện Ứng Dụng
Giao diện của Pomodoro Timer sẽ bao gồm ba phần chính:
- Đồng Hồ Đếm Ngược
- Dòng Trạng Thái (hiển thị trạng thái của timer)
- Khu Vực Nút Bấm: bao gồm nút bắt đầu (Start) và nút tạm dừng (Pause/Resume)
Mình sẽ sử dụng Tailwind CSS để tạo giao diện một cách nhanh chóng và đẹp mắt.
Thiết Kế Giao Diện
Hãy bắt đầu thiết kế khung HTML cho Pomodoro Timer. Tạo thư mục mới tên là pomodoro, sau đó tạo file index.html với nội dung dưới đây:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pomodoro Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-600 transition-all duration-500">
<div class="text-white font-mono max-w-sm mx-auto">
<div class="text-xl font-bold text-center p-10">Pomodoro Timer</div>
<div class="grid gap-6">
<div id="timer" class="text-8xl text-center"></div>
<div id="status" class="text-sm text-center">Ready to focus?</div>
<button id="start" class="text-xl py-2 rounded-full bg-white text-center text-black">Start</button>
<div id="controls" style="display: none;">
<div class="grid grid-cols-2 gap-4 w-full">
<button id="clear" class="block w-full text-xl py-2 rounded-full bg-white/40 text-center">Clear</button>
<button id="pause" class="block w-full text-xl py-2 rounded-full bg-white text-black text-center">Pause</button>
</div>
</div>
</div>
</div>
<script>
// Viết code ở đây
</script>
</body>
</html>Khi chạy file HTML này, bạn có thể thấy giao diện cơ bản của Pomodoro Timer. Hãy sử dụng Live Server trong VS Code để xem trực tiếp.
Viết Logic JavaScript
Bây giờ, hãy cùng nhau viết logic để Pomodoro Timer hoạt động. Chúng ta sẽ thêm mã JavaScript vào trong thẻ <script>.
Cài Đặt Biến Cho Timer
javascript
// Thời gian làm việc: 25 phút
const WORK_TIME = 25 * 60;
// Thời gian nghỉ: 5 phút
const BREAK_TIME = 5 * 60;
// Thời gian còn lại, mặc định là thời gian làm việc
let timeLeft = WORK_TIME;
// Kiểm tra xem timer đang chạy hay không
let isRunning = false;
// Kiểu hoạt động: FOCUSING (làm việc) hoặc BREAKING (nghỉ ngơi)
let runningType = "FOCUSING";
// Kiểm tra xem có đang tạm dừng hay không
let isPaused = false;Lấy DOM Selector
Tiếp theo, chúng ta sẽ cần lấy các phần tử DOM mà chúng ta cần tương tác bằng JavaScript:
javascript
const timerEl = document.getElementById("timer");
const startEl = document.getElementById("start");
const clearEl = document.getElementById("clear");
const pauseEl = document.getElementById("pause");
const controlsEl = document.getElementById("controls");
const statusEl = document.getElementById("status");Tương Tác Với DOM
Mình sẽ viết một vài hàm để cập nhật DOM khi trạng thái của timer thay đổi:
javascript
function updateTimerEl() {
const minutes = Math.floor(timeLeft / 60).toString().padStart(2, "0");
const seconds = (timeLeft % 60).toString().padStart(2, "0");
timerEl.textContent = `${minutes}:${seconds}`;
}
function updateStatusEl() {
if (!isRunning) {
statusEl.textContent = "Ready to start?";
} else {
statusEl.textContent = runningType === "FOCUSING" ? "Stay focused" : "Let take a break";
}
}
function updateControlsEl() {
controlsEl.style.display = isRunning ? "flex" : "none";
}
function updateStartEl() {
startEl.style.display = isRunning ? "none" : "block";
}
function updatePauseEl() {
pauseEl.textContent = isPaused ? "Resume" : "Pause";
}Thêm Hàm Logic
Chúng ta sẽ viết thêm các hàm để quản lý timer:
javascript
function resetTimer() {
timeLeft = WORK_TIME;
runningType = "FOCUSING";
isRunning = false;
isPaused = false;
updateTimerEl();
updateStatusEl();
updateControlsEl();
updateStartEl();
updatePauseEl();
}
function startTimer() {
isRunning = true;
updateTimerEl();
updateStartEl();
updateControlsEl();
updateStatusEl();
}
setInterval(() => {
if (isRunning && !isPaused && timeLeft > 0) {
timeLeft--;
updateTimerEl();
}
}, 1000);Lắng Nghe Sự Kiện
Cuối cùng, chúng ta cần thêm sự kiện cho các nút bấm:
javascript
startEl.addEventListener("click", startTimer);
clearEl.addEventListener("click", resetTimer);
pauseEl.addEventListener("click", togglePauseTimer);Kết Luận
Bài viết đã hướng dẫn bạn cách xây dựng một ứng dụng Pomodoro Timer đơn giản bằng JavaScript và xử lý DOM. Qua bài học này, bạn đã học được cách truy vấn, cập nhật và tương tác với các phần tử trên trang web. Nếu bạn có thắc mắc hoặc muốn cải tiến ứng dụng này trong tương lai, hãy cùng nhau thảo luận nhé! Cảm ơn bạn đã theo dõi bài viết này.
source: viblo
