From 185a003c60953a5f6abce6365718ac217c271c06 Mon Sep 17 00:00:00 2001 From: Abanoub Refaat <111339229+abanoub-refaat@users.noreply.github.com> Date: Thu, 4 Jul 2024 20:56:44 +0300 Subject: [PATCH] Delete GuessMyNumber directory --- GuessMyNumber/index.html | 32 -------- GuessMyNumber/script.js | 46 ----------- GuessMyNumber/style.css | 166 --------------------------------------- 3 files changed, 244 deletions(-) delete mode 100644 GuessMyNumber/index.html delete mode 100644 GuessMyNumber/script.js delete mode 100644 GuessMyNumber/style.css diff --git a/GuessMyNumber/index.html b/GuessMyNumber/index.html deleted file mode 100644 index b25c175..0000000 --- a/GuessMyNumber/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - Guess My Number! - - -
-

Guess My Number!

-

(Between 1 and 20)

- -
?
-
-
-
- - -
-
-

Start guessing...

-

💯 Score: 20

-

- 🥇 Highscore: 0 -

-
-
- - - diff --git a/GuessMyNumber/script.js b/GuessMyNumber/script.js deleted file mode 100644 index 353f80c..0000000 --- a/GuessMyNumber/script.js +++ /dev/null @@ -1,46 +0,0 @@ -"use strict"; - -let number = Math.trunc(Math.random() * 20) + 1; -let score = 20; -let highscore = 0; - -const displayMessage = function (message) { - document.querySelector(".message").textContent = message; -}; - -document.querySelector(".check").addEventListener("click", function () { - const guess = Number(document.querySelector(".guess").value); - if (!guess) { - displayMessage("No Number!"); - } else if (guess === number) { - displayMessage("Correct Number!"); - document.querySelector(".number").textContent = number; - //Changing the style when the answer is correct. - document.querySelector("body").style.backgroundColor = "#60b347"; - document.querySelector(".number").style.width = "30rem"; - //Checking for the highscore - if (score > highscore) { - highscore = score; - document.querySelector(".highscore").textContent = highscore; - } - } else if (guess !== number) { - if (score > 1) { - displayMessage(guess > number ? "Too High!" : "Too Low!"); - score--; - document.querySelector(".score").textContent = score; - } else { - displayMessage("You Lost the Game!"); - } - } -}); - -document.querySelector(".again").addEventListener("click", function () { - score = 20; - number = Math.trunc(Math.random() * 20) + 1; - displayMessage("Start Guessing..."); - document.querySelector(".score").textContent = score; - document.querySelector(".number").textContent = "?"; - document.querySelector(".guess").value = ""; - document.querySelector("body").style.backgroundColor = "#222"; - document.querySelector(".number").style.width = "15rem"; -}); diff --git a/GuessMyNumber/style.css b/GuessMyNumber/style.css deleted file mode 100644 index cb54012..0000000 --- a/GuessMyNumber/style.css +++ /dev/null @@ -1,166 +0,0 @@ -@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: inherit; -} - -html { - font-size: 62.5%; - box-sizing: border-box; -} - -body { - margin: 50% auto; - font-family: "Press Start 2P", sans-serif; - color: #eee; - background-color: #222; - /* background-color: #60b347; */ -} - -/* LAYOUT */ -header { - position: relative; - height: 35vh; - border-bottom: 7px solid #eee; -} - -main { - height: 65vh; - color: #eee; - display: flex; - align-items: center; - justify-content: space-around; -} - -.left { - width: 52rem; - display: flex; - flex-direction: column; - align-items: center; -} - -.right { - width: 52rem; - font-size: 2rem; -} - -/* ELEMENTS STYLE */ -h1 { - font-size: 4rem; - text-align: center; - position: absolute; - width: 100%; - top: 52%; - left: 50%; - transform: translate(-50%, -50%); -} - -.number { - background: #eee; - color: #333; - font-size: 6rem; - width: 15rem; - padding: 3rem 0rem; - text-align: center; - position: absolute; - bottom: 0; - left: 50%; - transform: translate(-50%, 50%); -} - -.between { - font-size: 1.4rem; - position: absolute; - top: 2rem; - right: 2rem; -} - -.again { - position: absolute; - top: 2rem; - left: 2rem; -} - -.guess { - background: none; - border: 4px solid #eee; - font-family: inherit; - color: inherit; - font-size: 5rem; - padding: 2.5rem; - width: 25rem; - text-align: center; - display: block; - margin-bottom: 3rem; -} - -.btn { - border: none; - background-color: #eee; - color: #222; - font-size: 2rem; - font-family: inherit; - padding: 2rem 3rem; - cursor: pointer; -} - -.btn:hover { - background-color: #ccc; -} - -.message { - margin-bottom: 8rem; - height: 3rem; -} - -.label-score { - margin-bottom: 2rem; -} - -@media (max-width: 600px) { - header { - height: 29vh; - border-bottom: 3px solid #eee; - } - main { - height: auto; - flex-direction: column; - } - .between { - position: relative; - font-size: 1.2rem; - top: 16rem; - right: 0rem; - text-align: center; - } - .btn { - font-size: 1.5rem; - padding: 1rem 1rem; - } - h1 { - font-size: 2.24rem; - } - .number { - font-size: 4rem; - padding: 3rem 0rem; - } - .right { - width: auto; - font-size: 1.46rem; - margin: 2.5rem; - } - .guess { - background: none; - border: 3px solid #eee; - font-size: 1rem; - padding: 1.7rem; - width: 23rem; - margin: 6.9rem auto 3rem; - } - .message { - margin-bottom: 1rem; - height: 3rem; - } -}