jogo_adivinha2.html

<meta charset="UTF-8">

<h1>Adivinhe o número que escolhi!</h1>
<input/>
<button> Escolha um número de 0 a 10 </button>

<script>

    let segredo = Math.round(Math.random() * 10);
    let input = document.querySelector("input");  // inserimos o que está no "mundo HTML" na variável "input". o query.Selector recebe como parâmetro a tag que quer incluir no JS.
    input.focus();
    
    // o teste não pode ser executado logo quando a página carrega, pois ele não vai dar chance do usuário inserir o input
    // e já vai devolver "você errou", pois o input vazio é diferente de 5.

    function verifica(){ // por isso, eu "guardo" a ação dentro da função verifica

        if (input.value == segredo){  // aqui o .value chama o valor inserido no input
            alert("Você acertou!");
        } else{
            alert("Você errou.")
        }

        input.value = "";  // limpa o campo do formulário para nova tentativa. 
        input.focus(); // coloca o foco novamente na caixinha do formulário, o | piscando pronto para receber novo valor. 

    }

    // queremos associar a função verifica() ao clique do botão.

    let button = document.querySelector("button");
    button.onclick = verifica; // .onclick significa "no clicar", quando clicar no botão;

    // pra executarmos a ação da função verifica, escrevemos com parênteses, verifica(). 
    // isso faz que a função seja executada assim que carregamos a página, pois o JS lê e entende que a estamos chamando.  
    // mas não queremos isso, queremos que a função esteja vinculada ao onclick do botão 
    // pra isso, associamos ao onclick a função sem a chamada pra ação, o ().
   
</script>