diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 065d6be..e176fa0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,5 @@ # Add your Github username below if you are contributing to this project. 1. zetabug -1. jjakk \ No newline at end of file +2. jjakk +3. khamal45 diff --git a/app.js b/app.js index 8acbdef..ab2c5c9 100644 --- a/app.js +++ b/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 diff --git a/index.html b/index.html index d855c7d..5932597 100644 --- a/index.html +++ b/index.html @@ -43,28 +43,35 @@

Choose an option

- + +
+
+ + +
+ + diff --git a/moon.svg b/moon.svg new file mode 100644 index 0000000..11259f0 --- /dev/null +++ b/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style.css b/style.css index ff56940..17ef183 100644 --- a/style.css +++ b/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; } diff --git a/sun.svg b/sun.svg new file mode 100644 index 0000000..4b8370b --- /dev/null +++ b/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file