Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7a11231

Browse files
Add a project
1 parent 41b672c commit 7a11231

File tree

3 files changed

+128
-0
lines changed

3 files changed

+128
-0
lines changed

‎Source-Code/PomodoroTimer/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Productivity Timer</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Productivity Timer</h1>
12+
<div class="timer-display">
13+
<span id="minutes">25</span>:<span id="seconds">00</span>
14+
</div>
15+
<div class="controls">
16+
<button id="start-btn">Start</button>
17+
<button id="reset-btn">Reset</button>
18+
</div>
19+
<p id="status">Focus Session</p>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎Source-Code/PomodoroTimer/script.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const startBtn = document.getElementById('start-btn');
2+
const resetBtn = document.getElementById('reset-btn');
3+
const minutesDisplay = document.getElementById('minutes');
4+
const secondsDisplay = document.getElementById('seconds');
5+
const statusDisplay = document.getElementById('status');
6+
7+
let timerInterval;
8+
let isFocusSession = true; // Start with a focus session
9+
const focusTime = 5 * 60; // 5 minutes in seconds
10+
const breakTime = 5 * 60; // 5 minutes in seconds
11+
let timeRemaining = focusTime;
12+
13+
function updateDisplay() {
14+
const minutes = Math.floor(timeRemaining / 60);
15+
const seconds = timeRemaining % 60;
16+
minutesDisplay.textContent = String(minutes).padStart(2, '0');
17+
secondsDisplay.textContent = String(seconds).padStart(2, '0');
18+
}
19+
20+
function toggleSession() {
21+
isFocusSession = !isFocusSession;
22+
timeRemaining = isFocusSession ? focusTime : breakTime;
23+
statusDisplay.textContent = isFocusSession
24+
? 'Focus Session'
25+
: 'Break Session';
26+
updateDisplay();
27+
}
28+
29+
function startTimer() {
30+
if (timerInterval) return; // Prevent multiple intervals
31+
timerInterval = setInterval(() => {
32+
if (timeRemaining > 0) {
33+
timeRemaining -= 1;
34+
updateDisplay();
35+
} else {
36+
clearInterval(timerInterval);
37+
timerInterval = null;
38+
toggleSession();
39+
}
40+
}, 1000);
41+
}
42+
43+
function resetTimer() {
44+
clearInterval(timerInterval);
45+
timerInterval = null;
46+
timeRemaining = isFocusSession ? focusTime : breakTime;
47+
updateDisplay();
48+
}
49+
50+
startBtn.addEventListener('click', startTimer);
51+
resetBtn.addEventListener('click', resetTimer);
52+
53+
// Initialize display
54+
updateDisplay();

‎Source-Code/PomodoroTimer/style.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f0f4f8;
4+
color: #333;
5+
text-align: center;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
.container {
11+
max-width: 400px;
12+
margin: 100px auto;
13+
padding: 20px;
14+
background: #fff;
15+
border-radius: 10px;
16+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17+
}
18+
19+
h1 {
20+
margin-bottom: 20px;
21+
}
22+
23+
.timer-display {
24+
font-size: 3rem;
25+
margin: 20px 0;
26+
}
27+
28+
.controls button {
29+
font-size: 1rem;
30+
padding: 10px 20px;
31+
margin: 5px;
32+
border: none;
33+
border-radius: 5px;
34+
cursor: pointer;
35+
}
36+
37+
#start-btn {
38+
background-color: #28a745;
39+
color: white;
40+
}
41+
42+
#reset-btn {
43+
background-color: #dc3545;
44+
color: white;
45+
}
46+
47+
#status {
48+
font-size: 1.2rem;
49+
margin-top: 20px;
50+
color: #555;
51+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /