Add files via upload

Syed-Muslim-19 · Aug 14, 2023 · 78c5e53 · 78c5e53
1 parent 072a822
commit 78c5e53
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 0 deletions.
diff --git a/code/guess.css b/code/guess.css
@@ -0,0 +1,103 @@
+body {
+  background-color: rgba(240, 248, 255, 0.447);
+}
+.menu {
+  text-align: center;
+  margin-top: 20%;
+  padding: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 100px;
+}
+.start,
+#number {
+  display: block;
+}
+#number {
+  height: 60px;
+  width: 20%;
+  text-align: center;
+  color: rgb(0, 163, 218);
+  font-weight: bolder;
+  border-color: rgb(0, 163, 218);
+  background-color: rgba(240, 248, 255, 0.447);
+  font-size: 30px;
+}
+h1 {
+  font-weight: bolder;
+  text-shadow: 8px 8px 60px;
+  color: rgb(0, 163, 218);
+  border: 2px solid rgb(0, 163, 218);
+  border-radius: 50px;
+  padding: 20px;
+}
+.start {
+  width: 30%;
+  font-weight: 900;
+  background-color: rgba(83, 83, 83, 0);
+  margin-top: 10px;
+  text-align: left;
+  color: rgb(0, 163, 218);
+  padding: 5px 10px;
+  border-color: rgb(0, 163, 218);
+  transition: 0.3s;
+  text-shadow: 2px 2px 45px;
+}
+.start:active {
+  text-shadow: none;
+  box-shadow: 2px 2px 2pc 20px rgb(162, 207, 255);
+  transform: scale(0.8);
+}
+.guessit {
+  margin-top: 30px;
+  background-color: rgb(0, 163, 218);
+  padding: 10px 50px;
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+  color: white;
+  font-size: 40px;
+  font-weight: bolder;
+}
+.guessit::before {
+  position: absolute;
+  background-color: rgb(0, 163, 218);
+  width: 40%;
+  left: 0;
+  height: 15px;
+  content: "";
+  margin-top: 20px;
+}
+.guessit::after {
+  position: absolute;
+  background-color: rgb(0, 163, 218);
+  width: 40%;
+  height: 15px;
+  right: 0;
+  content: "";
+  margin-top: 20px;
+}
+.data {
+  margin-top: -110px;
+  margin-left: 110px;
+}
+p {
+  color: rgb(0, 163, 218);
+  font-weight: bolder;
+}
+.upper {
+  margin-bottom: 70px;
+}
+@media (max-width: 345px) {
+  .data {
+    text-align: left;
+  }
+}
+.score,
+.total {
+  display: inline;
+}
+.highest,
+.record {
+  display: inline;
+}
diff --git a/code/guess.js b/code/guess.js
@@ -0,0 +1,49 @@
+const int = Math.random() * 20 + 1;
+const GuessNum = Math.trunc(int);
+let Score = 10;
+document.querySelector(".start").addEventListener("click", function () {
+  const Data = document.querySelector("#number").value;
+  if (!Data) {
+    document.querySelector(".loading").textContent = "No Number Entered 😕";
+  } else if (Number(Data) > 20 || Number(Data) < 0) {
+    document.querySelector(".loading").textContent = "Out of Range 😓";
+  } else if (GuessNum === Number(Data)) {
+    document.querySelector(".loading").textContent =
+      "Congratulations You Got It  🥳🤩  ";
+    document.body.style.backgroundColor = "rgba(0, 128, 0, 0.573)";
+    document.querySelector("p").style.color = "white";
+    document.querySelector("h1").style.color = "white";
+    document.querySelector("h1").textContent = '"Number Guessed"';
+    document.querySelector("#number").style.color = "white";
+    document.querySelector(".start").style.color = "white";
+    document.querySelector(".loading").style.color = "white";
+    document.querySelector(".score").style.color = "white";
+    document.querySelector(".highest").style.color = "white";
+    document.querySelector(".total").style.color = "white";
+    document.querySelector(".record").style.color = "white";
+    document.querySelector(".guessit").textContent = GuessNum;
+    document.querySelector(".record").textContent = Score;
+    document.querySelector(".start").style.display = "none";
+    document.querySelector("h1").style.borderColor = "white";
+    document.querySelector("#number").style.borderColor = "white";
+  } else if (GuessNum > Number(Data)) {
+    document.querySelector(".loading").textContent = "To Low 🙄";
+    if (Score > 0) {
+      Score--;
+      document.querySelector(".total").textContent = Score;
+    } else {
+      document.querySelector(".loading").textContent = "You Lose 😔";
+      document.querySelector(".start").style.display = "none";
+    }
+  } else {
+    document.querySelector(".loading").textContent = "To High 🤯";
+    if (Score > 0) {
+      Score--;
+      document.querySelector(".total").textContent = Score;
+    } else {
+      document.querySelector(".loading").textContent = "You Lose 😔";
+      document.querySelector(".start").style.display = "none";
+    }
+  }
+});
+console.log(GuessNum);