diff --git a/Rock Paper Scissors/index.html b/Rock Paper Scissors/index.html index e9e76906..0c715c4e 100644 --- a/Rock Paper Scissors/index.html +++ b/Rock Paper Scissors/index.html @@ -1,7 +1,6 @@ - @@ -9,7 +8,6 @@ JavaScript Game | Rock Paper Scissors -
@@ -45,11 +43,13 @@
- - - + - - \ No newline at end of file + diff --git a/Rock Paper Scissors/scripts/script.js b/Rock Paper Scissors/scripts/script.js index 6c6dcd52..0ddba11e 100644 --- a/Rock Paper Scissors/scripts/script.js +++ b/Rock Paper Scissors/scripts/script.js @@ -4,13 +4,43 @@ const gameContainer = document.querySelector(".container"), result = document.querySelector(".result"), userScoreDisplay = document.querySelector(".user_score"), cpuScoreDisplay = document.querySelector(".cpu_score"), - resetButton = document.querySelector(".reset"); + resetButton = document.querySelector(".reset"), + winnerModal = document.getElementById("winnerModal"), + winnerMessage = document.getElementById("winnerMessage"), + playAgainButton = document.getElementById("playAgainButton"); let userScore = 0, cpuScore = 0; const optionImages = document.querySelectorAll(".option_image"); +function checkWinner() { + if (userScore === 5) { + showWinner("User"); + } else if (cpuScore === 5) { + showWinner("CPU"); + } +} + +function showWinner(winner) { + winnerMessage.textContent = `${winner} Won 5 Times!`; + winnerModal.style.display = "block"; +} + +function resetGame() { + userScore = 0; + cpuScore = 0; + userScoreDisplay.textContent = `User: ${userScore}`; + cpuScoreDisplay.textContent = `CPU: ${cpuScore}`; + result.textContent = "Let's Play!!"; + optionImages.forEach(image => image.classList.remove("active")); +} + +playAgainButton.addEventListener("click", () => { + winnerModal.style.display = "none"; + resetGame(); +}); + optionImages.forEach((image, index) => { image.addEventListener("click", (e) => { image.classList.add("active"); @@ -61,14 +91,12 @@ optionImages.forEach((image, index) => { userScoreDisplay.textContent = `User: ${userScore}`; cpuScoreDisplay.textContent = `CPU: ${cpuScore}`; + + checkWinner(); }, 2500); }); }); resetButton.addEventListener("click", () => { - userScore = 0; - cpuScore = 0; - userScoreDisplay.textContent = `User: ${userScore}`; - cpuScoreDisplay.textContent = `CPU: ${cpuScore}`; - result.textContent = "Let's Play!!"; + resetGame(); }); diff --git a/Rock Paper Scissors/src/style.css b/Rock Paper Scissors/src/style.css index a208d878..03afe7e6 100644 --- a/Rock Paper Scissors/src/style.css +++ b/Rock Paper Scissors/src/style.css @@ -72,7 +72,7 @@ body { font-size: 1.2rem; color: #333; position: absolute; - top: 100px; + top: 20px; } .user_score { @@ -137,3 +137,49 @@ body { .reset:hover { background-color: #6c1ccf; } + +/* Existing styles... */ + +/* Modal styles */ +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); +} + +.modal-content { + background-color: #fff; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 400px; + text-align: center; + border-radius: 10px; +} + +.modal-content p { + font-size: 1.5rem; + color: #7d2ae8; +} + +.modal-content button { + padding: 10px 20px; + background-color: #7d2ae8; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + margin-top: 20px; +} + +.modal-content button:hover { + background-color: #5c1bb1; +}