Movatterモバイル変換

[0]ホーム
URL:

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

Commitdfb834e

Browse files
update pomodoro timer project
1 parent07a1687 commitdfb834e

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+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
47
<title>Pomodoro Timer</title>
5-
<linkrel="stylesheet"type="text/css"href="style.css"/>
6-
</head>
7-
<body>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
811
<divclass="container">
9-
<h1class="title">Pomodoro Timer</h1>
10-
<pid="timer"class="timer">25:00</p>
11-
<divclass="button-wrapper">
12-
<buttonid="start"class="button button--start">Start</button>
13-
<buttonid="stop"class="button button--stop">Stop</button>
14-
<buttonid="reset"class="button button--reset">Reset</button>
15-
</div>
12+
<h1class="title">Pomodoro Timer</h1>
13+
<pclass="timer"id="timer">25:00</p>
14+
<divclass="button-wrapper">
15+
<buttonid="start">Start</button>
16+
<buttonid="stop">Stop</button>
17+
<buttonid="reset">Reset</button>
18+
</div>
1619
</div>
1720
<scriptsrc="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
constresetEl=document.getElementById("reset");
44
consttimerEl=document.getElementById("timer");
55

6-
letintervalId;
7-
lettimeLeft=1500;// 25 minutes in seconds
6+
letinterval;
7+
lettimeLeft=1500;
88

99
functionupdateTimer(){
1010
letminutes=Math.floor(timeLeft/60);
1111
letseconds=timeLeft%60;
1212
letformattedTime=`${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
functionstartTimer(){
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
functionstopTimer(){
36-
clearInterval(intervalId);
32+
clearInterval(interval);
3733
}
38-
3934
functionresetTimer(){
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:10px20px;
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:10px20px;
35-
text-transform: uppercase;
36-
transition: all0.2s;
3728
cursor: pointer;
29+
text-transform: uppercase;
30+
transition: opacity0.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)
[8]ページ先頭
©2009-2025 Movatter.jp