diff --git a/NumberGuessingGame/vinay-s36/README.md b/NumberGuessingGame/vinay-s36/README.md new file mode 100644 index 000000000..1ed58459d --- /dev/null +++ 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 new file mode 100644 index 000000000..b0f0aa759 --- /dev/null +++ b/NumberGuessingGame/vinay-s36/index.html @@ -0,0 +1,33 @@ + + + + + + + + + Guess It + + +
+
+

Guess My Number 😉

+

Guess the number between 1 and 100

+
+ + + +

+

+

+
+
+ + + diff --git a/NumberGuessingGame/vinay-s36/script.js b/NumberGuessingGame/vinay-s36/script.js new file mode 100644 index 000000000..a393da139 --- /dev/null +++ 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 = ""; +} \ No newline at end of file diff --git a/NumberGuessingGame/vinay-s36/style.css b/NumberGuessingGame/vinay-s36/style.css new file mode 100644 index 000000000..cf22959f3 --- /dev/null +++ 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; +} \ No newline at end of file