frontendmentorio · KazemMirzayi · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023
diff --git a/app.js b/app.js
@@ -0,0 +1,47 @@
+
+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 isrulesshow (){
+  //   if (rules.style.display !== "none") 
+  //     return true;
+  //   else 
+  //       return false; 
+  // }
+  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);
+});
diff --git a/index.html b/index.html
@@ -1,37 +1,58 @@
 <!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>
-
-  Score
-  Rules
-
-  You Picked
-  The House Picked
-
-  You Win
-  You Lose
+  <title>Rock Paper Scissors</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="./app.js"></script>
 
-  Play Again
-
-  <!-- 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 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">
+      <div class="button hand-paper">
+        <img src="images/icon-paper.svg" alt="Hand paper" class="hand-image">
+      </div>
+      <div class="button hand-scissors">
+        <img src="images/icon-scissors.svg" alt="Hand scissors" class="hand-image">
+      </div>
+      <div class="button hand-rock">
+        <img src="images/icon-rock.svg" alt="Hand rock" class="hand-image">
+      </div>
+    </div>
+    <button class="rules-btn" tabindex="1" id="rulesButton">RULES</button>
+
+     <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="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>
+  <script type="module" src="./ main.js"></script>
+
 </body>
+
 </html>
diff --git a/modal.js b/modal.js
@@ -0,0 +1,42 @@
+export function showModal() {
+    var rulesBtn = document.querySelector('.rules-btn');
+    var imageDiv = document.getElementById('imageDiv');
+    var closeBtn = document.getElementById('closeBtn');
+
+    rulesBtn.addEventListener('click', function() {
+      imageDiv.style.display = 'block';
+    });
+
+    closeBtn.addEventListener('click', function() {
+      imageDiv.style.display = 'none';
+    });
+}
+
+// export function showModal() {
+//     var rulesBtn = document.querySelector('.rules-btn');
+//     var imageDiv = document.getElementById('imageDiv');
+
+//     rulesBtn.addEventListener('click', function() {
+//         imageDiv.classList.toggle('show');
+//     });
+// }
+
+// function toggleShowRules() {
+//     if (isRulesShown())
+//       hideRules();
+//     else
+//       showRules();
+//   }
+
+//   function isRulesShown() {
+//     return rules.display.style !== "none";
+//   }
+
+//   function showRules() {
+//     rules.display.style = "block";
+//   }
+
+//   function hideRules() {
+//     rules.display.style = "none";
+//   }
+
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,142 @@
+* {
+  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%);
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,3 @@
+import { showModal } from './modal.js';
+
+showModal();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { showModal } from './modal.js';

		showModal();