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
Sensacional, parabéns!
Conteúdo maravilhoso! Parabéns
Adorei! Parabéns pelo vídeo
Muito legal! Ficou ótimo! Muito obrigada pela contribuição
parabéns pelo vídeo, didática absurdaaaaa
Parabéns muito bom 🎉❤
Gostei muito do projeto e da sua explicação! 😍🥰
seus videos estão me ajudando muito. Que Deus te abençoe!!!!
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 seus vídeos, parabéns
Muito bom Larissa sua didática é ótima e bem direta ao ponto. Parabéns gostei do vídeo.
Nossa... seus vídeos são ótimo para quem esta começando a carreira assim como eu. Estou maratonando todos, e ansioso por mais...😁😁😁
U A U ! Eu que agradeço por dar essa aula.
Legal a explicação do js no final.
Top demais a didática! Aprendendo. Quero ser um Dev um dia!
Maravilhosa demaiiss, é isso, vídeo muito bom, direto ao ponto, comunicação clara. Ótimo vídeo!!!
Adoreiii 🎉
muito bom estudar programacao !! 🤗
Muito bom!!!!
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 ❤️
Muito bom, parabéns pela dedicação, continue assim! 👏
Muito obrigadaaa! 🥰
amo pessoas q explicam assim rapidinho. 10000 tnks
Muito obrigada! Hehe
otimo video!
Muito top, parabéns pela didática, impecável.
Muito obrigada! Bons estudos 😊
conseguir aprender e reforça o que eu ja sabia muito bom
Muito obrigada! Fico feliz em poder ajudar 😃
Mais um projeto concluido! Seus tutoriais estão me ajudando
Fico feliz em poder ajudar ☺️
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 ☺️😁
Vlw! Tô estudando sozinho e seu vídeos me servem de aula, obrigado e continue!
Fico muito feliz em te ajudar 😊 sucesso!
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 ☺️
Valeu!
Eu quem agradeçooo! ☺️
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! ☺️
Que massa! Obrigado por tuas preciosas dicas Larissa.
Eu que agradeço, fico feliz que tenha gostado ☺️
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
Parabens pelo video lari, qual o nome dessa extensão que você usa para testar a responsividade?
Caraca!! Poderia dizer qual extensão você usa ? Parabéns pelo vídeo!!
Larissa,
Qual extensão você usa para aparecer aquele celular no final do vídeo?
Seria melhor, pior ou não daria diferença usar o switch case no lugar dos if s ?
Nome da Extensão (Mobile simulator - responsive testing tool)
vlw major!!
oq vc acha sobre bootstrap?
Quando fiz tive que colocar font-family no form para puxar a popping
Qual a extensão que você para ver em mobile?
qual a extensão de visualização móvel??
LArissa qual extensão vc usou pra visualização mobile
qual nome dessa extensão? para poder visualizar mobile e outros dispositivos
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;
}
Qual é essa extensão que você consegue ver seu site em qualquer dispositivo móvel?
qual a extensão para ver como celular
opa baum, qual o nome dessa estação da visualizção movel.
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.
O nome da extensão é Mobile simulator - responsive testing tool
Isso aí!
Ó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 ctrl d não funciona, é as configurações do visual?
Qual o nome dessa extensão de dispositivo móvel
mais alguem deve problema em o lugar de inserir altura nao aceitar numero "quebrado"? o meu so aceita 1 e 2
Qual o nome da extensao movel?
Nao sei pq, mas essa cor de fundo do site é muito satisfatória. Não é muito escuro ou muito claro
qual o nome dessa extensão?
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
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 .
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"
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 😁
so nao consegui deixar responsivo por mais qe faça junto nao fica, alguém conseguiu tudo?
O meu está dando problema na imagens alguém poderia me dizer o que pode ser ?
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
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
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
Boa tarde
Qual o nome dessa extensão?
Mobile simulator - responsive testing tool
Essa mesmo, muito obrigada!
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
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 🥰
Como é o nome da extensão que tu usa?
eu dei uma procurada, o nome é (Mobile simulator - responsive testing tool)
Qual nome dessa Extensão de visualização móvel ?
Se eu não me engano é Simulador de celular - ferramenta de teste responsiva
Obrigado
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.
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
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!
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
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
'Promosm' 😱
pra mim nao funcionou
Vc comprou algum curso pra aprender?
Oii, comprei o curso do b7web e da Alura
@@larissakich obrigado!
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!
Sugestão de vídeo, não achei nada com isso em português. Sucesso pra vc! ua-cam.com/video/RoXHjac0vX0/v-deo.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....