From 393c63b2f67fbefce1d353b7632bb1ac2ad3ed2e Mon Sep 17 00:00:00 2001 From: PrinceSatapathy Date: Fri, 31 Oct 2025 23:56:00 +0530 Subject: [PATCH] Add files via upload --- Javascript/GuessingNumber/index.html | 37 +++++++++++ Javascript/GuessingNumber/script.js | 86 ++++++++++++++++++++++++++ Javascript/GuessingNumber/styles.css | 92 ++++++++++++++++++++++++++++ 3 files changed, 215 insertions(+) create mode 100644 Javascript/GuessingNumber/index.html create mode 100644 Javascript/GuessingNumber/script.js create mode 100644 Javascript/GuessingNumber/styles.css diff --git a/Javascript/GuessingNumber/index.html b/Javascript/GuessingNumber/index.html new file mode 100644 index 0000000..28860de --- /dev/null +++ b/Javascript/GuessingNumber/index.html @@ -0,0 +1,37 @@ + + + + + + + Number Guessing Game + + + + + +
+

Number guessing game

+

Try and guess a random number between 1 and 100.

+

You have 10 attempts to guess the right number.

+
+
+ Guess a number + + + + +
+

Previous Guesses:

+

Guesses Remaining: 10

+

+
+
+ + + \ No newline at end of file diff --git a/Javascript/GuessingNumber/script.js b/Javascript/GuessingNumber/script.js new file mode 100644 index 0000000..5d06989 --- /dev/null +++ b/Javascript/GuessingNumber/script.js @@ -0,0 +1,86 @@ +let randomNumber = parseInt(Math.random() * 100 + 1); + +const submit = document.querySelector('#subt'); +const userInput = document.querySelector('#guessField'); +const guessSlot = document.querySelector('.guesses'); +const remaining = document.querySelector('.lastResult'); +const lowOrHi = document.querySelector('.lowOrHi'); +const startOver = document.querySelector('.resultParas'); + +const p = document.createElement('p'); + +let prevGuess = []; +let numGuess = 1; +let playGame = true; + +if (playGame) { + submit.addEventListener("click", function (e) { + e.preventDefault(); + const guess = parseInt(userInput.value); + validateGuess(guess); + }); +} + +function validateGuess(guess) { + if (isNaN(guess)) { + alert('Please enter a number'); + } else if (guess < 1) { + alert('Please enter a valid number (greater than 0)'); + } else if (guess > 100) { + alert('Please enter a value less than or equal to 100'); + } else { + prevGuess.push(guess); + displayGuess(guess); + checkGuess(guess); + } +} + +function checkGuess(guess) { + if (guess === randomNumber) { + displayMessage(`🎉 You guessed it right!`); + endGame(); + } else if (numGuess === 10) { + displayMessage(`❌ Game Over. Random number was ${randomNumber}`); + endGame(); + } else if (guess < randomNumber) { + displayMessage(`📉 Number is too low`); + } else { + displayMessage(`📈 Number is too high`); + } +} + +function displayGuess(guess) { + userInput.value = ''; + guessSlot.innerHTML += `${guess}, `; + numGuess++; + remaining.innerHTML = `${11 - numGuess}`; +} + +function displayMessage(message) { + lowOrHi.innerHTML = `

${message}

`; +} + +function endGame() { + userInput.value = ''; + userInput.setAttribute('disabled', ''); + p.classList.add('button'); + p.innerHTML = ``; + startOver.appendChild(p); + playGame = false; + newGame(); +} + +function newGame() { + const newGameButton = document.querySelector('#newGame'); + newGameButton.addEventListener("click", function () { + randomNumber = parseInt(Math.random() * 100 + 1); + prevGuess = []; + numGuess = 1; + guessSlot.innerHTML = ''; + remaining.innerHTML = `${11 - numGuess}`; + userInput.removeAttribute('disabled'); + startOver.removeChild(p); + lowOrHi.innerHTML = ''; + playGame = true; + }); +} diff --git a/Javascript/GuessingNumber/styles.css b/Javascript/GuessingNumber/styles.css new file mode 100644 index 0000000..50b0918 --- /dev/null +++ b/Javascript/GuessingNumber/styles.css @@ -0,0 +1,92 @@ +html { + font-family: sans-serif; + } + + body { + width: 300px; + max-width: 750px; + min-width: 480px; + margin: 0 auto; + background-color: #212121; + } + + .lastResult { + color: white; + padding: 7px; + } + + .guesses { + color: white; + padding: 7px; + } + + button { + background-color: #141414; + color: #fff; + width: 250px; + height: 50px; + border-radius: 25px; + font-size: 30px; + border-style: none; + margin-top: 30px; + /* margin-left: 50px; */ + } + + #subt { + background-color: #161616; + color: #ffffff; + width: 200px; + height: 50px; + border-radius: 10px; + font-size: 20px; + border-style: none; + margin-top: 50px; + /* margin-left: 75px; */ + } + + #guessField { + color: #000; + width: 250px; + height: 50px; + font-size: 30px; + border-style: none; + margin-top: 25px; + + /* margin-left: 50px; */ + border: 5px solid #6c6d6d; + text-align: center; + } + + #guess { + font-size: 55px; + /* margin-left: 90px; */ + margin-top: 120px; + color: #fff; + } + + .guesses { + background-color: #7a7a7a; + } + + #wrapper { + box-sizing: border-box; + text-align: center; + width: 450px; + height: 550px; + background-color: #474747; + color: #fff; + font-size: 25px; + } + + h1 { + background-color: #161616; + + color: #fff; + text-align: center; + } + + p { + font-size: 16px; + text-align: center; + } + \ No newline at end of file