frontendmentorio · OussamaTahiri · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023
diff --git a/app.js b/app.js
@@ -0,0 +1,54 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+  const rulesButton = document.getElementById("rulesButton");
+  const rules = document.querySelector(".rules");
+  const rulesContainer = document.querySelector(".rules_container");
+  const closeButton = document.querySelector(".close_btn");
+ console.log(rules);
+  // Function to show the rules
+  function showRules() {
+    rules.style.display = "block";
+
+  }
+
+  function toggleShowRules() {
+    if (isRulesShown())
+      hideRules();
+    else
+      showRules();
+  }
+
+  function isRulesShown() {
+    return rules.style.display !== "none";
+  }
+
+  function showRules() {
+    rules.style.display= "block";
+  }
+
+  function hideRules() {
+    rules.display.style = "none";
+  }
+
+  // Function to hide the rules
+  function hideRules() {
+    rules.style.display = "none";
+  }
+  // Attach event listener to the "RULES" button
+  rulesButton.addEventListener("click", toggleShowRules);
+
+  // Attach event listener to the "close" button
+  closeButton.addEventListener("click", hideRules);
+
+}); 
+  const pickUserHand = (hand) => {
+    console.log(hand);
+
+    let hands = document.querySelector(".hands");
+    hands.style.display = "none";
+
+    let rulesButton = document.querySelector(".rules-btn");
+    rulesButton.style.display = "none";
+  }
+
+
diff --git a/index.html b/index.html
@@ -1,37 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
-  <title>Frontend Mentor | Rock, Paper, Scissors</title>
+  <title>Rock Paper Scissors</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="./app.js"></script>
 
-  Score
-  Rules
+</head>
 
-  You Picked
-  The House Picked
+<body>
 
-  You Win
-  You Lose
+  <div class="container">
+    <div class="score-header">
+      <div class="logo">
+        <img src="images/logo.svg" alt="Logo">
+      </div>
+      <div class="score">
+        <p class="score-name">SCORE</p>
+        <h1 class="score-number">13</h1>
+      </div>
+    </div>
+    <div class="hands">
 
-  Play Again
+      <div class="hand paper">
+        <img src="images/icon-paper.svg" alt="" class="hand-image" onclick="pickUserHand('paper')">
+      </div>
+      <div class="hand scissors">
+        <img src="/images/icon-scissors.svg" alt="" class="hand-image" onclick="pickUserHand('scissors')">
+      </div>
+      <div class="hand rock">
+        <img src="/images/icon-rock.svg" alt="" class="hand-image" onclick="pickUserHand('rock')">
 
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
-</head>
-<body>
+      </div>
+    </div>
+    <button class="rules-btn" tabindex="1" id="rulesButton">RULES</button>
 
-
-
-  <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
+     <div class="rules">
+      <div class="rules_container">
+        <div class="rules_header">
+          <h2>RULES</h2>
+          <button class="close_btn">
+            <img src="./images/icon-close.svg" alt="close button">
+          </button>
+        </div>
+        <img src="./images/image-rules.svg" alt="" class="image-rules">
+      </div>
+     </div>
+           <div class="container2">
+                <div class="userhand">
+                    <h1>YOU PICKED</h1>
+                    <div class="handImageContainer">
+                          <img src="./images/icon-paper.svg" alt="paper-hand"  class="paper2">
+                    </div>
+                </div>
+                <div class="result">
+                  <div class="decision"><h1>YOU WIN</h1></div>
+                  <div class="newGame">PLAY AGAIN</div>
+                </div>
+                <div class="computerhand">
+                         <h1>THE HOUSE PICKED</h1>
+                         <div class="handImageContainer">
+                          <img src="./images/icon-scissors.svg" alt="scissors" class="scissors2">
+                         </div>
+                </div>
+           </div>
   </div>
+
+
 </body>
+
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "rock-paper-scissors",
+  "version": "1.0.0",
+  "description": "![Design preview for the Rock, Paper, Scissors coding challenge](./design/desktop-preview.jpg)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,191 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100vh;
+  background: linear-gradient(to top, #000428, #3f4567);
+  color: #ffffff;
+}
+
+.score-header {
+  width: 45%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2%;
+  padding: 10px 20px;
+  background-color: transparent;
+  border-radius: 20px;
+  border: solid rgb(248, 244, 244, 0.3) 2px;
+}
+
+.logo {
+  margin-right: auto;
+}
+
+.score {
+  width: 24%;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  background-color: white;
+  border-radius: 7px;
+  margin: 5px 0px;
+  padding: 13px 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.score-name {
+  font-size: larger;
+  display: flex;
+  justify-content: center;
+  color: #004e92;
+}
+
+.score-number {
+  display: flex;
+  justify-content: center;
+  font-size: 48px;
+  font-weight: bold;
+  color: rgb(0, 0, 0, 0.6);
+}
+
+.hands {
+  position: relative;
+  top: 55%;
+  right: 25%;
+}
+
+.button {
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  color: white;
+  background-color:azure;
+  border: 14px solid hsl(349, 71%, 52%);
+  text-align: center;
+  padding-top: 35px;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+.hand-paper {
+  position: absolute;
+  right: 80%;
+  bottom: 150%;
+  border-color:rgb(75, 67, 238) ;
+}
+
+.hand-scissors {
+  position: absolute;
+  left: 80%;
+  bottom: 150%;
+  border-color: darkorange;
+}
+
+.hand-rock {
+  border-color:rgb(233, 42, 83)
+}
+
+.rules-btn {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    background: none;
+    border-radius: 0.6rem;
+    border-color: #fff;
+    color: white;
+    padding: 0.6rem 2.5rem;
+    font-family: inherit;
+    text-transform: inherit;
+    font-size: 23px;
+    letter-spacing: 5px;
+    cursor: pointer;
+  }
+
+.rules{
+    position: relative;
+    /* margin-top: 100px; */
+    padding: 20px;
+}
+.rules_container{
+    background-color: #fff;
+    padding: 30px 30px;
+    align-items: center;
+    border-radius: 10px;
+}
+.rules_header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 2rem;
+
+}
+.close_btn{
+ border: none;
+ outline: none;
+ background: none;
+ font-size: 2rem;
+ cursor: pointer;
+}
+.image-rules{
+   padding: 1rem 2rem;
+}
+.rules_container .h2 {
+    color: hsl(229, 25%, 31%);
+}
+
+.scissors2{
+    border: 23px solid hsl(39, 89%, 49%);
+    border-radius: 50%;
+    box-shadow: 0px 8px 3px #cac8c8 inset;
+    padding: 40px;
+    background-color: #fff;
+    height: 195px;
+    cursor: pointer;
+}
+.paper2{
+    border: 23px solid hsl(230, 89%, 62%);
+    border-radius: 50%;
+    box-shadow: 0px 8px 3px #cac8c8 inset;
+    padding: 50px;
+    background-color: #fff;
+    height: 195px;
+    cursor: pointer;
+}
+.container2 {
+    width: 900px;
+    display: flex;
+    margin-top: 60px;
+}
+/* .container2 img {
+    width: 180px;
+    height: 180px;
+} */
+.container2 > div {
+    flex: 1;
+}
+.container2 h1 {
+    color: white;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    text-align: center;
+}
+.container2 .handImageContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.result{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+