[Projeto] Adivinhe o Número 2.0

Adicionei melhorias no jogo anterior.

<meta charset = "UTF-8">
<h1 id="titulo" >
    Guess the Number
</h1>
<h3 id="demo">O intervalo é entre 0 e 15 inclusive</h3>
<h4>Você terá cinco chances.</h4>
<p>A cada tentativa, uma mensagem será exibida: se estiver a uma diferença de pelo menos três número (está perto) ou não (está longe) do número gerado.</p>
<input type="number" id="number" size="15">
<button id="verificar">Verificar</button>
<button id="reboot" style="margin: auto">Reiniciar</button>
<div class="resultado"></div> 

<script>
    function toBreakLine(){
        document.write("<br><br>")
    }
    function toShowMessage(message) {
        document.write(message)
        toBreakLine()
    }
    function toEnterValue(word){
        let valor = parseInt(prompt(`Enter ${word}: `))
        return valor
    }

    /*Escondendo botao de reiniciar o jogo*/
    const reboot = document.querySelector('#reboot')
        reboot.style.display = 'none';
    const h1Element = document.querySelector('h1')
        h1Element.style.color = 'green'

    const h3Element = document.querySelector('h3')
        h3Element.style.color = 'blue'

    const h4Element = document.querySelector('h4')
    const pElement = document.querySelector('p')

    //mapeando os elementos: botao verificar e exibir mensagem de cada input
    const botao = document.querySelector('#verificar');
    const divResultado = document.querySelector('.resultado');
    let tries = 0 //contador para controlar tentativas


    alert(`Feliz em te ver por aqui :D Vamos jogar?.`)

    //entrada do usuário
    let entrada = document.querySelector('#number');
    entrada.focus()
    const gerado = Math.round(Math.random() * 15)
    console.log(`Numero gerado - ${gerado}`)


    //monitor de evento para o botão 'verificar'
    botao.addEventListener('click', () => { 

        //Para exibir resultado de cada tentativa
        const elemento = document.createElement('p') 
        let output = ""; //output de cada tentativa

        if(tries < 5){
            tries++
            if(parseInt(entrada.value) !== gerado){

            //distancia entre input e número gerado pelo computador
            const distancia = Math.abs(entrada.value - gerado)
            let estaPerto = distancia <= 3 ? "Está perto. " : "Não está perto. "
            estaPerto += `Tentativa ${tries}`

            output = document.createTextNode(`Número inserido: ${entrada.value}; ${estaPerto}`)

            }else{

                h1Element.textContent = ':D Incrível! Você acertou.'
                titulo.style.color = 'red';
                titulo.style.textAlign = 'center'

                pElement.style.display = 'none'

                h3Element.textContent = `Parabéns. O número gerado foi ${gerado}`
                h3Element.style.textAlign = 'center'

                h4Element.textContent = 'Para jogar novamente, clique em reiniciar'
                h4Element.style.color = 'verde'
                h4Element.style.textAlign = 'center'

                botao.style.display = 'none'
                reboot.style.display = 'block'

                entrada.style.display = 'none'

            }

        }else {

            titulo.textContent = 'Tentativas esgotaram :('
            titulo.style.color = 'purple';
            titulo.style.textAlign = 'center'

            pElement.style.display = 'none'

            h3Element.textContent = `O número gerado foi ${gerado}`
            h3Element.style.textAlign = 'center'

            h4Element.textContent = 'Para jogar novamente, clique em reiniciar'
            h4Element.style.color = 'verde'
            h4Element.style.textAlign = 'center'

            botao.style.display = 'none'
            reboot.style.display = 'block'

            entrada.style.display = 'none'
        } 

        elemento.appendChild(output)
        divResultado.appendChild(elemento)
        entrada.value = ""
        entrada.focus()
    })

    reboot.addEventListener('click', () => {
        window.location.reload()
    })


</script>