diff --git a/projects/rock-paper-scissors/index.html b/projects/rock-paper-scissors/index.html index e55fee6..b13b199 100644 --- a/projects/rock-paper-scissors/index.html +++ b/projects/rock-paper-scissors/index.html @@ -9,12 +9,18 @@

Rock-Paper-Scissors Game

- - - - - +
+ + + +
+
+
+
+ 0 : 0 +
+
- \ No newline at end of file + diff --git a/projects/rock-paper-scissors/main.js b/projects/rock-paper-scissors/main.js index 089cdee..b99abf1 100644 --- a/projects/rock-paper-scissors/main.js +++ b/projects/rock-paper-scissors/main.js @@ -1,14 +1,75 @@ -// TODO: Handle user selection (rock, paper, scissors) -// TODO: Generate computer choice -// TODO: Determine winner/loser/draw -// TODO: Update and display scoreboard -// TODO: Restart game functionality - function initRockPaperScissors() { - // TODO: Handle user choice - // TODO: Generate computer choice - // TODO: Determine winner - // TODO: Update scoreboard + const choices = ["rock", "paper", "scissors"]; + let userScore = 0; + let computerScore = 0; + + const userScoreSpan = document.getElementById("user-score"); + const computerScoreSpan = document.getElementById("computer-score"); + const resultDiv = document.getElementById("result"); + const displayChoicesDiv = document.getElementById("display-choices"); + const btns = document.querySelectorAll(".rps-btn"); + const restartBtn = document.getElementById("restart-btn"); + + function getComputerChoice() { + return choices[Math.floor(Math.random() * 3)]; + } + + function getResult(user, computer) { + if (user === computer) return "draw"; + if ( + (user === "rock" && computer === "scissors") || + (user === "paper" && computer === "rock") || + (user === "scissors" && computer === "paper") + ) + return "win"; + return "lose"; + } + + function displayScores() { + userScoreSpan.textContent = userScore; + computerScoreSpan.textContent = computerScore; + } + + function handleClick(e) { + const userChoice = e.target.dataset.choice; + const computerChoice = getComputerChoice(); + const outcome = getResult(userChoice, computerChoice); + displayChoicesDiv.textContent = `You: ${capitalize( + userChoice + )} | Computer: ${capitalize(computerChoice)}`; + if (outcome === "win") { + userScore++; + resultDiv.textContent = "You win!"; + resultDiv.style.color = "#349946"; + } else if (outcome === "lose") { + computerScore++; + resultDiv.textContent = "You lose!"; + resultDiv.style.color = "#d43d29"; + } else { + resultDiv.textContent = "It's a draw!"; + resultDiv.style.color = "#4078b3"; + } + displayScores(); + } + + function capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1); + } + + btns.forEach((btn) => { + btn.addEventListener("click", handleClick); + }); + + restartBtn.addEventListener("click", function () { + userScore = 0; + computerScore = 0; + displayScores(); + resultDiv.textContent = ""; + displayChoicesDiv.textContent = ""; + }); + + // Initial score display + displayScores(); } -window.addEventListener('DOMContentLoaded', initRockPaperScissors); \ No newline at end of file +window.addEventListener("DOMContentLoaded", initRockPaperScissors); diff --git a/projects/rock-paper-scissors/styles.css b/projects/rock-paper-scissors/styles.css index bfbf614..1cf5b55 100644 --- a/projects/rock-paper-scissors/styles.css +++ b/projects/rock-paper-scissors/styles.css @@ -1 +1,109 @@ -/* TODO: Style RPS container, buttons, choices display, scoreboard, restart button */ \ No newline at end of file +body { + font-family: "Segoe UI", Arial, sans-serif; + background: linear-gradient(120deg, #e0e7ff, #f5f5fa 60%); + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +h1 { + text-align: center; + color: #2744ae; + margin-top: 2.2em; + font-weight: 700; + letter-spacing: 0.5px; +} + +#rps-container { + background: #fff; + padding: 2em 2.5em 2.2em 2.5em; + border-radius: 15px; + box-shadow: 0 6px 24px #d0d7eacc; + max-width: 340px; + width: 90vw; + margin: 1.4em auto 0 auto; + text-align: center; +} + +.btn-group { + margin-bottom: 1em; + display: flex; + justify-content: center; + gap: 1em; +} + +.rps-btn { + background: #f1f4ff; + border: 2px solid #dbeafe; + border-radius: 8px; + padding: 0.7em 1.5em; + font-size: 1.08em; + color: #2252ba; + font-weight: 500; + cursor: pointer; + transition: background 0.15s, border-color 0.15s, color 0.15s; + box-shadow: 0 1px 3px #eee; +} + +.rps-btn:hover, +.rps-btn:focus { + background: #e0eaff; + border-color: #7da9f2; + color: #2744ae; + outline: none; +} + +#display-choices { + font-size: 1.09em; + margin-bottom: 0.7em; + color: #395e9d; + min-height: 1.4em; +} + +#result { + font-weight: 600; + font-size: 1.18em; + min-height: 2em; + margin-bottom: 0.5em; +} + +#scoreboard { + font-size: 1.24em; + font-weight: 500; + margin: 1em 0 1em 0; + color: #1a851a; + letter-spacing: 1.5px; +} + +#restart-btn { + background: #5078f0; + color: #fff; + border: none; + border-radius: 8px; + padding: 0.58em 1.6em; + font-size: 1.09em; + cursor: pointer; + margin-top: 0.8em; + box-shadow: 0 1px 4px #e5e9fc; + transition: background 0.18s; + font-weight: 500; +} + +#restart-btn:hover, +#restart-btn:focus { + background: #2445a2; + outline: none; +} + +@media (max-width: 480px) { + #rps-container { + padding: 1.1em 0.8em 1.4em 0.8em; + max-width: 96vw; + } + + .btn-group { + gap: 0.5em; + } +}