Skip to content

Commit 3ff1ee9

Browse files
sahandghavidelsahandghavidel
committed
update stopwatch project
1 parent 61d4cf2 commit 3ff1ee9

File tree

5 files changed

+79
-115
lines changed

5 files changed

+79
-115
lines changed

‎projects/simple-stopwatch/index.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎projects/simple-stopwatch/stopwatch.js‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎projects/stopwatch/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
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">
7+
<title>Stopwatch</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
12+
<div id="timer">00:00:00</div>
13+
<div id="buttons">
14+
<button id="start">Start</button>
15+
<button id="stop">Stop</button>
16+
<button id="reset">Reset</button>
17+
</div>
18+
<script src="index.js"></script>
19+
</body>
20+
</html>

‎projects/stopwatch/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const timerEl = document.getElementById("timer");
2+
const startButtonEl = document.getElementById("start");
3+
const stopButtonEl = document.getElementById("stop");
4+
const resetButtonEl = document.getElementById("reset");
5+
6+
let startTime = 0;
7+
let elapsedTime = 0;
8+
let timerInterval;
9+
10+
function startTimer() {
11+
startTime = Date.now() - elapsedTime;
12+
13+
timerInterval = setInterval(() => {
14+
elapsedTime = Date.now() - startTime;
15+
timerEl.textContent = formatTime(elapsedTime);
16+
}, 10);
17+
18+
startButtonEl.disabled = true;
19+
stopButtonEl.disabled = false;
20+
}
21+
22+
function formatTime(elapsedTime) {
23+
const milliseconds = Math.floor((elapsedTime % 1000) / 10);
24+
const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
25+
const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
26+
const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
27+
return (
28+
(hours ? (hours > 9 ? hours : "0" + hours) : "00") +
29+
":" +
30+
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
31+
":" +
32+
(seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") +
33+
"." +
34+
(milliseconds > 9 ? milliseconds : "0" + milliseconds)
35+
);
36+
}
37+
function stopTimer() {
38+
clearInterval(timerInterval);
39+
startButtonEl.disabled = false;
40+
stopButtonEl.disabled = true;
41+
}
42+
function resetTimer() {
43+
clearInterval(timerInterval);
44+
45+
elapsedTime = 0;
46+
timerEl.textContent = "00:00:00";
47+
48+
startButtonEl.disabled = false;
49+
stopButtonEl.disabled = true;
50+
}
51+
52+
startButtonEl.addEventListener("click", startTimer);
53+
stopButtonEl.addEventListener("click", stopTimer);
54+
resetButtonEl.addEventListener("click", resetTimer);

‎projects/simple-stopwatch/style.css‎ renamed to ‎projects/stopwatch/style.css‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ body {
44
display: flex;
55
flex-direction: column;
66
justify-content: center;
7-
align-items: center;
8-
height: 100vh;
7+
min-height: 100vh;
98
overflow: hidden;
9+
align-items: center;
1010
}
1111

1212
#timer {
1313
font-size: 7rem;
1414
font-weight: 700;
15-
color: #f92672;
1615
text-shadow: 2px 2px #f8a5c2;
17-
/* In the current code, the value 2px 2px #f8a5c2 sets a shadow that is 2 pixels to the right and 2 pixels down of the text, with a blur radius of 0 (no blur), and a color of #f8a5c2. */
16+
color: #f92672;
1817
width: 600px;
1918
text-align: center;
2019
margin: 40px auto;
@@ -29,34 +28,26 @@ button {
2928
background-color: #f92672;
3029
color: white;
3130
border: none;
32-
border-radius: 30px;
3331
font-size: 2rem;
3432
font-weight: bold;
3533
padding: 1.5rem 4rem;
36-
/* In the current code, the value 1.5rem 4rem sets a padding of 1.5rem (24px) for the top and bottom sides of the buttons, and 4rem (64px) for the left and right sides of the buttons. */
3734
margin: 1rem;
35+
border-radius: 30px;
3836
cursor: pointer;
39-
transition: background-color 0.2s;
4037
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
38+
transition: all 0.2s;
4139
}
4240

4341
button:hover {
4442
background-color: #f44583;
4543
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
4644
}
4745

48-
button:active {
49-
background-color: #f34282;
50-
box-shadow: none;
51-
}
52-
5346
button[disabled] {
5447
opacity: 0.5;
5548
cursor: default;
5649
}
5750

58-
/* add media query */
59-
6051
@media (max-width: 800px) {
6152
#timer {
6253
font-size: 4rem;
@@ -67,11 +58,4 @@ button[disabled] {
6758
font-size: 1.5rem;
6859
padding: 1rem 2rem;
6960
}
70-
7161
}
72-
73-
74-
75-
76-
/* add media query for tablet size */
77-

0 commit comments

Comments
 (0)