DIGI

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Adivina un numero</title>

#inp:focus{
		border: none;
		
	}
	.wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	button {
		background: -webkit-linear-gradient(top, transparent, black);
		background:linear-gradient(45deg, transparent, black);
		color: #adadad;
		border: none;
		margin-top: 25px;
		font-size: 20px;
		text-transform: uppercase;
		padding: 12px 20px;
		border-radius: 10px;
		box-shadow: -1px 2px 4px black;
	}

p#result{
		color:#adadad;
	}
</style>
</head>
<body>
	<div class="wrapper">
		<h2> Adivina el numero :</h2>
		<input type="number" name="InputNumber" id="inp" placeholder='Entre 1 - 10'/>
		<button onclick='match()'>Enviar</button>
		<p id="result">Ingresa un numero entre 1 - 10</p>
	</div>
<script type="text/javascript">

function match(){
		var inpNum = (document.querySelector('input').value);
		var randomNum = Math.ceil(Math.random() * 10);
		var result = document.getElementById('result');
		if(inpNum == ""){
			result.textContent = 'Favor, Ingresa el Numero';
		}
		else if(inpNum == randomNum){
			result.textContent = 'Felicidades, Numero coincidente!';
		}else{
			result.textContent = "Lo sentimos, no coincide. El numero era : " + randomNum;

}
		console.log(typeof(inpNum));
	}
</script>

</body>
</html>