Aula 7: Sorteio com Botões e Funções
Caso ainda não tenha assistido à aula 6, clique aqui para acessar
Seja bem-vindo e bem-vinda à sétima aula da #QuarentenaDev! Você, é você mesmo que queria descobrir como exibir o html primeiro e depois gerar a interação do usuário com JavaScript, essa aula é para você. E para você que não queria saber, afinal a aula é para todos e todas!
Compartilhe seus experimentos no nosso espaço de discussão no discord. Use o codepen, marque a @aluraonline no instagram, twitter e muito mais!
Aqui usamos uma "mistura" de prompt para pedir o número do mês e ifs para exibir qual é o mês:
Então primeiro tinhamos que colocar uma identificação dentro de uma tag, que são essas caixas onde colocamos conteúdo, para que fosse possível colocar a resposta lá dentro.
<h1>Qual é o mês?</h1>
<h2 id="meses"></h2>Depois selecionamos essa tag com JavaScript. usando o prompt pedimos o mês e com vários ifs conseguimos identificar qual o mês escolhido pelo usuário!
qualMes = prompt("Digite um número para saber o mês")
if(qualMes==1){meses.innerHTML="Janeiro"}
if(qualMes==2){meses.innerHTML="fevereiro"}
if(qualMes==3){meses.innerHTML="Março"}
if(qualMes==4){meses.innerHTML="Abril"}
if(qualMes==5){meses.innerHTML="Maio"}
if(qualMes==6){meses.innerHTML="Junho"}
if(qualMes==7){meses.innerHTML="julho"}
if(qualMes==8){meses.innerHTML="agosto"}
if(qualMes==9){meses.innerHTML="setembro"}
if(qualMes==10){meses.innerHTML="outubro"}
if(qualMes==11){meses.innerHTML="Novembro"}
if(qualMes==12){meses.innerHTML="Dezembro"}Nesse exercício precisamos da ajuda dos simbolos matemáticos que vão nos acompanhar pela vida toda como programadores e programadoras.
> maior que
< menor que
>= maior ou igual a
<= menor ou igual a.E para fazer um controle mais fino precisavamos do operador lógico do JavaScript o && ele quer dizer e. Então if(a > 0 && a < 10) quer dizer a maior que zero e a menor que 10. Depois de fazer o cálculo da aula2 para descobrir o imc, tinhamos que olhar na tabela e criar as condições.
if(imc <=17){document.write("Seu peso está abaixo do normal.")}
if(imc >=18 && imc < 24.99){document.write("Seu peso está normal")}
if(imc >=25 && imc < 29.99){document.write("Seu peso está acima do normal.")}
if(imc >=30 && imc < 34.99){document.write("Você está com obesidade I")}
if(imc >=35){document.write("Você está com obesidade II")}Aqui tem a codepen base utilizada na aula.
O Paulo desafiou vocês a trocar o estilo da mensagem de você ganhou ou você perdeu
O Art desafiou você a não deixar o usuário digitar um número maior que 10, caso ele digite um maior, dizer que ele não pode e pedir para digitar um novo número.
Para alterar o html utilizando JavaScript primeiro selecionamos a tag que diz respeito ao parágrafo a paragrafoResultado e depois usamos a propriedade innerHTML que vai ser reposável por colocar o texto!
paragrafoResultado.innerHTML= 'Voce ganhou o sorteio' Para alterar o css o principio é igual, porém no lugar de innerHTML que mexe com html , passamos a propriedade style do css e depois a propriedade que queremos alterar.
Nesse exemplo escolhemos a propriedade backgroundColor que altera a cor de fundo e passamos a cor amarela. Assim quando o evento for ativado e acertarmos o número a cor de fundo fica amarela.
paragrafoResultado.style.backgroundColor = "yellow"Dica de como dizer ao usuário que os números precisam ficar entre 0 e 10
no código da aula fazemos a comparação logo no começo
numerocerto=chute==aleatorioO que vamos fazer é colocar essa comparação depois de ter certeza que o número está entre 1 e 10.
E para fazer essa comparação vamos usar o if , operador lógico ou que em javascript é || e simbolos que indicam : > maior que e < menor que
if( chute < 0 || chute > 10 ){ pedir um novo número}Estamos dizendo que caso chute for menor que zero ou maior que 10 vamos pedir um numero novo só depois dessa verificação fazemos a comparação do número digitado com o gerado pelo aleatorio
chute=prompt('Seu numero da sorte(1-10)')
if( chute < 0 || chute > 10 ){ pedir um numero novo}
numerocerto= chute==aleatorio