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)