Skip to content

Commit 59344d0

Browse files
geraldsberongoygeraldsberongoy
authored
Merge pull request #4 from gdg-pup-webdev/feat/enhance-ui-and-file-structure
chore(refactor): major logic and file refactor for simplicity
2 parents 3750a0f + 1b81331 commit 59344d0

11 files changed

Lines changed: 593 additions & 773 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ jobs:
2727
- name: Upload artifacts
2828
uses: actions/upload-pages-artifact@v3
2929
with:
30-
path: "src"
30+
path: "Live Project"
3131

3232
- name: Deploy to Github Pages
3333
id: deployment

‎Live Project/js/main.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
// ==========================================
2+
// 1. VARIABLES & CONFIGURATION
3+
// ==========================================
4+
5+
// Time durations in seconds
6+
const FOCUS_TIME = 25 * 60;
7+
const SHORT_BREAK_TIME = 5 * 60;
8+
const LONG_BREAK_TIME = 15 * 60;
9+
10+
// Colors
11+
const COLOR_BLUE = "var(--google-blue)";
12+
const COLOR_GREEN = "var(--google-green)";
13+
const COLOR_YELLOW = "var(--google-yellow)";
14+
15+
// State variables (Global)
16+
let timeLeft = FOCUS_TIME;
17+
let isRunning = false;
18+
let currentMode = "focus"; // 'focus', 'short-break', 'long-break'
19+
let timerInterval = null;
20+
21+
22+
// ==========================================
23+
// 2. DOM ELEMENTS (Selecting by ID)
24+
// ==========================================
25+
26+
const timerDisplay = document.getElementById("timer-display");
27+
const timerLabel = document.getElementById("timer-label");
28+
const ringProgress = document.getElementById("ring-progress");
29+
30+
// Buttons
31+
const startBtn = document.getElementById("toggle-btn");
32+
const resetBtn = document.getElementById("reset-btn");
33+
const toggleIcon = document.getElementById("toggle-icon");
34+
35+
// Mode Buttons
36+
const focusBtn = document.getElementById("focus-btn");
37+
const shortBreakBtn = document.getElementById("short-break-btn");
38+
const longBreakBtn = document.getElementById("long-break-btn");
39+
40+
41+
42+
// ==========================================
43+
// 3. TIMER FUNCTIONS
44+
// ==========================================
45+
46+
function updateTimerDisplay() {
47+
// Calculate minutes and seconds
48+
const minutes = Math.floor(timeLeft / 60);
49+
const seconds = timeLeft % 60;
50+
51+
// Format as "MM:SS" (e.g., "05:09")
52+
const formattedTime =
53+
minutes.toString().padStart(2, "0") +
54+
":" +
55+
seconds.toString().padStart(2, "0");
56+
57+
timerDisplay.textContent = formattedTime;
58+
59+
// Update the ring progress
60+
let totalTime = FOCUS_TIME;
61+
if (currentMode === "short-break") totalTime = SHORT_BREAK_TIME;
62+
if (currentMode === "long-break") totalTime = LONG_BREAK_TIME;
63+
64+
const progress = 1 - timeLeft / totalTime;
65+
ringProgress.style.strokeDashoffset = progress;
66+
}
67+
68+
function startTimer() {
69+
if (isRunning) {
70+
// If already running, pause it
71+
clearInterval(timerInterval);
72+
isRunning = false;
73+
toggleIcon.textContent = "play_arrow";
74+
timerLabel.textContent = "Paused";
75+
console.log("Timer Paused");
76+
} else {
77+
// Start the timer
78+
isRunning = true;
79+
toggleIcon.textContent = "pause";
80+
timerLabel.textContent =
81+
currentMode === "focus" ? "Stay focused" : "Take a break";
82+
83+
timerInterval = setInterval(() => {
84+
if (timeLeft > 0) {
85+
timeLeft = timeLeft - 1;
86+
console.log("Timer Running");
87+
updateTimerDisplay();
88+
} else {
89+
// Timer finished
90+
clearInterval(timerInterval);
91+
isRunning = false;
92+
toggleIcon.textContent = "play_arrow";
93+
alert("Time is up!");
94+
console.log("TImer Finished");
95+
}
96+
}, 1000);
97+
}
98+
}
99+
100+
function resetTimer() {
101+
clearInterval(timerInterval);
102+
isRunning = false;
103+
toggleIcon.textContent = "play_arrow";
104+
console.log("Timer Reset");
105+
// Reset time based on current mode
106+
if (currentMode === "focus") timeLeft = FOCUS_TIME;
107+
else if (currentMode === "short-break") timeLeft = SHORT_BREAK_TIME;
108+
else if (currentMode === "long-break") timeLeft = LONG_BREAK_TIME;
109+
110+
updateTimerDisplay();
111+
}
112+
113+
function setMode(mode) {
114+
currentMode = mode;
115+
116+
// Update buttons style
117+
focusBtn.classList.remove("active");
118+
shortBreakBtn.classList.remove("active");
119+
longBreakBtn.classList.remove("active");
120+
121+
const root = document.documentElement;
122+
console.log(root);
123+
124+
if (mode === "focus") {
125+
timeLeft = FOCUS_TIME;
126+
focusBtn.classList.add("active");
127+
root.style.setProperty("--theme-primary", COLOR_BLUE);
128+
timerLabel.textContent = "Ready to focus?";
129+
console.log("Focus Mode");
130+
} else if (mode === "short-break") {
131+
timeLeft = SHORT_BREAK_TIME;
132+
shortBreakBtn.classList.add("active");
133+
root.style.setProperty("--theme-primary", COLOR_GREEN);
134+
timerLabel.textContent = "Time for a break";
135+
console.log("Short Break Mode");
136+
} else if (mode === "long-break") {
137+
timeLeft = LONG_BREAK_TIME;
138+
longBreakBtn.classList.add("active");
139+
root.style.setProperty("--theme-primary", COLOR_YELLOW);
140+
timerLabel.textContent = "Time for a long break";
141+
console.log("Long Break Mode");
142+
}
143+
144+
// Stop timer when switching modes
145+
clearInterval(timerInterval);
146+
isRunning = false;
147+
toggleIcon.textContent = "play_arrow";
148+
console.log("Timer Reset");
149+
150+
updateTimerDisplay();
151+
}
152+
153+
154+
155+
// ==========================================
156+
// 5. EVENT LISTENERS
157+
// ==========================================
158+
159+
startBtn.addEventListener("click", startTimer);
160+
resetBtn.addEventListener("click", resetTimer);
161+
162+
focusBtn.addEventListener("click", () => {
163+
setMode("focus");
164+
console.log("Focus mode activated");
165+
});
166+
167+
shortBreakBtn.addEventListener("click", () => {
168+
setMode("short-break");
169+
console.log("Short break mode activated");
170+
});
171+
172+
longBreakBtn.addEventListener("click", () => {
173+
setMode("long-break");
174+
console.log("Long break mode activated");
175+
});
176+
177+
178+
179+
// Initialize
180+
updateTimerDisplay();
181+

‎Live Project/pomodoro.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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>GDG Pomodoro</title>
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
rel="stylesheet"
16+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0"
17+
/>
18+
19+
<link rel="stylesheet" href="./styles/pomodoro.css" />
20+
</head>
21+
<body>
22+
<div class="gdg-decor-bg" aria-hidden="true">
23+
<span class="bracket">&lt;</span>
24+
<span class="bracket">&gt;</span>
25+
</div>
26+
27+
<header class="page-header">
28+
<div class="logo-container">
29+
<span class="gdg-logo-text">
30+
<span class="blue">G</span><span class="red">D</span
31+
><span class="yellow">G</span> <span class="green">Timer</span>
32+
</span>
33+
</div>
34+
</header>
35+
36+
<main class="layout">
37+
<section class="panel glass-effect">
38+
<header class="panel-header">
39+
<div class="mode-switch">
40+
<button id="focus-btn" class="mode-chip active" data-mode="focus">
41+
Focus
42+
</button>
43+
<button
44+
id="short-break-btn"
45+
class="mode-chip"
46+
data-mode="short-break"
47+
>
48+
Short Break
49+
</button>
50+
<button
51+
id="long-break-btn"
52+
class="mode-chip"
53+
data-mode="long-break"
54+
>
55+
Long Break
56+
</button>
57+
</div>
58+
</header>
59+
60+
<div class="timer-container">
61+
<svg
62+
class="timer-ring"
63+
width="300"
64+
height="300"
65+
viewBox="0 0 300 300"
66+
>
67+
<circle class="ring-track" cx="150" cy="150" r="135"></circle>
68+
<circle
69+
class="ring-progress"
70+
id="ring-progress"
71+
cx="150"
72+
cy="150"
73+
r="135"
74+
pathLength="1"
75+
></circle>
76+
</svg>
77+
<div class="timer-display" id="timer-display">25:00</div>
78+
<p class="timer-label" id="timer-label">Time to focus</p>
79+
</div>
80+
81+
<div class="controls">
82+
<button
83+
class="btn-icon secondary"
84+
id="reset-btn"
85+
aria-label="Reset Timer"
86+
>
87+
<span class="material-symbols-rounded">restart_alt</span>
88+
</button>
89+
90+
<button
91+
class="btn-fab primary"
92+
id="toggle-btn"
93+
aria-label="Start Timer"
94+
>
95+
<span class="material-symbols-rounded" id="toggle-icon"
96+
>play_arrow</span
97+
>
98+
</button>
99+
100+
<div class="iteration-badge" title="Completed Sessions">
101+
<span class="material-symbols-rounded">check_circle</span>
102+
<span id="iteration-count">0</span>
103+
</div>
104+
</div>
105+
106+
107+
</section>
108+
</main>
109+
110+
<script type="module" src="./js/main.js"></script>
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)