Skip to content

Commit 0c0e315

Browse files
sahandghavidelsahandghavidel
committed
add rock paper scissors game and pomodoro timer projects
1 parent 051f5a5 commit 0c0e315

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+
<link rel="stylesheet" type="text/css" href="style.css" />
6+
</head>
7+
<body>
8+
<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>
16+
</div>
17+
<script src="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+
const startEl = document.getElementById("start");
2+
const stopEl = document.getElementById("stop");
3+
const resetEl = document.getElementById("reset");
4+
const timerEl = document.getElementById("timer");
5+
6+
let intervalId;
7+
let timeLeft = 1500; // 25 minutes in seconds
8+
9+
function updateTimer() {
10+
let minutes = Math.floor(timeLeft / 60);
11+
let seconds = timeLeft % 60;
12+
let formattedTime = `${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+
function startTimer() {
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+
function stopTimer() {
36+
clearInterval(intervalId);
37+
}
38+
39+
function resetTimer() {
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: 10px 20px;
35+
text-transform: uppercase;
36+
transition: all 0.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+
}

‎projects/rock-paper-scissors-game/index.html

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+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="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+
<div class="buttons">
13+
<button id="rock">&#x1F44A;</button>
14+
<button id="paper">&#x1F590;</button>
15+
<button id="scissors">&#x270C;</button>
16+
17+
<!-- HTML entities are used to display the icons. -->
18+
</div>
19+
<p id="result"></p>
20+
<p id="scores">
21+
Your score: <span id="player-score">0</span> Computer's score:
22+
<span id="computer-score">0</span>
23+
</p>
24+
25+
<script src="index.js"></script>
26+
</body>
27+
</html>

‎projects/rock-paper-scissors-game/index.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const buttons = document.querySelectorAll("button");
2+
let playerScore = 0;
3+
let computerScore = 0;
4+
5+
buttons.forEach((button) => {
6+
button.addEventListener("click", () => {
7+
playRound(button.id, computerPlay());
8+
});
9+
});
10+
11+
function computerPlay() {
12+
const choices = ["rock", "paper", "scissors"];
13+
return choices[Math.floor(Math.random() * choices.length)];
14+
}
15+
16+
function playRound(playerSelection, computerSelection) {
17+
if (playerSelection === computerSelection) {
18+
document.getElementById("result").textContent = "Tie game!";
19+
} else if (
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+
function updateScore() {
38+
document.getElementById(
39+
"player-score"
40+
).textContent = `Your score: ${playerScore}`;
41+
document.getElementById(
42+
"computer-score"
43+
).textContent = `Computer's score: ${computerScore}`;
44+
}

‎projects/rock-paper-scissors-game/style.css

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: 0 0.5rem;
36+
padding: 0.5rem;
37+
transition: all 0.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: 1rem 0;
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy