Coding Guess the Number Game

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Guess the Number</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
	</head>
	<body>
		
		<div id="info"></div>
		
		<div id="control">
			<input name="number" type="text" id="number" value="">
			<button type="button" name="guess" id="guess">Guess?</button>
		</div>
		
		<button type="button" name="newgame" id="newgame">New Game</button>
		
		<style>
		
			*
			{
				box-sizing:border-box;
			}
			
			#info
			{
				font-size:21px;
				margin-top:50px;
				text-align:center;
			}
		
			#control
			{
				width:100%;
				padding:3px 5px;
				max-width:350px;
				margin:20px auto;
				border:1px solid #777;
				border-radius:6px;
				display:table;
			}
			
			#control input
			{
				width:70%;
				padding:8px;
				border:none;
				outline:none;
				font-size:18px;
				box-shadow:none;
				display:table-cell;
			}
			
			#newgame,
			#control button
			{
				width:30%;
				padding:8px;
				cursor:pointer;
				font-size:18px;
				border-radius:6px;
				display:table-cell;
				border:1px solid #777;
				background-color:deepskyblue;
			}
			
			#newgame:hover,
			#control button:hover
			{
				opacity:0.8;
			}
			
			#newgame
			{
				width:auto;
				margin:20px auto;
				padding:10px 20px;
				display:block;
			}
		
		</style>
		
		<script>
		
			var min = 1;
			var max = 10;
			var turn = 1;
			var number = 0;
			
			function init()
			{
				turn = 1;
				showinfo();
				number = Math.floor(Math.random() * max) + min;
				document.getElementById('newgame').style.display = 'none';
				document.getElementById('control').style.display = 'table';
				document.getElementById('number').value = '';
			}
			
			function showinfo(guess)
			{
				let info = document.getElementById('info');
				info.innerHTML = 'Turn ' + turn + '<br>';
				if(guess !== undefined) info.innerHTML += guess + '<br>';
				info.innerHTML += 'Pick a number between ' + min + ' and ' + max + '.';
			}
			
			function guess(guess)
			{
				if(!guess || isNaN(guess))
				{
					showinfo('Must enter valid number!');
					return;
				}
				
				guess = Number(guess);
				
				if(guess < number)
				{
					showinfo('Your guess, ' + guess + ', is too low.');
				}
				else if(guess > number)
				{
					showinfo('Your guess, ' + guess + ', is too high.');
				}
				else
				{
					showinfo('You did it. The number is ' + number + '.');
					document.getElementById('newgame').style.display = 'block';
					document.getElementById('control').style.display = 'none';
				}
				
				turn++;
			}
			
			document.getElementById('guess').addEventListener('click', function()
			{
				guess(document.getElementById('number').value);
			});
			
			document.getElementById('newgame').addEventListener('click', function()
			{
				init();
			});
			
			init();
		
		</script>
	
	</body>
</html>
Feb 20, 2022