add rock paper scissors game and pomodoro timer projects

Author: sahandghavidel

projects/pomodoro-timer/index.html

@@ -0,0 +1,19 @@
+
+
+  
+    Pomodoro Timer
+    
+  
+  
+
+      Pomodoro Timer
+      25:00
+
+        Start
+        Stop
+        Reset
+      
+    
+    
+  
+

projects/pomodoro-timer/index.js

@@ -0,0 +1,47 @@
+const startEl = document.getElementById("start");
+const stopEl = document.getElementById("stop");
+const resetEl = document.getElementById("reset");
+const timerEl = document.getElementById("timer");
+
+let intervalId;
+let timeLeft = 1500; // 25 minutes in seconds
+
+function updateTimer() {
+  let minutes = Math.floor(timeLeft / 60);
+  let seconds = timeLeft % 60;
+  let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
+    .toString()
+    .padStart(2, "0")}`;
+  // 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.
+  //   const str = '7';
+  // const paddedStr = str.padStart(2, '0');
+
+  // console.log(paddedStr); // Output: '07'
+
+  timerEl.innerHTML = formattedTime;
+}
+
+function startTimer() {
+  intervalId = setInterval(() => {
+    timeLeft--;
+    updateTimer();
+    if (timeLeft === 0) {
+      clearInterval(intervalId);
+      alert("Time's up!");
+    }
+  }, 1000);
+}
+
+function stopTimer() {
+  clearInterval(intervalId);
+}
+
+function resetTimer() {
+  clearInterval(intervalId);
+  timeLeft = 1500;
+  updateTimer();
+}
+
+startEl.addEventListener("click", startTimer);
+stopEl.addEventListener("click", stopTimer);
+resetEl.addEventListener("click", resetTimer);

projects/pomodoro-timer/style.css

@@ -0,0 +1,62 @@
+/* Pomodoro Timer styles */
+
+.container {
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  margin: 0 auto;
+  max-width: 400px;
+  padding: 20px;
+  text-align: center;
+}
+
+.title {
+  font-size: 36px;
+  margin-bottom: 10px;
+  color: #2c3e50;
+}
+
+.timer {
+  font-size: 72px;
+  color: #2c3e50;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.button {
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 10px 20px;
+  text-transform: uppercase;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.button--start {
+  background-color: #27ae60;
+}
+
+.button--start:hover {
+  background-color: #229954;
+}
+
+.button--stop {
+  background-color: #c0392b;
+}
+
+.button--stop:hover {
+  background-color: #a93226;
+}
+
+.button--reset {
+  background-color: #7f8c8d;
+}
+
+.button--reset:hover {
+  background-color: #6c7a7d;
+}

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

@@ -0,0 +1,27 @@
+
+
+  
+    Rock Paper Scissors
+    
+    
+    
+  
+  
+    Rock Paper Scissors Game
+    Choose your move:
+
+      👊
+      🖐
+      ✌
+
+      
+    
+    
+    
+      Your score: 0 Computer's score:
+      0
+    
+
+    
+  
+

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

@@ -0,0 +1,44 @@
+const buttons = document.querySelectorAll("button");
+let playerScore = 0;
+let computerScore = 0;
+
+buttons.forEach((button) => {
+  button.addEventListener("click", () => {
+    playRound(button.id, computerPlay());
+  });
+});
+
+function computerPlay() {
+  const choices = ["rock", "paper", "scissors"];
+  return choices[Math.floor(Math.random() * choices.length)];
+}
+
+function playRound(playerSelection, computerSelection) {
+  if (playerSelection === computerSelection) {
+    document.getElementById("result").textContent = "Tie game!";
+  } else if (
+    (playerSelection === "rock" && computerSelection === "scissors") ||
+    (playerSelection === "paper" && computerSelection === "rock") ||
+    (playerSelection === "scissors" && computerSelection === "paper")
+  ) {
+    playerScore++;
+    document.getElementById(
+      "result"
+    ).textContent = `You win! ${playerSelection} beats ${computerSelection}`;
+  } else {
+    computerScore++;
+    document.getElementById(
+      "result"
+    ).textContent = `You lose! ${computerSelection} beats ${playerSelection}`;
+  }
+  updateScore();
+}
+
+function updateScore() {
+  document.getElementById(
+    "player-score"
+  ).textContent = `Your score: ${playerScore}`;
+  document.getElementById(
+    "computer-score"
+  ).textContent = `Computer's score: ${computerScore}`;
+}

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

@@ -0,0 +1,75 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f1f1f1;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 2rem;
+  text-align: center;
+  padding-top: 100px;
+}
+
+p {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+}
+
+button {
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 3rem;
+  margin: 0 0.5rem;
+  padding: 0.5rem;
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover {
+  opacity: 0.7;
+}
+
+#rock {
+  background-color: #f44336; /* Red */
+}
+
+#paper {
+  background-color: #2196f3; /* Blue */
+}
+
+#scissors {
+  background-color: #4caf50; /* Green */
+}
+
+#result {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 1rem 0;
+}
+
+#scores {
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+#player-score {
+  color: #4caf50;
+  margin-right: 0.5rem;
+}
+
+#computer-score {
+  color: #f44336;
+}