From cf3219221b317ad3477bd3fd82667c6bce8a6a97 Mon Sep 17 00:00:00 2001 From: Mohammad Sharaf Date: Thu, 5 Oct 2023 20:21:58 +0200 Subject: [PATCH 01/19] added hello world from Mohammad --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index d8d9815..c81338b 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,10 @@ Play Again +

+ Hello World from Mohammad +

+ + - +
- Challenge by Frontend Mentor. + Challenge by Frontend Mentor. Coded by Your Name Here.
+ \ No newline at end of file From 72d9e41dedcce0ce7db7181a8ec3d89ad3538dc7 Mon Sep 17 00:00:00 2001 From: Derya Aktas Date: Sun, 8 Oct 2023 00:47:32 +0200 Subject: [PATCH 08/19] added bg and score-header --- app.js | 0 index.html | 53 ++++++++++++++++++----------------------------------- styles.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 35 deletions(-) create mode 100644 app.js create mode 100644 styles.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index f576abf..93480a6 100644 --- a/index.html +++ b/index.html @@ -10,46 +10,29 @@ Frontend Mentor | Rock, Paper, Scissors - Score - Rules - - You Picked - The House Picked -

Hallo adgsad

- You Win - You Lose - - Play Again - -

A Rock

- -

- Hello World from Derya - Hello from Kazem - Hello again -

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

SCORE

+

12

+
+
+ \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6ea6d8f --- /dev/null +++ b/styles.css @@ -0,0 +1,54 @@ +* { margin: 0; +padding: 0; +box-sizing: border-box;} + +body { + background: radial-gradient(circle at top, hsl(214, 47%, 23%), hsl(237, 49%, 15%)); + background-size: cover; + width: 100vw; + height: 100vh; + font-family: 'Barlow Semi Condensed', sans-serif; +} + +.score-header { + width: 700px; + border: 1px solid white; + border-radius: 15px; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + height: 150px; +} + +.container { + display: flex; + flex-direction: column; + align-items:center; +} + +.score { + width: 120px; + height: 110px; + background-color: #fff; + border-radius: 8px; + margin-right: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.logo { + margin-left: 20px; +} + +.score p { + color: hsl(229, 64%, 46%); + letter-spacing: 2px; + line-height: 15px; +} +.score h1 { + color: hsl(229, 25%, 31%); + font-size: 48px; +} \ No newline at end of file From 2ceecb9a52b77693657f75025819732c03c024c0 Mon Sep 17 00:00:00 2001 From: Derya Aktas Date: Thu, 12 Oct 2023 19:46:42 +0200 Subject: [PATCH 09/19] adding changes in hands part --- index.html | 13 +++++++++++++ styles.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 93480a6..45aa5bc 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,19 @@

12

+
+
+ +
+
+ +
+
+ +
+ +
+ diff --git a/styles.css b/styles.css index 6ea6d8f..9dd2150 100644 --- a/styles.css +++ b/styles.css @@ -51,4 +51,49 @@ body { .score h1 { color: hsl(229, 25%, 31%); font-size: 48px; -} \ No newline at end of file +} + +.hand { + border-radius: 50%; + /* padding: 25px; */ + background-color: #fff; + height: 150px; + position: absolute; +} + +.hand-image { + position: relative; + top: 30px; + margin-right: 10px; + margin-left: 10px; +} +.paper { + border: 15px solid hsl(230, 89%, 62%); + /* margin-right: 20px; */ + position: relative; + left: -200px; + +} + +.scissors { + border: 15px solid hsl(39, 89%, 49%); + margin-left: 20px; +} + +.rock { + border: 15px solid hsl(349, 71%, 52%); + margin-left: 20px; +} + +.hands { + width: 443px; + height: 283px; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 80px; + background-image: url(/images/bg-triangle.svg); + background-repeat: no-repeat; + position: absolute; + top: 240px; +} From a9f1ac5d2dc4b672abe713a9c7304d793d2f4bb8 Mon Sep 17 00:00:00 2001 From: KazemMirzayi Date: Tue, 17 Oct 2023 15:16:28 +0200 Subject: [PATCH 10/19] fixing images --- styles.css | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/styles.css b/styles.css index 9dd2150..d7b2345 100644 --- a/styles.css +++ b/styles.css @@ -55,45 +55,51 @@ body { .hand { border-radius: 50%; - /* padding: 25px; */ + box-shadow: 0px 8px 3px #cac8c8 inset; + padding: 40px; background-color: #fff; - height: 150px; + height: 195px; position: absolute; } .hand-image { position: relative; - top: 30px; + margin-top: 5px; margin-right: 10px; margin-left: 10px; + } .paper { - border: 15px solid hsl(230, 89%, 62%); - /* margin-right: 20px; */ + border: 23px solid hsl(230, 89%, 62%); + margin-right: 20px; position: relative; - left: -200px; - + left: -170px; + top: -90px; } .scissors { - border: 15px solid hsl(39, 89%, 49%); - margin-left: 20px; + border: 23px solid hsl(39, 89%, 49%); + margin-left: 300px; + top: -90px; } .rock { - border: 15px solid hsl(349, 71%, 52%); - margin-left: 20px; + border: 23px solid hsl(349, 71%, 52%); + margin-top: 140px; + left: 65px; } .hands { - width: 443px; + width: 350px; height: 283px; display: flex; flex-wrap: wrap; justify-content: center; - margin-top: 80px; + margin-top: 100px; + margin-left: 80px; background-image: url(/images/bg-triangle.svg); background-repeat: no-repeat; + background-size: 330px; position: absolute; top: 240px; } From 14302a110c72c679a833a1d8e6a1dde0dc56672b Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Tue, 17 Oct 2023 17:35:28 +0200 Subject: [PATCH 11/19] Add a hover --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index d7b2345..61235ed 100644 --- a/styles.css +++ b/styles.css @@ -103,3 +103,12 @@ body { position: absolute; top: 240px; } + +.hands .hand{ + cursor: pointer; + transition: 0.20s; +} + +.hands .hand:hover{ + transform: translate3d(0px, -15px, 0px); +} From 506e6474690a948e851ebe2162e49c78a23947e5 Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Tue, 17 Oct 2023 17:57:23 +0200 Subject: [PATCH 12/19] Add a rules button --- index.html | 4 ++-- styles.css | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 45aa5bc..52b9908 100644 --- a/index.html +++ b/index.html @@ -41,8 +41,8 @@

12

- - + + diff --git a/styles.css b/styles.css index 61235ed..86ff94c 100644 --- a/styles.css +++ b/styles.css @@ -112,3 +112,21 @@ body { .hands .hand:hover{ transform: translate3d(0px, -15px, 0px); } + +/* Add a rules button */ +.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; + } + From 5e9f23be7f30c60acd056d0dfbedcebea8dba093 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 19 Oct 2023 19:36:49 +0200 Subject: [PATCH 13/19] first commit --- index.html | 49 +++++++++++++++++++++++-------------------------- styles.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 26 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 2a6ff53..5bf5490 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,39 @@ + - + + - - Frontend Mentor | Rock, Paper, Scissors + - Score - Rules + Rock Paper Scissors + + - You Picked - The House Picked + - You Win - You Lose +

+Rock
+Paper
+Scissors +

- Play Again +
Score :12
-

- Hello World from Mohammad - Hello from Kazem -

+ + + - - - - + +
+Challenge by Frontend Mentor. +Coded by Your Name Here. +
- -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
+ \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..239bf35 --- /dev/null +++ b/styles.css @@ -0,0 +1,38 @@ +body { + background: linear-gradient(to right, #000428, #004e92); + color: #ffffff; + font-family: Arial, sans-serif; + } + + h1 { + font-size: 2em; + } + + #score { + font-size: 1.5em; + } + + button { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + } + + #rock { + background-color: #f44336; + } + + #paper { + background-color: #008CBA; + } + + #scissors { + background-color: #f39c12; + } \ No newline at end of file From 7f8177558b228300b2361aad90f7416e38aa9a61 Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Tue, 24 Oct 2023 18:56:01 +0200 Subject: [PATCH 14/19] Try to add rules image / take a look on my change and correct it , I try to add javaScript code but does not work --- app.js | 28 ++++++++++++++++++++++++++++ index.html | 17 ++++++++++++++--- styles.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index e69de29..43223bb 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,28 @@ +// const btnRules = document.querySelector(".rules-btn"); +// const bntColse = document.querySelector(".close_btn"); +// const rules = document.querySelector(".rules"); + +// btnRules.addEventListener("click", () => { +// rules.classList.toggle("show-rules"); +// }); +// bntColse.addEventListener("click", () => { +// rules.classList.toggle("show-rules"); +// }); + +const rulesButton = document.getElementById("rulesButton"); +const rules = document.querySelector(".rules"); +const closeButton = document.querySelector(".close_btn"); +// Function to show the rules +function showRules() { + rulesContainer.style.display = "block"; +} +// Function to hide the rules +function hideRules() { + rulesContainer.style.display = "none"; +} + +// Attach event listener to the "RULES" button +rulesButton.addEventListener("click", showRules); + +// 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 52b9908..bcdad4e 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + @@ -42,8 +42,19 @@

12

- - + + +
+
+
+

RULES

+ +
+ +
+
diff --git a/styles.css b/styles.css index 86ff94c..c9d7bb9 100644 --- a/styles.css +++ b/styles.css @@ -130,3 +130,34 @@ body { 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%); +} \ No newline at end of file From 6d8b56dcca62bcc58e43f5efe9069f2e57c9d803 Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Thu, 26 Oct 2023 17:07:22 +0200 Subject: [PATCH 15/19] Fixing the rules button --- app.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/app.js b/app.js index 43223bb..ec3452d 100644 --- a/app.js +++ b/app.js @@ -1,13 +1,3 @@ -// const btnRules = document.querySelector(".rules-btn"); -// const bntColse = document.querySelector(".close_btn"); -// const rules = document.querySelector(".rules"); - -// btnRules.addEventListener("click", () => { -// rules.classList.toggle("show-rules"); -// }); -// bntColse.addEventListener("click", () => { -// rules.classList.toggle("show-rules"); -// }); const rulesButton = document.getElementById("rulesButton"); const rules = document.querySelector(".rules"); From f6687929d925585976d9a9423bc7e67e5c648783 Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Thu, 26 Oct 2023 17:35:28 +0200 Subject: [PATCH 16/19] Fixing Java Erorr --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index ec3452d..9c45488 100644 --- a/app.js +++ b/app.js @@ -10,7 +10,7 @@ function showRules() { function hideRules() { rulesContainer.style.display = "none"; } - +ggggggggg // Attach event listener to the "RULES" button rulesButton.addEventListener("click", showRules); From d15ddad6e1387fd3805d75c84b7e28a4ba89787a Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Thu, 26 Oct 2023 17:51:04 +0200 Subject: [PATCH 17/19] ds --- app.js | 37 +++++++++++++++++++++---------------- styles.css | 2 +- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/app.js b/app.js index 9c45488..ac4dddd 100644 --- a/app.js +++ b/app.js @@ -1,18 +1,23 @@ -const rulesButton = document.getElementById("rulesButton"); -const rules = document.querySelector(".rules"); -const closeButton = document.querySelector(".close_btn"); -// Function to show the rules -function showRules() { - rulesContainer.style.display = "block"; -} -// Function to hide the rules -function hideRules() { - rulesContainer.style.display = "none"; -} -ggggggggg -// Attach event listener to the "RULES" button -rulesButton.addEventListener("click", showRules); +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"); + + // Function to show the rules + function showRules() { + rules.style.display = "block"; + } + + // Function to hide the rules + function hideRules() { + rules.style.display = "none"; + } + // Attach event listener to the "RULES" button + rulesButton.addEventListener("click", showRules, hideRules); + + // Attach event listener to the "close" button + closeButton.addEventListener("click", hideRules); +}); -// Attach event listener to the "close" button -closeButton.addEventListener("click", hideRules); \ No newline at end of file diff --git a/styles.css b/styles.css index c9d7bb9..f764ffe 100644 --- a/styles.css +++ b/styles.css @@ -132,7 +132,7 @@ body { .rules{ position: relative; - margin-top: 100px; + /* margin-top: 100px; */ padding: 20px; } .rules_container{ From 062e6219464dee8b9d8b3e8ede32e46edb2d0dda Mon Sep 17 00:00:00 2001 From: oussama Tahiri Date: Thu, 26 Oct 2023 20:13:42 +0200 Subject: [PATCH 18/19] fixing somthing --- app.js | 32 ++++++++++++++++++++++++++++---- index.html | 1 + 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index ac4dddd..b0711e6 100644 --- a/app.js +++ b/app.js @@ -4,10 +4,35 @@ document.addEventListener("DOMContentLoaded", function() { 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 @@ -15,9 +40,8 @@ document.addEventListener("DOMContentLoaded", function() { rules.style.display = "none"; } // Attach event listener to the "RULES" button - rulesButton.addEventListener("click", showRules, hideRules); + 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 bcdad4e..d9d79cf 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,7 @@

RULES

+ From 0f664d48210238015157e1d01e249cf3c11e9ebe Mon Sep 17 00:00:00 2001 From: KazemMirzayi Date: Sun, 19 Nov 2023 09:51:18 +0100 Subject: [PATCH 19/19] fixing images --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fc49a33..1e29cd7 100644 --- a/index.html +++ b/index.html @@ -27,13 +27,13 @@

13

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