Clarke Studios Number Guess

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="DAVID M. AMBOS">
<meta name="date" content="February 2, 2017">
<meta name="copyright" content="DAVID M. AMBOS, all rights reserved">
<meta name="description" content="Number guessing game, computer chooses a random number between 1 and 100, the user gets seven chances to guess the number">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="demo.css" />
<style>
textarea { text-align: center; }
	div {
		text-align:center;
	}
body {
	background-color: rgba(191,63,65,1);
}
</style>
<script>
var number = 0, guess = 0, i = 8, message = "";
function checkGuess() {
	guess = document.getElementById("guess").value;
	if(guess == "") {
		message = "You must enter a guess";
	} else if(isNaN(guess)) {
		message = "Your guess should be a number";
	} else {
		if(guess > number) {
			message = "Your guess of " + guess + " is too high.";
		} else  if(guess < number) {
			message = "Your guess of " + guess + " is too low.";
		} else {
			message = "You got it! My number was " + number + "\nClick [New Game] to play again";
			document.getElementById("guessButton").style.visibility = "hidden";
		}
		i--;
		document.getElementById("yourGuess").innerHTML = "You have " + i + " guesses left";
		document.getElementById("guess").value = "";
		document.getElementById("guess").focus();
	}
	document.getElementById("message").value = message;
	if(i <= 0) {
		document.getElementById("guessButton").style.visibility = "hidden";
		document.getElementById("message").value = "You have run out of guesses\nClick [New Game] to play again";
	}
}
function newGame() {
	number = Math.ceil(Math.random() * 100);
	document.getElementById("yourGuess").innerHTML = "Can you guess my number?";
	document.getElementById("message").value = "Okay, I have another number. Try to guess.";
	document.getElementById("guessButton").style.visibility = "visible";
	document.getElementById("guess").value = "";
	document.getElementById("guess").focus();
	i = 8;
}
</script>
</head>

<body>

<form name="myForm">
<h1>Numbz Guess Game</h1>
<table style="width: 50%;">
<tr><th colspan="3">I am thinking of a number<br />between 1 and 100 inclusive<br />Can you guess my number?</th></tr>
<tr><td id="yourGuess" style="width: 40%;">Your Guess:</td>
	<td style="width: 20%;"><input type="text" id="guess" /></td>
	<td style="width: 40%;"><input type="button" value="Check Guess" id="guessButton" onClick="checkGuess();" style="visibility: hidden;" /></td></tr>
<tr><td colspan="3"><textarea id="message"></textarea></td></tr>
<tr><td colspan="3"><input type="button" value="New Game" onClick="newGame();" /></td></tr>
</table>
<p style="font-size: .5em; position: fixed; z-index: +1;
	bottom: 0px; right: 20px; height: 20px;
    background-color: gainsboro; color: black;">
</p>
</form>

		designed by Clarke Studios
        <script>
newGame();
</script>
</body>
</html>