guess the number game js
var userNumber =10;
var counter = 0;
var maxTries = 5;
var randomNumber = Math.floor(Math.random() * userNumber + 1);
while (attempts != randomNumber){
var attempts = prompt("Please pick a number between 1 and " + userNumber);
counter += 1;
if (counter > maxTries){
document.write("You have no more tries left. Press F5 to play again");
break
}
if (attempts == randomNumber){
document.write("Congrates you guess the correct number");
document.write(" the random number was " + randomNumber);
document.write(" It took you " + counter + " attempts to guess the correct number")
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Guess the number</title>
<style>
p{
color: rgb(3, 68, 46);
}
.inputBox{
font-family: Arial, Helvetica, sans-serif
}
.button{
background-color: black;
color: blueviolet;
display: inline-block;
font-family: sans-serif;
padding: 7px;
border: blueviolet;
border-radius: 10px;
}
</style>
</head>
<body>
<p>I am thinking of a number between 1 and 100. Try and guess it.</p>
<div class="form">
<label for="guessField"><p>Enter a guess: </p></label>
<input type = "text" id="inputField" class = "inputBox">
<input type = "submit" value = "Submit guess"
class = "button" id="submitbutton">
<p id="output">Guess a number from 1 to 100!</p>
</div>
<script>
var magicnumber = Math.floor(Math.random() * 100 + 1);
var guesses = 1
document.getElementById("submitbutton").onclick = function(){
var playerguess = document.getElementById("inputField").value;
if playerguess == magicnumber{
if guesses == 1{
document.getElementById("output").innerHTML = "Well done! You guessed my number in" + guesses + "guess! Awsome!"
}
else{
document.getElementById("output").innerHTML = "Well done! You guessed my number in " + guesses + " guesses!"
}
if playerguess > magicnumber{
document.getElementById("output").innerHTML = "oops! " + playerguess + " is too high! Try a lower number"
guesses++
}
if playerguess < magicnumber{
document.getElementById("output").innerHTML = "oops! " + playerguess + " is too low! Try a higher number"
guesses++
}
}
</script>
</body>
</html>