Como fazer uma calculadora de IMC RESPONSIVA com HTML, CSS e JavaScript
ฝัง
- เผยแพร่เมื่อ 1 เม.ย. 2023
- Olá pessoal!
Nesse vídeo vou te mostrar como fazer uma calculadora de IMC responsiva utilizando HTML, CSS (com FLEXBOX) e JavaScript!
Redes sociais:
LinkedIn: / larissakich
Instagram: @lariikich
GitHub: github.com/Larissakich
Tema do VSCode:
Tokyo Night - วิทยาศาสตร์และเทคโนโลยี
Para quem estiver dando erro quando for adicionar a altura, e só adicionar um step="0.01" no input da altura logo depois do type e antes do name.
Oii, muito obrigada por compartilhar essa dica ☺️
obrigado irmao me ajudou muito 😀😁😁
SALVOU !
vlw meu chapa
OBRIGADO MANO, OBRIGADO VC SALVOU O MEU TRABALHO DA FACULDADE
Nossa... seus vídeos são ótimo para quem esta começando a carreira assim como eu. Estou maratonando todos, e ansioso por mais...😁😁😁
Muito legal essa explicação de revisão após o vídeo, seu conteúdo é bastante explicativo e muito bom.
Excelente vídeo!
Os seus vídeos estão me ajudando muito nos meus estudos. Muito obrigado pelas suas vídeos aulas.
Muito bom Larissa sua didática é ótima e bem direta ao ponto. Parabéns gostei do vídeo.
Maravilhosa demaiiss, é isso, vídeo muito bom, direto ao ponto, comunicação clara. Ótimo vídeo!!!
Muito legal! Ficou ótimo! Muito obrigada pela contribuição
Gostei muito do projeto e da sua explicação! 😍🥰
Sempre trazendo os melhores tutoriais! Sucesso Lari! Trás mais vídeos como esses.❤
Muito muito obrigada, isso me motiva muito, assim que der vou trazer mais ❤️
seus videos estão me ajudando muito. Que Deus te abençoe!!!!
Sensacional, parabéns!
Conteúdo maravilhoso! Parabéns
Adorei! Parabéns pelo vídeo
parabéns pelo vídeo, didática absurdaaaaa
Top demais a didática! Aprendendo. Quero ser um Dev um dia!
Parabéns muito bom 🎉❤
Muito bom seus vídeos, parabéns
Legal a explicação do js no final.
U A U ! Eu que agradeço por dar essa aula.
Muito bom, parabéns pela dedicação, continue assim! 👏
Muito obrigadaaa! 🥰
Adoreiii 🎉
amo pessoas q explicam assim rapidinho. 10000 tnks
Muito obrigada! Hehe
Muito top, parabéns pela didática, impecável.
Muito obrigada! Bons estudos 😊
Vlw! Tô estudando sozinho e seu vídeos me servem de aula, obrigado e continue!
Fico muito feliz em te ajudar 😊 sucesso!
Muito bom!!!!
muito bom estudar programacao !! 🤗
Estou no início dos estudos e seus tutoriais estão me ajudando a fixar o conteúdo! Parabéns e logo logo vou começar a gravar meus projetos e ajudar quem tá começando também!! Quem sabe futuramente possamos fazer parcerias!
Muito obrigada! Super apoio você a gravar seus projetos, com certeza isso irá ajudar outras pessoas! ☺️
Muito bom, continue com os projetos.
Seria legal se vc fizesse um com API tbm é um conteúdo muito importante e quem ta iniciando tem dificuldade.
Muito obrigada! E obrigada pela sujestão, vou fazer sim ☺️😁
Um aprendizado muito maneiro larissa, você conhece meios bem legais como o undraw, posta sempre que der, conteúdo muito bom 👏🏻👏🏻
Muito muito obrigada, vou postar sim ☺️
Mais um projeto concluido! Seus tutoriais estão me ajudando
Fico feliz em poder ajudar ☺️
conseguir aprender e reforça o que eu ja sabia muito bom
Muito obrigada! Fico feliz em poder ajudar 😃
otimo video!
estou no primeiro semestre da faculdade de ads e estou estudando desenvolvimento web e seu video me ajudou muito no meu conhecimento
Fico muito feliz em poder ajudar ☺️
Muito bom, excelente!!!Estou quase acabando praticamente, mas na hora de fazer o teste não me permite colocar 1.70, tenho que colocar 170
Como resolveu???
bom, é o seguinte, você tem que colocar da seguinte forma
invés de pôr
você vai pôr
Que massa! Obrigado por tuas preciosas dicas Larissa.
Eu que agradeço, fico feliz que tenha gostado ☺️
Valeu!
Eu quem agradeçooo! ☺️
Larissa,
Qual extensão você usa para aparecer aquele celular no final do vídeo?
Parabens pelo video lari, qual o nome dessa extensão que você usa para testar a responsividade?
Seria melhor, pior ou não daria diferença usar o switch case no lugar dos if s ?
Caraca!! Poderia dizer qual extensão você usa ? Parabéns pelo vídeo!!
LArissa qual extensão vc usou pra visualização mobile
Qual é essa extensão que você consegue ver seu site em qualquer dispositivo móvel?
oq vc acha sobre bootstrap?
Qual a extensão que você para ver em mobile?
qual nome dessa extensão? para poder visualizar mobile e outros dispositivos
o meu ctrl d não funciona, é as configurações do visual?
Larissa, queria saber se tem como converter um valor inteiro para decimal quando receber o valor do input de altura, pois quando coloco digamos 60 de peso e 170 de altura sem a virgula, ele não faz calculo.
qual a extensão de visualização móvel??
Nome da Extensão (Mobile simulator - responsive testing tool)
vlw major!!
mais alguem deve problema em o lugar de inserir altura nao aceitar numero "quebrado"? o meu so aceita 1 e 2
Boa noite, não estou conseguindo colocar a altura com o ‘ .’ Só vai 170 e não 1.70 . Alguém poderia me ajudar pfv .
qual a extensão para ver como celular
opa baum, qual o nome dessa estação da visualizção movel.
Seria interessante tentar usar object literal para diminuir a quantidade de ifs. Ademais muito bom o video!
@@pedrodavi_05 oii, muito obrigada pela dica ☺️
Qual o nome dessa extensão de dispositivo móvel
so nao consegui deixar responsivo por mais qe faça junto nao fica, alguém conseguiu tudo?
Quando fiz tive que colocar font-family no form para puxar a popping
Qual o nome da extensao movel?
qual o nome dessa extensão?
no final minha calculadora mão aceita números floats (números quebrados como por exemplo '1.5') e agora?
no html em input height precisa definir os incrementos usando step
não estou conseguindo adicionar a figura do "peso"
Nao sei pq, mas essa cor de fundo do site é muito satisfatória. Não é muito escuro ou muito claro
ÓTIMO VÍDEO, adorei, estava com dificuldade para entender como funciona a integração do CSS ao código, seu vídeo ajudou muito!
Só uma coisa: A parte do input::-webkit-outer-spin-button e input::-webkit-inner-spin-button não são compatíveis com o navegador Firefox, então os botões do lado vão continuar aparecendo nesses casos. Demorei um pouco pra perceber isso pois estava achando que eu estava fazendo algo errado.
Existe alguma alternativa de como retirar os botões da lateral para estes casos?
Oii, da uma olhada nesse link: stackoverflow.com/questions/38908445/webkit-inner-spin-button-shows-on-firefox
Acho que ele vai ajudar com esse problema.
O meu está dando problema na imagens alguém poderia me dizer o que pode ser ?
Muito bom! Gostei muito do design e do projeto em si.
Já vi e reli diversas o código, mas eu não consigo colocar a altura por exemplo: 1.70.
Dá erro dizendo que só é possível colocar 1 e 2, pois estes números são os mais próximos do valor inserido.
Muda de number para text
n sei se já conseguiu resolver, mas uma moça comentou a solução aqui:
no html em input height precisa definir os incrementos usando step
eu tbm estava com esse problema
Tu é um rei
Eu te amo lá ele
O nome da extensão é Mobile simulator - responsive testing tool
Isso aí!
Não encontrei os códigos disponíveis no seu github. Acompanhando o processo deu um erro no meu código, não consigo colocar o altura com ponto, ex: 1.75 alt, da erro: "introduza um valor válido, os dois valores mais próximos são 1 e 2." O tamanho da fonte do resultado do imc também ficou grande demais. Gostaria de ver o código para comparar.
Oii, o link está aqui: github.com/Larissakich/bmi_calculator
Por aqui não consigo te ajudar muito bem, mas espero que isso te ajude
Gostei muito do seu tutorial, me ajudou bastante!! Mas eu n consegui encontrar um problema que apareceu no meu código, onde a área de colocar a altura em metros n aceita números com ponto, vc sabe me dizer onde modificar para resolver?
Eu passei mais de uma hora analisando onde eu errei, e eu apenas coloquei uma virgula no lugar de um ponto kkkkk
Oii, que bom que conseguiu resolver 😁
adicione isso no seu CSS, embaixo do #Calculate
#calculate:hover {
box-shadow: 0 12px 16px 0 #0000003d,0 17px 50px 0
#00000030;
transform: scale(1.05);
transition: 0.3s;
}
eu só tive um problema, a calculadora no meu código só aceita números inteiros, mais alguém passou por isso?
no html em input height precisa definir os incrementos usando step
Boa tarde
Qual o nome dessa extensão?
Mobile simulator - responsive testing tool
Essa mesmo, muito obrigada!
Dá um help moça kkk Finalizei o codigo mas qunado coloco algum numero com ponto tipo 1.88 aparece a msg (Insira um valor válido) só aceita numero inteiro :(
faz o codigo assim, no meu deu certo.
Esses projetos vc tira do zero ou pega a base de algum outro ?
Para fazer a parte vizual eu normalmente pego algumas ideias em sites como o dribbble e Pinterest, mas a parte do código eu faço do zero
@@larissakich show de bola. Vlw pelas dicas
OI, não consigo adicionar a virgula o campo imput não esta permitindo como faço?
eu consertei isso no meu colocando essa alteração step, tenta tbm pra ver se funciona
@@lio_s7526 valeu
@@lio_s7526 god, valeu!
Moça, qual o nome dessa extensão pra ver a responsividade ?
Oii, é essa daqui: chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk
@@larissakich muito obrigado
Como é o nome da extensão que tu usa?
eu dei uma procurada, o nome é (Mobile simulator - responsive testing tool)
Rapaz, tava esquecendo de colocar o . na altura e não tava dando certo achei que era problema no meu código fiquei uns 20m me batendo kkkkkkk
Olá, porque será que no meu código , no campo altura não aceita número com ponto?
Obrigado pelo vídeo. Vc deveria continuar, tem didática
type number permite somente digitar inteiros né?
coloquei estes atributo junto com o type number e funcionou
Oi Lari, tudo bem? Você poderia postar o código desse projeto no GitHub, pois comecei ele, completamente finalizei já, porém tem algo dando errado, já procurei o erro durante horas e não acho. 😢
Oii, ele está no GitHub: github.com/Larissakich/bmi_calculator
Espero que consiga encontrar o erro! ❤
O meu tbm está dando erro!
Fica aparecendo
"Insira um valor válido. Os dois valores válidos mais próximos são 1 e 2."
Aparece quando coloco "." no m (exemplo: 1.70)
E a responsividade não está funcionando...
@@user-eu4ef4ev4b estou com o mesmo problema, você conseguiu?
@@user-eu4ef4ev4b o meu tbm ficou aparecendo isso, ai eu copiei apenas o codigo em html dela e funcionou
oi beatriz. você conseguiu resolver? eu tambem estou com problema no codigo
Qual nome dessa Extensão de visualização móvel ?
Se eu não me engano é Simulador de celular - ferramenta de teste responsiva
Obrigado
Não suma por tanto tempo assim!!! ❤
Fica um pouco complicado por conta da escola 😓, mas vou tentar gravar com mais frequência
Nós agradecemos muito! Seu conteúdo é god de mais. Sucesso❤️
Muito muito obrigada 🥰
pra mim nao funcionou
meu único problema foi que simplesmente o meu vscode simplesmente não atualiza o live server conforme eu altero o código '-'
Tenta atualizar a página na primeira vez, no meu quando trava isso resolve
clica com botão direito no index.html la dentro do vs code e clica em abrir com live server
pode ser que o autosave do VS code esteja desativado tbm. Vai em arquivo e ver se está tudo ok
aaah era o autosave! obrigado, pessoal!
Vc comprou algum curso pra aprender?
Oii, comprei o curso do b7web e da Alura
@@larissakich obrigado!
'Promosm' 😱
Sugestão de vídeo, não achei nada com isso em português. Sucesso pra vc! th-cam.com/video/RoXHjac0vX0/w-d-xo.html
Muito obrigada pela sujestão, assim que der vou fazer! ☺️
Minha linda explica melhor as coisas! Teu vídeo é muito bom mas tem coisas que não dá pra entender....