Pomodoro Timer
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
#timer {
margin-bottom: 20px;
}
#timer-display {
font-size: 48px;
margin-bottom: 10px;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin: 0 10px;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
// scripts.js
let countdownInterval;
let totalTime = 25 * 60; // 25 minutes in seconds
let timeLeft = totalTime;
let isBreakTime = false;
function startTimer() {
if (!countdownInterval) {
countdownInterval = setInterval(updateTimer, 1000);
document.getElementById('startBtn').disabled = true;
}
}
function updateTimer() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const displayMinutes = String(minutes).padStart(2, '0');
const displaySeconds = String(seconds).padStart(2, '0');
document.getElementById('timer-display').textContent = `${displayMinutes}:${displaySeconds}`;
if (timeLeft === 0) {
clearInterval(countdownInterval);
if (isBreakTime) {
isBreakTime = false;
totalTime = 25 * 60; // Reset to work time
} else {
isBreakTime = true;
totalTime = 5 * 60; // Set break time to 5 minutes
}
timeLeft = totalTime;
countdownInterval = null;
document.getElementById('startBtn').disabled = false;
} else {
timeLeft--;
}
}
function resetTimer() {
clearInterval(countdownInterval);
countdownInterval = null;
timeLeft = totalTime;
document.getElementById('timer-display').textContent = '25:00';
document.getElementById('startBtn').disabled = false;
}
No comments:
Post a Comment