Add LightMode

CONTRIBUTING.md

@@ -1,4 +1,5 @@
 # Add your Github username below if you are contributing to this project.
 
 1. zetabug
-1. jjakk
+2. jjakk
+3. khamal45

app.js

@@ -1,7 +1,7 @@
 const options = ["rock", "paper", "scissor"];
 let score = {
   you: 0,
-  computer: 0
+  computer: 0,
 };
 const WIN_GREEN = "#6ac475";
 const LOSE_RED = "#c4736a";
@@ -19,12 +19,11 @@ btns.forEach((btn) => {
   btn.addEventListener("click", () => {
     document.querySelector(".hands .player-hand").src = "rock.png";
     document.querySelector(".hands .computer-hand").src = "rock.png";
-    playerHand.classList.add('shakePlayer')
-    computerHand.classList.add('shakeComputer')
+    playerHand.classList.add("shakePlayer");
+    computerHand.classList.add("shakeComputer");
     const playerA = btn.querySelector("label").innerText;
     const playerB = options[getRandomInt()];
-    setTimeout(()=>compare(playerA, playerB),1000)
-
+    setTimeout(() => compare(playerA, playerB), 1000);
   });
 });
 
@@ -108,11 +107,10 @@ function update(player, computer) {
   } else if (computer == "scissor") {
     computerHand.src = scissor;
   }
-  playerHand.classList.remove('shakePlayer')
-  computerHand.classList.remove('shakeComputer')
+  playerHand.classList.remove("shakePlayer");
+  computerHand.classList.remove("shakeComputer");
 }
 
-
 //Reset Game Button ---------------------------------
 const resetBtn = document.querySelector(".reset");
 resetBtn.addEventListener("click", () => {
@@ -125,6 +123,27 @@ resetBtn.addEventListener("click", () => {
   document.querySelector(".hands .computer-hand").src = "rock.png";
 });
 
+document.addEventListener("DOMContentLoaded", () => {
+  const toggleButton = document.getElementById("toggleTheme");
+
+  const body = document.body;
+
+  // Load the theme from localStorage
+  const currentTheme = localStorage.getItem("theme") || "dark-mode";
+  body.classList.add(currentTheme);
+
+  toggleButton.addEventListener("click", () => {
+    if (body.classList.contains("dark-mode")) {
+      body.classList.remove("dark-mode");
+      body.classList.add("light-mode");
+      localStorage.setItem("theme", "light-mode");
+    } else {
+      body.classList.remove("light-mode");
+      body.classList.add("dark-mode");
+      localStorage.setItem("theme", "dark-mode");
+    }
+  });
+});
 
 // // Mapping
 // // 0 -> rock, 1->paper, 2->scissor

index.html

@@ -43,28 +43,35 @@ <h2 class="result"></h2>
         <h2 class="winner">Choose an option</h2>
         <div class="options">
           <button class="rock">
-            <img src="./rock.svg" alt="rock"></img>
+            <img class="icon" src="./rock.svg" alt="rock"></img>
             <br>
             <label>rock</label>
           </button>
           <button class="paper">
-            <img src="./paper.svg" alt="paper"></img>
+            <img class="icon" src="./paper.svg" alt="paper"></img>
             <br>
             <label>paper</label>
           </button>
           <button class="scissor">
-            <img src="./scissor.svg" alt="scissor"></img>
+            <img  class="icon" id="scissor"  src="./scissor.svg" alt="scissor"></img>
             <br>
             <label>scissor</label>
           </button>
         </div>
       </div>
-
+
+
       <!----- Reset Button ----->
       <div class="reset-div">
         <button class="reset">Reset Game</button>
       </div>
 
+   <div  id="toggleTheme" class="toggle">
+    <img class="sun" width="50vw" src="sun.svg" alt="">
+    <img class="moon" width="50vw" src="moon.svg" alt="">
+   </div>
+
+
     </section>
   </body>
 </html>

style.css

@@ -1,18 +1,38 @@
 @keyframes shakePlayer {
-  0% { transform: scaleX(-1) translateY(0) }
-  25% { transform:scaleX(-1) translateY(10px) }
-  50% { transform:scaleX(-1) translateY(-10px) }
-  75% { transform:scaleX(-1) translateY(10px) }
-  100% { transform:scaleX(-1) translateY(0) }
- }
-
- @keyframes shakeComputer {
-  0% { transform: translateY(0) }
-  25% { transform: translateY(10px) }
-  50% { transform: translateY(-10px) }
-  75% { transform: translateY(10px) }
-  100% { transform: translateY(0) }
- }
+  0% {
+    transform: scaleX(-1) translateY(0);
+  }
+  25% {
+    transform: scaleX(-1) translateY(10px);
+  }
+  50% {
+    transform: scaleX(-1) translateY(-10px);
+  }
+  75% {
+    transform: scaleX(-1) translateY(10px);
+  }
+  100% {
+    transform: scaleX(-1) translateY(0);
+  }
+}
+
+@keyframes shakeComputer {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(10px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  75% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
 
 html,
 body {
@@ -29,11 +49,11 @@ section {
   min-height: 100vh;
   margin: 0 auto;
   width: 80vw;
+  position: relative;
 }
 
-
 /*--- Reset Button -----*/
-.reset{
+.reset {
   background: #0f0f0f;
   border: 1px solid #fff;
   color: #fff;
@@ -45,12 +65,12 @@ section {
   transition: all 0.3s ease;
 }
 
-.reset:hover{
+.reset:hover {
   background: #fff;
   color: #0f0f0f;
 }
 
-.reset-div{
+.reset-div {
   text-align: center;
 }
 /*--------------------*/
@@ -71,28 +91,27 @@ section {
   text-align: center;
 }
 
-.score h2{
+.score h2 {
   font-weight: 400;
 }
 
-.score hr{
+.score hr {
   margin-top: 25px;
   margin-bottom: 25px;
 }
 
-.winner{
+.winner {
   font-weight: 400;
 }
 
-.shakePlayer{
-  animation:shakePlayer 0.25s infinite;
+.shakePlayer {
+  animation: shakePlayer 0.25s infinite;
 }
-.shakeComputer{
-  animation:shakeComputer 0.25s infinite;
+.shakeComputer {
+  animation: shakeComputer 0.25s infinite;
 }
 
-@media screen and (max-width:725px) {
-
+@media screen and (max-width: 725px) {
 }
 .match {
   display: flex;
@@ -141,66 +160,111 @@ section {
   background-color: transparent;
 }
 
-.options button label{
+.options button label {
   font-size: 18px;
   margin-top: 0px;
   opacity: 0;
   display: none;
 }
 
-.options button:hover > label{
+.options button:hover > label {
   margin-top: 25px;
   display: inline-block;
   opacity: 1;
 }
 
-.options button img{
+.options button img {
   height: 50px;
 }
 
-.options .paper img{
+.options .paper img {
   width: 50px;
   height: auto;
 }
 
-.options .rock img{
+.options .rock img {
   margin-top: 10px;
 }
 
-.options .scissor img{
+.options .scissor img {
   margin-top: 10px;
 }
 
 @media screen and (max-width: 810px) {
-  .score{
+  .score {
     max-width: 60vw;
   }
-  .player-hand, .computer-hand {
+  .player-hand,
+  .computer-hand {
     width: 215px;
   }
-  h2.result{
+  h2.result {
     font-size: 1.3rem;
   }
-  h2.winner{
+  h2.winner {
     font-size: 1.5rem;
   }
 }
 
 @media screen and (max-width: 550px) {
-  .score{
+  .score {
     max-width: 70vw;
   }
-  .hands{
+  .hands {
     gap: 1rem;
   }
-.player-hand,
-.computer-hand{
-  width: 170px;
+  .player-hand,
+  .computer-hand {
+    width: 170px;
+  }
+  h2.result {
+    font-size: 1.2rem;
+  }
+  h2.winner {
+    font-size: 1.5rem;
+  }
 }
-h2.result{
-  font-size: 1.2rem;
+
+.light-mode {
+  background: #ffffff;
+  color: #000000;
+}
+
+.light-mode .score {
+  border-color: #000000;
+}
+
+.light-mode .reset {
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
 }
-h2.winner{
-  font-size: 1.5rem;
+
+.light-mode .reset:hover {
+  background: #000000;
+  color: #ffffff;
 }
+
+.light-mode .icon {
+  filter: invert(1) brightness(1) contrast(1);
+}
+
+.toggle {
+  cursor: pointer;
+  width: fit-content;
+  position: absolute;
+  top: 0;
+  margin: 10px;
+}
+
+.light-mode .sun {
+  display: none;
+}
+
+.moon {
+  display: none;
+}
+
+.light-mode .moon {
+  display: block;
 }