diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d8fd62 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + Codestin Search App + + + + + +

Number guessing game

Try and guess a random number between 1 and 100.

You have 10 attempts to guess the right number.

+
+

+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..42b96b0 --- /dev/null +++ b/script.js @@ -0,0 +1,93 @@ + +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); + console.log(guess); + validateGuess(guess); + }); +} + +function validateGuess(guess) { + if (isNaN(guess)) { + alert('PLease enter a valid number'); + } else if (guess < 1) { + alert('PLease enter a number more than 1'); + } else if (guess > 100) { + alert('PLease enter a number less than 100'); + } else { + prevGuess.push(guess); + if (numGuess === 11) { + displayGuess(guess); + displayMessage(`Game Over. Random number was ${randomNumber}`); + endGame(); + } else { + displayGuess(guess); + checkGuess(guess); + } + } +} + +function checkGuess(guess) { + if (guess === randomNumber) { + displayMessage(`You guessed it right`); + endGame(); + } else if (guess < randomNumber) { + displayMessage(`Number is TOOO low`); + } else if (guess > randomNumber) { + displayMessage(`Number is TOOO 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 = `

Start new Game

`; + startOver.appendChild(p); + playGame = false; + newGame(); +} + +function newGame() { + const newGameButton = document.querySelector('#newGame'); + newGameButton.addEventListener('click', function (e) { + randomNumber = parseInt(Math.random() * 100 + 1); + prevGuess = []; + numGuess = 1; + guessSlot.innerHTML = ''; + remaining.innerHTML = `${11 - numGuess} `; + userInput.removeAttribute('disabled'); + startOver.removeChild(p); + + playGame = true; + }); +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..917b8ab --- /dev/null +++ b/style.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: 584px; + 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