Consolidando meu conhecimento

Consolidando oque foi visto na unidade 08. Style feito por Amanda Carvalho.

<meta charset="UTF-8">

<div class="body">
    <div class="body-in">

            <h1>Jogo do azar</h1>
            <p>Você deve adivinhar qual número o computador pensou, caso erre terá que me enviar um PIX. Escolha um número de 1 a 10.</p>

            <label class="palpite">Digite o número:</label>
            <input/>
            <button>Enviar</button>
    </div>
</div>

<style>
* {
    margin:0px;
    padding:0px;
    text-decoration: none;
    font-style: none;
    font-family: sans-serif;
    color: #FFFFFF;
    text-align: center;
}

.body {
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.body-in {
    width: 500px;
    height: 150px;
    background-color: #af14ec;
    border-radius: 20px;
    padding: 40px;

}

body {
  background-color: #000000;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}

label {
    font-size: 17px;
    padding-right: 5px;
}

input {
    width: 100px;
    height: 30px;
    color: #000000;
}

button {
    color: #000000;
    text-decoration: none;
    width: 80px;
    height: 30px;
    border: none;
    font-weight: bold;
    margin-left: 5px;
}

</style>

<script>

    alert("Bem vindo ao jogo do azar, gostaria de fazer uma aposta de 10$?! Caso acerte o número pesando ganhará, caso erre terá que enviar um pix com o valor da aposta.");

    var num = Math.round(Math.random() * 10);

    var input = document.querySelector("input");
        input.focus();

    function verifica() {

        if(input.value == num) {
            alert("Parabéns você acertou! O número pensado foi: " + num);

        }
        else {
            if (input.value > num) {
                alert("Errou! você chutou um valor muito acima do pensado, manda os 10$ reias no pix: 4002-8922");
                }
                else{
                alert("Errou! você chutou um valor muito abaixo do pensado! manda os 10$ reias no pix: 4002-8922")
                }
            }

            input.value = "";
            input.focus();

    }

    var button = document.querySelector("button");

    button.onclick = verifica;

</script>