thinkswell · PBJI · Oct 9, 2023 · Oct 9, 2023
diff --git a/NumberGuessingGame/LakshmanRam/index.html b/NumberGuessingGame/LakshmanRam/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Number Guessing Game</title>
+    <!-- Google Font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+
+      <div id="game">
+        <h1>Number Guessing Game</h1>
+        <h3>
+          I am thinking of a number between 1-100.<br />
+          Can you guess it?
+        </h3>
+        <h4>What I'm Thinking?</h4>
+        <div class="input-wrapper">
+          <input type="number" placeholder="00" id="guess" />
+          <button id="check-btn">Guess</button>
+        </div>
+        <p id="no-of-guesses">No.Of Guesses: 0</p>
+        <p id="guessed-nums">Guessed Numbers are: None</p>
+      </div>
+      <!--Result-Pop-Up-->
+      <div class="result">
+        <div id="hint"></div>
+        <button id="restart">Restart</button>
+
+      </div>
+    </div>
+    <!-- Script -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/NumberGuessingGame/LakshmanRam/script.js b/NumberGuessingGame/LakshmanRam/script.js
@@ -0,0 +1,69 @@
+const hint = document.getElementById("hint");
+const noOfGuessesRef = document.getElementById("no-of-guesses");
+const guessedNumsRef = document.getElementById("guessed-nums");
+const restartButton = document.getElementById("restart");
+const game = document.getElementById("game");
+const guessInput = document.getElementById("guess");
+const checkButton = document.getElementById("check-btn");
+
+let answer, noOfGuesses, guessedNumsArr;
+
+const play = () => {
+  const userGuess = guessInput.value;
+  if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) {
+    alert("Please enter a valid number between 1 and 100.");
+    return;
+  }
+  guessedNumsArr.push(userGuess);
+  noOfGuesses += 1;
+  if (userGuess != answer) {
+    if (userGuess < answer) {
+      hint.innerHTML = "Too low. Try Again!";
+    } else {
+      hint.innerHTML = "Too high. Try Again!";
+    }
+    noOfGuessesRef.innerHTML = `<span>No. Of Guesses:</span> ${noOfGuesses}`;
+    guessedNumsRef.innerHTML = `<span>Guessed Numbers are: </span>${guessedNumsArr.join(
+      ","
+    )}`;
+    hint.classList.remove("error");
+    setTimeout(() => {
+      hint.classList.add("error");
+    }, 10);
+  } else {
+    hint.innerHTML = `Congratulations!<br>The number was <span>${answer}</span>.<br>You guessed the number in <span>${noOfGuesses} </span>tries.`;
+    hint.classList.add("success");
+    game.style.display = "none";
+    restartButton.style.display = "block";
+  }
+};
+
+const init = () => {
+  console.log("Game Started");
+  answer = Math.floor(Math.random() * 100) + 1;
+  console.log(answer);
+  noOfGuesses = 0;
+  guessedNumsArr = [];
+  noOfGuessesRef.innerHTML = "No. Of Guesses: 0";
+  guessedNumsRef.innerHTML = "Guessed Numbers are: None";
+  guessInput.value = "";
+  hint.classList.remove("success", "error");
+};
+
+guessInput.addEventListener("keydown", (event) => {
+  if (event.keyCode === 13) {
+    event.preventDefault();
+    play();
+  }
+});
+
+restartButton.addEventListener("click", () => {
+  game.style.display = "grid";
+  restartButton.style.display = "none";
+  hint.innerHTML = "";
+  hint.classList.remove("success");
+  init();
+});
+
+checkButton.addEventListener("click", play);
+window.addEventListener("load", init);
diff --git a/NumberGuessingGame/LakshmanRam/style.css b/NumberGuessingGame/LakshmanRam/style.css
@@ -0,0 +1,109 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+  }
+  body {
+    background-color: #7296fa;
+  }
+  .container {
+    width: min(90%, 40.25em);
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    background-color: #fffcfce4;
+    padding: 5em 2em;
+    border-radius: 0.5em;
+    box-shadow: 1.5em 1.5em #26233e;
+    text-align: center;
+  }
+
+
+  #check-btn {
+    font-size: 1.2em;
+    font-weight: 800;
+  }
+  h3 {
+    font-size: 1.5em;
+    font-weight: 900;
+    line-height: 2em;
+    color: #303030;
+  }
+  .input-wrapper {
+    width: 70%;
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    gap: 1em;
+    margin: 3em auto 1.5em auto;
+  }
+  input[type="number"] {
+    width: 100%;
+    padding: 1em;
+    font-size: 1.2em;
+    text-align: center;
+    border: 2px solid #adaeae;
+    border-radius: 0.3em;
+    outline: none;
+    appearance: text-field;
+    -moz-appearance: textfield;
+  }
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"]:focus {
+    border-color: #3c6fff;
+  }
+  button {
+    font-size: 1em;
+    background-color: #3c6fff;
+    color: #ffffff;
+    border: none;
+    outline: none;
+    border-radius: 0.5em;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  #restart {
+    margin: 0 auto 0 auto;
+    padding: 0.9em 4.5em;
+    font-size: large;
+    font-weight: 800;
+    position: relative;
+  }
+  .result {
+    margin-top: 1em;
+  }
+  p {
+    font-size: 1em;
+    font-weight: 400;
+    color: #565b70;
+    word-break: break-all;
+  }
+  .error,
+  .success {
+    padding: 0.5em 0;
+    border-radius: 0.3em;
+    margin-bottom: 1em;
+    animation: pop 0.5s forwards;
+    transform: scale(0);
+  }
+  .error {
+    background-color: #ffcbcb;
+    color: #ff3e3e;
+  }
+  .success {
+    background-color: #b9ffd5;
+    color: #05c451;
+  }
+  @keyframes pop {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }