diff --git a/Rock-Paper-Scissors-Game/app.js b/Rock-Paper-Scissors-Game/app.js
index 2222b4f..31fa2a1 100644
--- a/Rock-Paper-Scissors-Game/app.js
+++ b/Rock-Paper-Scissors-Game/app.js
@@ -2,6 +2,10 @@ const computerChoiceDisplay = document.getElementById("computer-choice");
const userChoiceDisplay = document.getElementById("user-choice");
const resultDisplay = document.getElementById("winner");
const possibleChoices = document.querySelectorAll(".button-container > img");
+const resetScoreElement = document.querySelector(".js-resetScore-button");
+resetScoreElement.addEventListener("click", () => {
+ resetScore();
+});
let userChoice;
let computerChoice;
@@ -60,3 +64,17 @@ function scoreElement() {
".js-score"
).innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}.`;
}
+function resetScore() {
+ const message = document.querySelector(".js-confirmation-message");
+ message.innerHTML =
+ "Are you sure you want to reset the score? ";
+ document.querySelector(".js-yes-button").addEventListener("click", () => {
+ (score.wins = 0), (score.losses = 0), (score.ties = 0);
+ localStorage.removeItem("score");
+ scoreElement();
+ message.innerHTML = "";
+ });
+ document.querySelector(".js-no-button").addEventListener("click", () => {
+ message.innerHTML = "";
+ });
+}
diff --git a/Rock-Paper-Scissors-Game/index.html b/Rock-Paper-Scissors-Game/index.html
index 975214c..e2a760d 100644
--- a/Rock-Paper-Scissors-Game/index.html
+++ b/Rock-Paper-Scissors-Game/index.html
@@ -30,6 +30,8 @@
+
+
Winner:
diff --git a/Rock-Paper-Scissors-Game/style.css b/Rock-Paper-Scissors-Game/style.css
index 0684604..29f4e89 100644
--- a/Rock-Paper-Scissors-Game/style.css
+++ b/Rock-Paper-Scissors-Game/style.css
@@ -1,8 +1,8 @@
body {
- background-color: #eec6c6;
- font-family: 'Arial', sans-serif;
+ background-color: #eec6c6;
+ font-family: "Arial", sans-serif;
text-align: center;
- background-image: linear-gradient(to bottom, #f9b4c2, #ffdb86);
+ background-image: linear-gradient(to bottom, #f9b4c2, #ffdb86);
color: #ffffff;
position: relative;
min-height: 91.5vh;
@@ -13,17 +13,20 @@ body {
}
body::before {
- content: '';
+ content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
- background-image: radial-gradient(ellipse at center, rgba(246, 231, 231, 0.813) 0%, rgba(0,0,0,0.9) 100%);
+ background-image: radial-gradient(
+ ellipse at center,
+ rgba(246, 231, 231, 0.813) 0%,
+ rgba(0, 0, 0, 0.9) 100%
+ );
z-index: -1;
}
-
h1 {
font-size: 36px;
font-weight: bold;
@@ -31,7 +34,8 @@ h1 {
margin-bottom: 20px;
}
-h2 {
+h2,
+.score {
color: #ffffff;
font-size: 24px;
font-weight: bold;
@@ -55,7 +59,10 @@ button {
cursor: pointer;
transition: background-color 0.3s ease;
}
-
+.resetScore {
+ width: 15%;
+ margin: 0 auto;
+}
button:hover {
background-color: #45a049;
}
@@ -74,7 +81,6 @@ button:hover {
display: flex;
justify-content: center;
margin-bottom: 20px;
-
}
.button-container > button {
@@ -144,15 +150,13 @@ nav {
font-size: 18px;
}
-
-.button-container>img{
+.button-container > img {
width: 10%;
margin: 0 10px;
cursor: pointer;
-
}
-.logo{
+.logo {
width: 20%;
}
@@ -166,10 +170,12 @@ footer {
width: 98.7%;
}
-#Rock , #Paper, #Scissors{
+#Rock,
+#Paper,
+#Scissors {
margin: 5%;
-}
+}
-#winner{
+#winner {
width: 5px;
-}
\ No newline at end of file
+}