diff --git a/app.js b/app.js new file mode 100644 index 0000000..b0711e6 --- /dev/null +++ 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); +}); \ No newline at end of file diff --git a/index.html b/index.html index d8d9815..1e29cd7 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,58 @@ + - + + - - Frontend Mentor | Rock, Paper, Scissors - - Score - Rules - - You Picked - The House Picked - - You Win - You Lose + Rock Paper Scissors + + - Play Again - - - + +
+
+ +
+

SCORE

+

13

+
+
+
+
+ Hand paper +
+
+ Hand scissors +
+
+ Hand rock +
+
+ + +
+
+
+

RULES

+ +
+ +
+
- -
- Challenge by Frontend Mentor. - Coded by Your Name Here.
+ + + \ No newline at end of file diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..cb3ade9 --- /dev/null +++ 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"; +// } + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..cbaa67e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "rock-paper-scissors", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..00cf67c --- /dev/null +++ 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 new file mode 100644 index 0000000..065ef2e --- /dev/null +++ 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/\302\240main.js" "b/\302\240main.js" new file mode 100644 index 0000000..22aa475 --- /dev/null +++ "b/\302\240main.js" @@ -0,0 +1,3 @@ +import { showModal } from './modal.js'; + +showModal();