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

Commit0c0e315

Browse files
add rock paper scissors game and pomodoro timer projects
1 parent051f5a5 commit0c0e315

File tree

6 files changed

+274
-0
lines changed

6 files changed

+274
-0
lines changed

‎projects/pomodoro-timer/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Pomodoro Timer</title>
5+
<linkrel="stylesheet"type="text/css"href="style.css"/>
6+
</head>
7+
<body>
8+
<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>
16+
</div>
17+
<scriptsrc="index.js"></script>
18+
</body>
19+
</html>

‎projects/pomodoro-timer/index.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
conststartEl=document.getElementById("start");
2+
conststopEl=document.getElementById("stop");
3+
constresetEl=document.getElementById("reset");
4+
consttimerEl=document.getElementById("timer");
5+
6+
letintervalId;
7+
lettimeLeft=1500;// 25 minutes in seconds
8+
9+
functionupdateTimer(){
10+
letminutes=Math.floor(timeLeft/60);
11+
letseconds=timeLeft%60;
12+
letformattedTime=`${minutes.toString().padStart(2,"0")}:${seconds
13+
.toString()
14+
.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'
20+
21+
timerEl.innerHTML=formattedTime;
22+
}
23+
24+
functionstartTimer(){
25+
intervalId=setInterval(()=>{
26+
timeLeft--;
27+
updateTimer();
28+
if(timeLeft===0){
29+
clearInterval(intervalId);
30+
alert("Time's up!");
31+
}
32+
},1000);
33+
}
34+
35+
functionstopTimer(){
36+
clearInterval(intervalId);
37+
}
38+
39+
functionresetTimer(){
40+
clearInterval(intervalId);
41+
timeLeft=1500;
42+
updateTimer();
43+
}
44+
45+
startEl.addEventListener("click",startTimer);
46+
stopEl.addEventListener("click",stopTimer);
47+
resetEl.addEventListener("click",resetTimer);

‎projects/pomodoro-timer/style.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* Pomodoro Timer styles */
2+
3+
.container {
4+
font-family:"Roboto", Arial, Helvetica, sans-serif;
5+
margin:0 auto;
6+
max-width:400px;
7+
padding:20px;
8+
text-align: center;
9+
}
10+
11+
.title {
12+
font-size:36px;
13+
margin-bottom:10px;
14+
color:#2c3e50;
15+
}
16+
17+
.timer {
18+
font-size:72px;
19+
color:#2c3e50;
20+
}
21+
22+
.button-wrapper {
23+
display: flex;
24+
justify-content: center;
25+
}
26+
27+
.button {
28+
border: none;
29+
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;
37+
cursor: pointer;
38+
}
39+
40+
.button--start {
41+
background-color:#27ae60;
42+
}
43+
44+
.button--start:hover {
45+
background-color:#229954;
46+
}
47+
48+
.button--stop {
49+
background-color:#c0392b;
50+
}
51+
52+
.button--stop:hover {
53+
background-color:#a93226;
54+
}
55+
56+
.button--reset {
57+
background-color:#7f8c8d;
58+
}
59+
60+
.button--reset:hover {
61+
background-color:#6c7a7d;
62+
}
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Rock Paper Scissors</title>
5+
<metacharset="UTF-8"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<linkrel="stylesheet"type="text/css"href="style.css"/>
8+
</head>
9+
<body>
10+
<h1>Rock Paper Scissors Game</h1>
11+
<p>Choose your move:</p>
12+
<divclass="buttons">
13+
<buttonid="rock">&#x1F44A;</button>
14+
<buttonid="paper">&#x1F590;</button>
15+
<buttonid="scissors">&#x270C;</button>
16+
17+
<!-- HTML entities are used to display the icons. -->
18+
</div>
19+
<pid="result"></p>
20+
<pid="scores">
21+
Your score:<spanid="player-score">0</span> Computer's score:
22+
<spanid="computer-score">0</span>
23+
</p>
24+
25+
<scriptsrc="index.js"></script>
26+
</body>
27+
</html>
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
constbuttons=document.querySelectorAll("button");
2+
letplayerScore=0;
3+
letcomputerScore=0;
4+
5+
buttons.forEach((button)=>{
6+
button.addEventListener("click",()=>{
7+
playRound(button.id,computerPlay());
8+
});
9+
});
10+
11+
functioncomputerPlay(){
12+
constchoices=["rock","paper","scissors"];
13+
returnchoices[Math.floor(Math.random()*choices.length)];
14+
}
15+
16+
functionplayRound(playerSelection,computerSelection){
17+
if(playerSelection===computerSelection){
18+
document.getElementById("result").textContent="Tie game!";
19+
}elseif(
20+
(playerSelection==="rock"&&computerSelection==="scissors")||
21+
(playerSelection==="paper"&&computerSelection==="rock")||
22+
(playerSelection==="scissors"&&computerSelection==="paper")
23+
){
24+
playerScore++;
25+
document.getElementById(
26+
"result"
27+
).textContent=`You win!${playerSelection} beats${computerSelection}`;
28+
}else{
29+
computerScore++;
30+
document.getElementById(
31+
"result"
32+
).textContent=`You lose!${computerSelection} beats${playerSelection}`;
33+
}
34+
updateScore();
35+
}
36+
37+
functionupdateScore(){
38+
document.getElementById(
39+
"player-score"
40+
).textContent=`Your score:${playerScore}`;
41+
document.getElementById(
42+
"computer-score"
43+
).textContent=`Computer's score:${computerScore}`;
44+
}
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color:#f1f1f1;
7+
font-family: Arial, sans-serif;
8+
margin:0;
9+
padding:0;
10+
}
11+
12+
h1 {
13+
font-size:2rem;
14+
text-align: center;
15+
padding-top:100px;
16+
}
17+
18+
p {
19+
font-size:1.2rem;
20+
margin-bottom:0.5rem;
21+
text-align: center;
22+
}
23+
24+
.buttons {
25+
display: flex;
26+
justify-content: center;
27+
}
28+
29+
button {
30+
border: none;
31+
border-radius:5px;
32+
color: white;
33+
cursor: pointer;
34+
font-size:3rem;
35+
margin:00.5rem;
36+
padding:0.5rem;
37+
transition: all0.3s ease-in-out;
38+
}
39+
40+
button:hover {
41+
opacity:0.7;
42+
}
43+
44+
#rock {
45+
background-color:#f44336;/* Red */
46+
}
47+
48+
#paper {
49+
background-color:#2196f3;/* Blue */
50+
}
51+
52+
#scissors {
53+
background-color:#4caf50;/* Green */
54+
}
55+
56+
#result {
57+
font-size:1.5rem;
58+
font-weight: bold;
59+
margin:1rem0;
60+
}
61+
62+
#scores {
63+
font-size:1.2rem;
64+
font-weight: bold;
65+
text-align: center;
66+
}
67+
68+
#player-score {
69+
color:#4caf50;
70+
margin-right:0.5rem;
71+
}
72+
73+
#computer-score {
74+
color:#f44336;
75+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp