Add First Programm on Github

Harsh-v3 · Sep 23, 2024 · b484fbb · b484fbb
commit b484fbb
Show file tree

Hide file tree

Showing 4 changed files with 429 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# Guess The Number Game
+
+In This Game player must guess a secret number between 1 and 20. For each wrong guess, the score is decreased by 1 and a message is displayed indicating whether the guessed number is high or low. When the player reaches a score of 0 he loses the game. Clicking the "Again" button starts a new game.
+
+### Technologies Used
+
+~ HTML 5 </br>
+~ Cascading Styling Sheet (CSS) </br>
+~ JavaScript </br>
+
+### Key Learnings
+
+~ Implementation of Again Button </br>
+~ Store Highscore into local Storage of User's Device </br>
+~ Implemented Responsive Design </br>
+
+### Limitations
+
+~ There is no levels introduced untill this point </br>
+~ Used icons may be disappear in offline mode </br>
+
+### Note
+
+Please feel free to play the game and share your thoughts .
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Guess The Number !</title>
+  </head>
+  <body>
+    <main>
+      <div class="container center">
+        <div class="container__title">Guess The Number !</div>
+        <div class="container__content">
+          <div class="container__content--Ans">
+            <p class="ans center"><i class="fa-solid fa-question"></i></p>
+          </div>
+          <div class="container__content--msg">
+            <p class="msg">Start !</p>
+          </div>
+          <form class="container__content--inp">
+            <input type="number" class="inp btn--inp inp--ans" />
+            <button class="inp inp--btn">Enter</button>
+          </form>
+        </div>
+        <div class="container__result">
+          <p>
+            <i class="fa-solid fa-award fa-lg icon"></i> Highscore :
+            <span class="container__result--highscore highscore">0</span>
+          </p>
+          <p>
+            <i class="fa-solid fa-star fa-sm icon"></i>
+            Score :
+            <span class="container__result--score score">10</span>
+          </p>
+          <span class="btn--again">
+            <i class="fa-solid fa-repeat fa-2xl"></i>
+          </span>
+        </div>
+      </div>
+    </main>
+    <script src="script.js"></script>
+    <script
+      src="https://kit.fontawesome.com/da59f70052.js"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+'use strict';
+
+// Elements :
+const userGuess = document.querySelector('.inp');
+const answerEl = document.querySelector('.ans');
+const messageEl = document.querySelector('.msg');
+const inpBoxEl = document.querySelector('.container');
+const scoreEl = document.querySelector('.score');
+const highscoreEl = document.querySelector('.highscore');
+
+// Buttons :
+const enter = document.querySelector('.inp--btn');
+const again = document.querySelector('.btn--again');
+
+// Variables :
+let Guess = Math.floor(Math.random() * 20 + 1);
+let score = 10;
+let highscore = localStorage.getItem('Highscore')
+  ? +localStorage.getItem('Highscore')
+  : 0;
+
+console.log(Guess, highscore);
+highscoreEl.textContent = highscore;
+
+// Game Logic :
+enter.addEventListener('click', function (e) {
+  e.preventDefault();
+  const endGame = function () {
+    enter.setAttribute('disabled', '');
+    userGuess.setAttribute('disabled', '');
+    enter.style.opacity = 0.5;
+    userGuess.style.opacity = 0.5;
+
+    messageEl.style.color = 'var(--color-light)';
+    answerEl.textContent = Guess;
+  };
+
+  if (!+userGuess.value) {
+    messageEl.textContent = 'Please Enter a Number !';
+  } else if (+userGuess.value !== Guess) {
+    messageEl.textContent =
+      +userGuess.value > Guess ? 'Guess Low Number' : 'Guess High Number';
+    score--;
+    scoreEl.textContent = score;
+  } else {
+    messageEl.textContent = 'You Win !';
+    messageEl.parentElement.style.background = 'lightgreen';
+    scoreEl.textContent = score;
+    if (score > highscore) {
+      highscore = score;
+      highscoreEl.textContent = highscore;
+      localStorage.setItem('Highscore', highscore);
+    }
+    endGame();
+  }
+  if (score <= 0) {
+    messageEl.innerHTML = `You Lost, Correct Answer Was <i class="fa-solid fa-arrow-turn-up icon uparr"></i>`;
+    messageEl.parentElement.style.background = 'lightcoral';
+    endGame();
+  }
+});
+
+// Again Button Functionality :
+again.addEventListener('click', function (e) {
+  messageEl.textContent = 'Start !';
+  messageEl.style.color = 'var(--color-dark)';
+  messageEl.parentElement.style.background = 'var(--color-light)';
+
+  answerEl.innerHTML = '<i class="fa-solid fa-question">';
+  userGuess.value = ' ';
+  score = 10;
+  scoreEl.textContent = score;
+
+  enter.removeAttribute('disabled');
+  userGuess.removeAttribute('disabled');
+  enter.style.opacity = 1;
+  userGuess.style.opacity = 1;
+});