thinkswell · PBJI · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/NumberGuessingGame/vinay-s36/README.md b/NumberGuessingGame/vinay-s36/README.md
@@ -0,0 +1,19 @@
+#### Summary
+Guess It - The Random Number Guesser project in JavaScript is an interactive web application that challenges users to guess a randomly generated number within a specified range. It provides an engaging way to learn and practice JavaScript programming while creating a fun user experience.
+
+#### Setup
+1. Fork the repository from github [vinay-s36](https://github.com/vinay-s36/Guess-It)
+2. clone the repository
+3. Run it using any IDE like [VSCode](https://code.visualstudio.com/) or even simple text editors will work
+
+#### Live project link - https://vinay-s36.github.io/Guess-It/
+
+#### Screenshot
+![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/bc76a0db-5a8e-4e7c-ba68-1d7a349f2039)
+
+![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/057b5532-dd81-4b24-9b60-790a62b1ee7f)
+
+![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/661e2419-e582-40f2-92de-81b1adfe86b8)
+
+Let me know if there are any issues 😁
+#### Happy Coding All ####
diff --git a/NumberGuessingGame/vinay-s36/index.html b/NumberGuessingGame/vinay-s36/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="style.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>❓</text></svg>"
+    />
+    <title>Guess It</title>
+  </head>
+  <body>
+    <div class="card">
+      <div class="card-content">
+        <h1>Guess My Number 😉</h1>
+        <p>Guess the number between 1 and 100</p>
+        <input type="text" class="numberguess" id="number" required /><br />
+        <button onclick="makeGuess()">Guess</button>
+        <span style="margin-right: 15px"></span>
+        <button onclick="newtarget()" style="width: 30%">New target</button>
+        <br /><br />
+        <p id="error-message" style="color: red"></p>
+        <p id="result"></p>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/NumberGuessingGame/vinay-s36/script.js b/NumberGuessingGame/vinay-s36/script.js
@@ -0,0 +1,38 @@
+let num = Math.floor(Math.random() * 100)+1;
+let chances = 0;
+let message;
+const guess=document.getElementById("result");
+const errorMessage = document.getElementById("error-message");
+
+function makeGuess() {
+    var inputElement=document.getElementById("number");
+    var inputValue=inputElement.value;
+
+    if (inputValue.trim() === "") {
+        errorMessage.textContent = "Please enter a number before guessing.";
+        return; // Stop execution if no input is provided
+    }
+    errorMessage.textContent = "";
+
+    chances++;
+    if (inputValue == num) {
+        message=`Congratulations! You guessed the number ${num} in ${chances} attempts.`;
+    }
+    else 
+    {
+        if (num > inputValue) {
+          message=`Your guess is less than the number`;
+        } else {
+            message=`Your guess is greater than the number`;
+        }
+    }
+    inputElement.value = "";
+    guess.innerHTML=message;
+}
+
+function newtarget() {
+    num = Math.floor(Math.random() * 100)+1;
+    chances=0;
+    result.innerHTML = ""; 
+    errorMessage.textContent = "";
+}
diff --git a/NumberGuessingGame/vinay-s36/style.css b/NumberGuessingGame/vinay-s36/style.css
@@ -0,0 +1,55 @@
+body {
+    background-image: linear-gradient(120deg, #C6EA8D 0%, #FE90AF 100%);
+    background-size: cover;
+    background-attachment: fixed;
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+}
+
+@media (max-width: 768px) {
+    body {
+      font-size: 14px;
+    }
+}
+
+.card{
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 500px;
+    width: 80%;
+    margin: 10% auto;
+    height: 320px;
+    padding: 20px;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #fff;
+}
+
+.card-content{
+    text-align: center;
+}
+
+.numberguess{
+    width: 130px;
+    padding:15px;
+    font-size: larger;
+    border-radius: 10px;
+}
+
+p{
+    font-size: larger;
+}
+button{
+    cursor: pointer;
+    width: 23%;
+    border-radius: 10px;
+    position: relative;
+    top: 15px;
+    padding: 10px;
+    font-size: larger;
+}
+
+button:hover{
+    background-color: #ccc;
+}