Skip to content

Commit dfb834e

Browse files
sahandghavidelsahandghavidel
committed
update pomodoro timer project
1 parent 07a1687 commit dfb834e

File tree

3 files changed

+40
-57
lines changed

3 files changed

+40
-57
lines changed

‎projects/pomodoro-timer/index.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47
<title>Pomodoro Timer</title>
5-
<link rel="stylesheet" type="text/css" href="style.css" />
6-
</head>
7-
<body>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
811
<div class="container">
9-
<h1 class="title">Pomodoro Timer</h1>
10-
<p id="timer" class="timer">25:00</p>
11-
<div class="button-wrapper">
12-
<button id="start" class="button button--start">Start</button>
13-
<button id="stop" class="button button--stop">Stop</button>
14-
<button id="reset" class="button button--reset">Reset</button>
15-
</div>
12+
<h1 class="title">Pomodoro Timer</h1>
13+
<p class="timer" id="timer">25:00</p>
14+
<div class="button-wrapper">
15+
<button id="start">Start</button>
16+
<button id="stop">Stop</button>
17+
<button id="reset">Reset</button>
18+
</div>
1619
</div>
1720
<script src="index.js"></script>
18-
</body>
19-
</html>
21+
</body>
22+
</html>

‎projects/pomodoro-timer/index.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,36 @@ const stopEl = document.getElementById("stop");
33
const resetEl = document.getElementById("reset");
44
const timerEl = document.getElementById("timer");
55

6-
let intervalId;
7-
let timeLeft = 1500; // 25 minutes in seconds
6+
let interval;
7+
let timeLeft = 1500;
88

99
function updateTimer() {
1010
let minutes = Math.floor(timeLeft / 60);
1111
let seconds = timeLeft % 60;
1212
let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
1313
.toString()
1414
.padStart(2, "0")}`;
15-
// padStart() is a built-in method in JavaScript that allows you to pad a string with another string until it reaches a specified length. It's often used to format strings to a specific length, such as adding leading zeros to a number.
16-
// const str = '7';
17-
// const paddedStr = str.padStart(2, '0');
18-
19-
// console.log(paddedStr); // Output: '07'
2015

2116
timerEl.innerHTML = formattedTime;
2217
}
2318

2419
function startTimer() {
25-
intervalId = setInterval(() => {
20+
interval = setInterval(() => {
2621
timeLeft--;
2722
updateTimer();
2823
if (timeLeft === 0) {
29-
clearInterval(intervalId);
24+
clearInterval(interval);
3025
alert("Time's up!");
26+
timeLeft = 1500;
27+
updateTimer();
3128
}
3229
}, 1000);
3330
}
34-
3531
function stopTimer() {
36-
clearInterval(intervalId);
32+
clearInterval(interval);
3733
}
38-
3934
function resetTimer() {
40-
clearInterval(intervalId);
35+
clearInterval(interval);
4136
timeLeft = 1500;
4237
updateTimer();
4338
}

‎projects/pomodoro-timer/style.css‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
/* Pomodoro Timer styles */
2-
31
.container {
4-
font-family: "Roboto", Arial, Helvetica, sans-serif;
52
margin: 0 auto;
63
max-width: 400px;
7-
padding: 20px;
84
text-align: center;
5+
padding: 20px;
6+
font-family: "Roboto", sans-serif;
97
}
108

119
.title {
@@ -19,44 +17,31 @@
1917
color: #2c3e50;
2018
}
2119

22-
.button-wrapper {
23-
display: flex;
24-
justify-content: center;
25-
}
20+
button {
21+
font-size: 18px;
22+
padding: 10px 20px;
23+
margin: 10px;
24+
color: white;
2625

27-
.button {
2826
border: none;
2927
border-radius: 4px;
30-
color: #fff;
31-
font-size: 18px;
32-
font-weight: bold;
33-
margin-right: 10px;
34-
padding: 10px 20px;
35-
text-transform: uppercase;
36-
transition: all 0.2s;
3728
cursor: pointer;
29+
text-transform: uppercase;
30+
transition: opacity 0.3s ease-in-out;
3831
}
3932

40-
.button--start {
41-
background-color: #27ae60;
33+
button:hover {
34+
opacity: 0.7;
4235
}
4336

44-
.button--start:hover {
45-
background-color: #229954;
37+
#start {
38+
background-color: #27ae60;
4639
}
4740

48-
.button--stop {
41+
#stop {
4942
background-color: #c0392b;
5043
}
5144

52-
.button--stop:hover {
53-
background-color: #a93226;
54-
}
55-
56-
.button--reset {
45+
#reset {
5746
background-color: #7f8c8d;
5847
}
59-
60-
.button--reset:hover {
61-
background-color: #6c7a7d;
62-
}

0 commit comments

Comments
 (0)