<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jogo adivinhe o número</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.ultimoResultado {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Jogo adivinhe o número</h1>
<p>Nós selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar em 10 chances ou menos. Nós lhe diremos se seu palpite foi muito alto ou muito baixo.</p>
<div class="form">
<label for="campoPalpite">Digite seu palpite: </label><input type="text" id="campoPalpite" class="campoPalpite">
<input type="submit" value="Enviar palpite" class="envioPalpite">
</div>
<div class="resultadoParas">
<p class="palpites"></p>
<p class="ultimoResultado"></p>
<p class="baixoOuAlto"></p>
</div>
</body>
<script>
var numeroAleatorio = Math.floor(Math.random()) + 1;
var palpites = document.querySelector('.palpites');
var ultimoResultado = document.querySelector('.ultimoResultado');
var baixoOuAlto = document.querySelector('baixoOuAlto');
var envioPalpite = document.querySelector('.envioPalpite');
var campoPalpite = document.querySelector('.campoPalpite');
var contagemPalpites = 1;
var botaoReinicio;
function conferirPalpite() {
var palpiteUsuario = Number(campoPalpite.value);
if(contagemPalpites === 1) {
palpites.textContent = 'Palpites anteriores: ';
}
palpites.textContent += palpiteUsuario + ' ';
if(palpiteUsuario === numeroAleatorio) {
ultimoResultado.textContent = 'Parabéns! Você acertou!';
ultimoResultado.style.backgroundColor = 'green';
baixoOuAlto.textContent = '';
configFimDeJogo();
} else if(contagemPalpites === 10) {
ultimoResultado.textContent = '!!!FIM DE JOGO!!!';
configFimDeJogo();
} else {
ultimoResultado.textContent = 'Errado!';
ultimoResultado.style.backgroundColor = 'red';
if(palpiteUsuario < numeroAleatorio) {
baixoOuAlto.textContent = 'Seu palpite foi muito baixo!';
} else if(palpiteUsuario > numeroAleatorio) {
baixoOuAlto.textContent = 'Seu palpite foi muito alto!';
}
}
contagemPalpites++;
campoPalpite.value = '';
campoPalpite.focus();
}
envioPalpite.addeventListener('click', conferirPalpite);
function configFimDeJogo() {
campoPalpite.disabled = true;
envioPalpite.disabled = true;
botaoReinicio = document.createElement('button');
botaoReinicio.textContent = 'Iniciar novo jogo';
document.body.appendChild(botaoReinicio);
botaoReinicio.addeventListener('click', reiniciarJogo);
}
function reiniciarJogo() {
contagemPalpites = 1;
var reiniciarParas = document.querySelectorAll('.resultadoParas p');
for(var i = 0; i < reiniciarParas.length; i++) {
reiniciarParas[i].textContent = '';
}
botaoReinicio.parentNode.removeChild(botaoReinicio);
campoPalpite.disabled = false;
envioPalpite.disabled = false;
campoPalpite.value = '';
campoPalpite.focus();
ultimoResultado.style.backgroundColor = 'white';
numeroAleatorio = Math.floor(Math.random()) + 1;
}
</script>
</html>