Transcrições
1. Apresentação: Olá, pessoal,
e obrigado por virem a este novo projeto de
JavaScript. Neste projeto,
aprenderemos como podemos criar um conversor de temperatura usando
HTML, CSS e JavaScript. Você pode ver aqui
que temos duas entradas, uma para os graus Celsius e outra para
o Então, se eu chegar aqui e
adicionar qualquer grau Celsius, você pode ver que ele é
automaticamente convertido Fahrenheit e exibido aqui
na entrada Fahrenheit Observe também que temos
essas duas setas para cima e para baixo que podemos usar para aumentar
ou diminuir os graus. Também podemos converter o
contrário de Fahrenheit para Celsius
inserindo um
valor em Fahrenheit aqui,
e você pode ver que ele é
convertido em Celsius e exibido aqui e você pode ver que ele é
convertido em Celsius e Fahrenheit para Celsius
inserindo um
valor em Fahrenheit aqui,
e você pode ver que ele é
convertido em Celsius e exibido aqui na entrada Celsius. Este curso é ideal para estudantes que
aprenderam os fundamentos do Javascript e desejam aplicar seus conhecimentos
de forma prática Ao criar um aplicativo de lista de tarefas simples, mas
envolvente, os alunos
ganharão experiência prática, aprofundarão sua compreensão
dos principais conceitos de Javascript e aumentarão sua confiança no desenvolvimento de projetos do mundo real Para aproveitar ao
máximo este curso, os alunos são incentivados a criar o projeto por
conta própria e enviar o trabalho concluído como um arquivo zip para a galeria do
projeto.
2. Design de interface do usuário do conversor de temperatura usando HTML e CSS: Ok, pessoal, vamos ver como
podemos criar esse projeto. Vou começar aqui no meu
HTML adicionando um div, dando a ele uma classe de wrapper Então, dentro disso, adicionarei outro div com uma
classe de contêiner E esse contêiner
div conterá entrada e
o rótulo Celsius Então, vou adicionar um rótulo
e dizer Celsius. Então, abaixo disso,
adicionarei uma nova entrada. Forneça um tipo de número porque os graus de
temperatura são
obviamente números, não texto. Também lhe darei
uma identificação de Celsius. Em seguida, entrarei aqui dentro
do rótulo e direi quatro, depois adicionarei o ID
da entrada Celsius Portanto, esse contêiner
conterá a entrada Celsius. Para criar
a entrada em Fahrenheit, copiaremos essa faixa de
contêiner, colaremos novamente e
alteraremos Celsius para Fahrenheit E aqui. E aqui também. Agora você pode ver que temos essas duas entradas aqui
no canto superior esquerdo
do navegador Ok, agora vou ao
meu CSS para estilizá-los. Primeiro, vou atacar o corpo. E adicione cor de fundo, essa cor laranja legal. Então, abaixo disso, vou direcionar o invólucro div que contém os dois contêineres e definir
sua largura para 450 pixels Em seguida, adicione
cor de fundo, branco, preenchimento, 70 pixels
na parte superior e inferior e 40 pixels na
esquerda e na direita Em seguida, adicionarei sombra de caixa, zero como deslocamento horizontal, 20 pixels como deslocamento vertical, 25 pixels como valor de desfoque
e essa cor semitransparente Então, para ter
alguns cantos arredondados, adicionarei o
raio da borda, oito pixels Agora, queremos centralizar o
invólucro div dentro do corpo. Então, vou aqui e adicionarei
display flex, justificarei o conteúdo, centralizarei para centralizá-lo
horizontalmente, alinhar itens, para
centralizá-lo verticalmente centralizarei para centralizá-lo
horizontalmente, alinhar itens, centralizar para
centralizá-lo verticalmente e altura de 100 VH. E agora você pode ver que
o invólucro div está centralizado dentro do corpo Ok, agora vamos direcionar os divs com a
classe de contêiner E adicione largura, 45%. E agora você pode ver
que eles estão ocupando 45% do invólucro div Ok, agora vamos direcionar as
entradas dentro dos contêineres e adicionar 100% de largura Portanto, ele ocupará toda a
largura do contêiner, que é 45% do mergulho do rapper Em seguida, altura, 50 pixels, raio da
borda, cinco pixels,
borda, dois pixels, sólido, essa
cor cinza claro, contorno,
nenhum, depois preenchimento,
zero na parte superior e inferior e dez pixels na
esquerda
e E, finalmente, margem superior, oito pixels para adicionar algum espaçamento entre as
entradas e os E agora queremos posicionar os dois contêineres
um ao lado do outro na mesma linha. E podemos fazer isso
usando o Flexbox. Então, vou entrar aqui dentro do div do
wrapper e adicionar o espaço de
conteúdo display, flex e justify entre eles, para que os dois contêineres sejam
separados E agora, como vocês
podem ver, pessoal, as duas entradas estão
exatamente do jeito que queremos Mas a única coisa que
resta é alterar
a cor da borda da
entrada ao focar nela Então, vou aqui e digo
entrada e, ao focar nela, adicionarei a
cor de fundo, nossa cor laranja. E agora, quando eu me concentro
nas entradas, você pode ver a
cor da borda mudar para laranja E pronto, pessoal,
para esta lição. Concluímos o HTML
e o CSS deste projeto e aprenderemos como fazê-lo funcionar na próxima lição. Então, nos vemos lá?
3. Como adicionar funcionalidade usando JavaScript: Ok, todo mundo. Depois de terminar o HTML e o CSS do nosso aplicativo conversor de
temperatura, nesta lição,
começaremos a adicionar funcionalidades a ele
usando JavaScript. Então, basicamente, o que
queremos fazer é quando adicionamos um valor específico
na entrada Celsius,
queremos pegar esse
valor, fazer algumas contas nele, convertê-lo em Fahrenheit e exibi-lo na entrada Fahrenheit exibi-lo na entrada Fahrenheit Além disso, ao inserir
um valor em Fahrenheit, queremos pegá-lo e
convertê-lo em Celsius e
exibi-lo na entrada Celsius exibi-lo Então, primeiro de tudo, queremos a equação que converte graus
Celsius em graus
Fahrenheit e a outra que converte
o contrário de graus contrário E como você pode ver aqui, eu
adicionei essas duas equações. Então, para converter de
Celsius para Fahrenheit, usaremos Vamos pegar o grau Celsius, multiplicá-lo por 9/5 adicionar 32 ao resultado E usaremos este aqui para converter de
Fahrenheit para Celsius Vamos pegar o grau
Fahrenheit, depois subtrair 32
e
multiplicá-lo por 5/9 Incrível. Agora, vamos começar a
trabalhar em nosso script Java. Em primeiro lugar, quero
selecionar as duas entradas. Então, vou criar uma nova
variável, chame-a de Celsius. Então eu vou dizer documento
Obter elemento por ID. Em seguida, vou direcionar a entrada
com o ID de Celsius. Então eu vou duplicar isso,
nomear a variável Fahrenheit E direcione a entrada com
o ID de Fahrenheit. Então, abaixo disso,
direi Celsius, adicione o Event Listener E eu quero que vocês pensem
um pouco aqui, pessoal, sobre o evento
que devemos ouvir. Até agora, lidamos
apenas com eventos de
clique em botões
específicos, mas agora não temos
botões em nosso exemplo Na verdade, queremos ouvir
a mudança do valor
de entrada aqui. Então, cada vez que alteramos o
valor dentro dessa entrada, queremos detectar isso e dizer ao
JavaScript que execute alguma
ação em resposta,
que é, obviamente,
pegar o novo valor e convertê-lo em
Fahrenheit para exibi-lo E veremos como
fazer isso em um segundo. Mas agora, voltando ao
evento que devemos usar para detectar
a mudança na entrada, e esse evento é
simplesmente chamado de entrada. Então, vou adicionar informações aqui. Em seguida, adicionarei nossa
função de retorno de chamada que deve ser executada sempre que o valor
de entrada for alterado E, por enquanto, vamos tentar
uma ação simples
para entendermos como
o evento de entrada funciona. Vou apenas dizer log de pontos do console e vou imprimir o valor
de entrada alterado. Depois vou ver
o console e observar o que obtemos no console ao alterar o valor
da entrada Celsius Você pode ver que cada vez
que eu altero o valor, essa frase aqui é impressa, e você pode saber isso
pelo número
à esquerda aqui. Tudo bem. Agora vamos remover essa linha. E agora, cada vez que inserimos um
valor na entrada Celsius, queremos pegar esse valor, multiplicá-lo por 9/5 e adicionar 32 ao resultado Então, vou aqui e direi valor do ponto
Celsius para pegar o valor dentro
da entrada Celsius Em seguida, vezes 9/5 mais 32. Ao fazer isso, ele é
convertido em Fahrenheit. Então, agora é hora de
exibi-lo na entrada Fahrenheit. Podemos fazer isso dizendo que valor do ponto em
Fahrenheit é
igual a E agora, quando tento
adicionar um valor Celsius, você pode ver que ele é convertido em
Fahrenheit E cada vez que alteramos
o valor em Celsius,
o valor em Fahrenheit também é atualizado Vamos tentar adicionar menos
12 aqui como um valor Celsius. Você pode ver que temos dez e
todos esses números à
direita do ponto decimal Mas isso não
parece nada bom. Em vez disso, queremos exibir apenas dois números após
o ponto decimal, e podemos fazer isso usando
o método fixo de dois Vou aqui e
adicionarei dois números fixos, exceto o número de dígitos que queremos adicionar Então, vou adicionar dois. E agora, quando eu volto e
tento menos 12, novamente, você pode ver que agora está
exibindo 10,40, e todos os outros
dígitos foram Incrível, pessoal. Agora,
vamos tentar outra coisa. Vamos apenas remover
esse valor aqui. Você pode ver que temos 32
no lado Fahrenheit,
embora não tenhamos nenhum
valor no lado embora não tenhamos nenhum
valor no E 32 aqui na verdade é
equivalente a 0 Celsius. Então, se eu adicionar zero aqui, você pode ver que isso não muda. Agora, quando a
entrada Celsius está vazia, queremos que o Fahrenheit
também esteja vazio, e podemos fazer isso Eu vou aqui e direi: o valor ponto de
exclamação em
Celsius E esse
ponto de exclamação significa simplesmente que não. Por isso, nega tudo o que
vem depois. Então, esse código basicamente significa que se não
há valor para
a entrada Celsius, isso acontece quando ela está vazia Ok, dentro disso,
adicionaremos o valor do ponto em Fahrenheit e definiremos isso como strings vazias. E agora, quando eu volto
e tento qualquer valor e
depois o removo, você pode ver o valor
em Fahrenheit também foi E com isso, pessoal, terminamos a primeira
metade do projeto. A boa notícia é que
não há nada de novo no segundo tempo. Podemos simplesmente copiar esse código. Cole aqui e comece
a ajustar algumas coisas. Vou mudar Celsius
aqui para Fahrenheit. Eu também vou mudar isso aqui. Em seguida, remova essa fórmula e adicione a fórmula para
converter Fahrenheit Vou adicionar o
valor de Fahrenheit -32 vezes 5/9. Em seguida, adicionarei dois
fixos, dois também. Também vou mudar
Celsius aqui para Fahrenheit e Fahrenheit Portanto, quando o Fahrenheit não
tiver valor, a entrada Celsius também estará E agora, quando adiciono qualquer valor na entrada em
Fahrenheit, você pode ver que ele é convertido Celsius e exibido aqui
na entrada Celsius E com isso, pessoal,
nosso aplicativo está finalizado, mas eu quero acrescentar uma
pequena coisa aqui. Ao carregar a página, queremos que a entrada Celsius
seja focada Então, vou aqui e digo
window dot add Event Listener. Carregar. Portanto, esse evento é acionado
quando a página é Em seguida, adicionarei uma função de
retorno de chamada. E dentro dele,
direi foco em pontos Celsius. E agora você pode ver que cada
vez que eu recarrego a página, a entrada Celsius é o que
está focado. E é isso. Para a aula, pessoal. Espero que você goste deste projeto e aprenda algo com ele
que possa ser usado em qualquer projeto
que possa fazer no futuro. E nos vemos
na próxima.
Ahmed Sadek, full stack web developer, freelancer & t
