diff --git a/app.js b/app.js new file mode 100644 index 0000000..7d68586 --- /dev/null +++ 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 index d8d9815..219ec48 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,77 @@ + - + + - - Frontend Mentor | Rock, Paper, Scissors + Rock Paper Scissors + + - Score - Rules + - You Picked - The House Picked + - You Win - You Lose +
+
+ +
+

SCORE

+

13

+
+
+
- Play Again +
+ +
+
+ +
+
+ - - - - +
+
+ - - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. +
+
+
+

RULES

+ +
+ +
+
+
+
+

YOU PICKED

+
+ paper-hand +
+
+
+

YOU WIN

+
PLAY AGAIN
+
+
+

THE HOUSE PICKED

+
+ scissors +
+
+
+ + + \ 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..b5c12c0 --- /dev/null +++ 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; +} +