Caso ainda não tenha assistido à aula 5, clique aqui para acessar
Seja bem-vindo e bem-vinda à sexta aula da #QuarentenaDev! Sabe aquele programa que te mostra um resultado baseado na sua resposta? Então chegou a hora de aprender como fazer!!
Compartilhe seus experimentos no nosso espaço de discussão no discord. Use o codepen, marque a @aluraonline no instagram, twitter e muito mais!
Espero que você tenha estudado os capítulos iniciais da documentação da mdn indicada pela nossa professora!
No exercicio do Art queriamos estilizar na resposta da caluladora, utilizando css dentro do `document.write. Podiamos usar tags e dentro delas passar a propriedade style que vai "injetar" os estilos que escolhemos!
document.write("<body style=background-color:green;>" + "<h1>Sua corrida deu R$: </h1>" + "<h2>" + valorcorrida.toFixed(2) + "</h2>" + "</body>")Para resolver esse exercício primeiro precisamos montar a estrutura do html
- <h1></h1> é a tag de cabeçalho mais importante
- <img src="link da imagem"> tag responsável pela imagem, dentro dela passamos o link da foto que queremos exibir
- <h2></h2> é um subtitulo
- <ul></ul> cria uma lista desordenada
- <li></li> usamos dentro da <ul> para dizer que é um item de lista
- <a></a> é a tag de ancora é ela que vai receber o endereço que quando clicarmos vamos ser redirecionados Depois usamos o css para estilizar esse esqueleto html. Selecionamos a tag e dentro dela passamos o estilo.
- color: é a cor que queremos
- width, height: largura e altura da imagem
- border: espessura, tipo e cor da bordaA resposta completa está nesse codepen
Para trocar a cor da pokebola precisavamos trocar a última instrução do box-shadow que diz respeito a cor
150px 25px 0px 0px blue,Tivemos também um desafio para replicar a pokebola do zero, e para isso, a Vanessa nossa professora criou um video que nos ajuda a entender o que é box-model e box-shadow.
Utilizando a instrução if você consegue dizer para o usuário qual é o mês baseado no número de 1 a 12 que ele escolher.
Na aula2 tem uma tabela dizendo qual o significado do resultado do imc. Depois de calcular, você consegue exibir o significado do IMC da pessoa?
ex: imc for 17 exibir abaixo do peso
Código inicial da ficha para fazer o fork: codepen
Código completo da ficha para consulta: codepen