No video
Como fazer uma calculadora de IMC RESPONSIVA com HTML, CSS e JavaScript
Рет қаралды 35,016
Күн бұрын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/Lar...
Tema do VSCode:
Tokyo Night
@lucaseduardo5739 7 ай бұрын
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.
@larissakich 7 ай бұрын
Oii, muito obrigada por compartilhar essa dica ☺️
@victorgoncalves2647 5 ай бұрын
obrigado irmao me ajudou muito 😀😁😁
@nextprodigital 5 ай бұрын
SALVOU !
@CuriosityNews2020 2 ай бұрын
vlw meu chapa
@loock5262 2 ай бұрын
OBRIGADO MANO, OBRIGADO VC SALVOU O MEU TRABALHO DA FACULDADE
@eliabeweverton Жыл бұрын
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!
@larissakich Жыл бұрын
Muito obrigada! Super apoio você a gravar seus projetos, com certeza isso irá ajudar outras pessoas! ☺️
@Brenno-hl7ok Жыл бұрын
Vlw! Tô estudando sozinho e seu vídeos me servem de aula, obrigado e continue!
@larissakich Жыл бұрын
Fico muito feliz em te ajudar 😊 sucesso!
@llukastavares 9 ай бұрын
estou no primeiro semestre da faculdade de ads e estou estudando desenvolvimento web e seu video me ajudou muito no meu conhecimento
@larissakich 9 ай бұрын
Fico muito feliz em poder ajudar ☺️
@danielkubijan8087 2 ай бұрын
Maravilhosa demaiiss, é isso, vídeo muito bom, direto ao ponto, comunicação clara. Ótimo vídeo!!!
@LuizSilva-gy5zf 9 ай бұрын
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
@lucasmatheus5039 9 ай бұрын
Como resolveu???
@arthur07606 6 ай бұрын
bom, é o seguinte, você tem que colocar da seguinte forma invés de pôr você vai pôr
@investindoemativos8690 6 ай бұрын
Top demais a didática! Aprendendo. Quero ser um Dev um dia!
@The_Best_Songs Жыл бұрын
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.
@larissakich Жыл бұрын
Muito obrigada! E obrigada pela sujestão, vou fazer sim ☺️😁
@jeffersongalvao3248 Жыл бұрын
Nossa... seus vídeos são ótimo para quem esta começando a carreira assim como eu. Estou maratonando todos, e ansioso por mais...😁😁😁
@Kenpachiw 5 күн бұрын
Quem quiser colocar uma animação no botão de calcular: #calculate { transition: 0.5s; } #calculate:hover { transform: scale(1.1); }
@Kenpachiw 5 күн бұрын
EDIT: fiz uma modificação legal no JS, que é quando clica em calcular com valores diferentes que mudem os IMC, mudara a cor, e caso coloque outro número ele mude para a nova cor correspondente: No CSS (Caso queira coloque outro nome, ou outra cor): form.addEventListener('submit', function(event) { event.preventDefault(); const weight = parseFloat(document.getElementById('weight').value); ------------ coloquei parseFloat para garantir que sejam interpretados como números ------------ const height = parseFloat(document.getElementById('height').value); ------------ // ------------ .normal_color { color: #F8FAFC; } .below { color: #2296aa; } .ideal { color: #16A34A; } .risk { color: #E68677; } .risk_moderate { color: #F15A42; } .risk_serious { color: #DC2626; } .risk_fatal { color: #880188; } No JS: if (bmi < 18.5) { description = "Cuidado! Você está abaixo do peso!"; value.classList.remove('normal'); value.classList.add('below'); } else if (bmi >= 18.5 && bmi 25 && bmi 30 && bmi 35 && bmi
@hardillesgermanolima7149 6 ай бұрын
Legal a explicação do js no final.
@pedrocfreitas Жыл бұрын
amo pessoas q explicam assim rapidinho. 10000 tnks
@larissakich Жыл бұрын
Muito obrigada! Hehe
@edududusoares 7 ай бұрын
Mais um projeto concluido! Seus tutoriais estão me ajudando
@larissakich 7 ай бұрын
Fico feliz em poder ajudar ☺️
@camillamendes7422 Жыл бұрын
Sempre trazendo os melhores tutoriais! Sucesso Lari! Trás mais vídeos como esses.❤
@larissakich Жыл бұрын
Muito muito obrigada, isso me motiva muito, assim que der vou trazer mais ❤️
@Breakervinci Жыл бұрын
Muito legal essa explicação de revisão após o vídeo, seu conteúdo é bastante explicativo e muito bom.
@horie_h.a. 11 ай бұрын
Excelente vídeo! Os seus vídeos estão me ajudando muito nos meus estudos. Muito obrigado pelas suas vídeos aulas.
@carlosync Жыл бұрын
Muito bom Larissa sua didática é ótima e bem direta ao ponto. Parabéns gostei do vídeo.
@itallosamuel7555 Жыл бұрын
seus videos estão me ajudando muito. Que Deus te abençoe!!!!
@AnaCaroline-rr3xr 6 ай бұрын
Muito legal! Ficou ótimo! Muito obrigada pela contribuição
@MarciaPintoBarcelo1 11 ай бұрын
Gostei muito do projeto e da sua explicação! 😍🥰
@leoleo22341 7 ай бұрын
Muito top, parabéns pela didática, impecável.
@larissakich 7 ай бұрын
Muito obrigada! Bons estudos 😊
@brunathaisjc 11 ай бұрын
U A U ! Eu que agradeço por dar essa aula.
@thiagocarneiro6159 Жыл бұрын
parabéns pelo vídeo, didática absurdaaaaa
@Gamerabrao001 Жыл бұрын
Muito bom, parabéns pela dedicação, continue assim! 👏
@larissakich Жыл бұрын
Muito obrigadaaa! 🥰
@eriklobo6945 8 ай бұрын
conseguir aprender e reforça o que eu ja sabia muito bom
@larissakich 8 ай бұрын
Muito obrigada! Fico feliz em poder ajudar 😃
@rtx_code Жыл бұрын
Parabéns muito bom 🎉❤
@otavioaugustovaz Жыл бұрын
Conteúdo maravilhoso! Parabéns
@luanareinholzPersonal Жыл бұрын
Adorei! Parabéns pelo vídeo
@jv_bsb Жыл бұрын
Nome da Extensão (Mobile simulator - responsive testing tool)
@user-kl4er9xq5n 7 ай бұрын
vlw major!!
@LucasFerreira-tf2rq Жыл бұрын
Um aprendizado muito maneiro larissa, você conhece meios bem legais como o undraw, posta sempre que der, conteúdo muito bom 👏🏻👏🏻
@larissakich Жыл бұрын
Muito muito obrigada, vou postar sim ☺️
@mayconrocha8723 Жыл бұрын
Sensacional, parabéns!
@pedrodavi_05 Ай бұрын
Seria interessante tentar usar object literal para diminuir a quantidade de ifs. Ademais muito bom o video!
@larissakich Ай бұрын
@@pedrodavi_05 oii, muito obrigada pela dica ☺️
@erickdavid2489 Жыл бұрын
Muito bom seus vídeos, parabéns
@Player11Oficcial Жыл бұрын
muito bom estudar programacao !! 🤗
@Diego-sy5dj 3 ай бұрын
Nao sei pq, mas essa cor de fundo do site é muito satisfatória. Não é muito escuro ou muito claro
@janesilva6674 Жыл бұрын
Adoreiii 🎉
@v6semanas 3 ай бұрын
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; }
@WilliamGigliozzi 4 ай бұрын
Valeu!
@larissakich 4 ай бұрын
Eu quem agradeçooo! ☺️
@alexandreandrade5172 Жыл бұрын
Que massa! Obrigado por tuas preciosas dicas Larissa.
@larissakich Жыл бұрын
Eu que agradeço, fico feliz que tenha gostado ☺️
@david-7279 10 ай бұрын
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.
@nilsonsilva7204 10 ай бұрын
Muda de number para text
@jhonnysoares2782 10 ай бұрын
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
@jhonnysoares2782 10 ай бұрын
eu tbm estava com esse problema
@Comandofe01 10 ай бұрын
Tu é um rei
@Comandofe01 10 ай бұрын
Eu te amo lá ele
@ericleirosario 11 ай бұрын
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.
@leonardo70206 9 ай бұрын
@jeanbrazilio2322 6 ай бұрын
otimo video!
@yagofelipe5066 Жыл бұрын
Muito bom!!!!
@devIgorxisto 10 ай бұрын
Seria melhor, pior ou não daria diferença usar o switch case no lugar dos if s ?
@ContreiProvedor 2 ай бұрын
Qual a extensão que você para ver em mobile?
@Gamerabrao001 Жыл бұрын
O nome da extensão é Mobile simulator - responsive testing tool
@larissakich Жыл бұрын
Isso aí!
@leandrotome2077 4 ай бұрын
não estou conseguindo adicionar a figura do "peso"
@mayconrocha8723 Жыл бұрын
Larissa, Qual extensão você usa para aparecer aquele celular no final do vídeo?
@amarildobenedinijunior6525 3 ай бұрын
mais alguem deve problema em o lugar de inserir altura nao aceitar numero "quebrado"? o meu so aceita 1 e 2
@RogerioGoSantos 5 ай бұрын
opa baum, qual o nome dessa estação da visualizção movel.
@user-lb2wq4zt5i 3 ай бұрын
so nao consegui deixar responsivo por mais qe faça junto nao fica, alguém conseguiu tudo?
@allvesdev 6 күн бұрын
rapaziada o meu ta dando o seguinte erro: TypeError: Cannot read properties of null (reading 'value') at HTMLFormElement. (script.js:7:51) alguem sabe oq pode ser?
@jamilfrancisco2224 Жыл бұрын
Quando fiz tive que colocar font-family no form para puxar a popping
@sousa8053 6 ай бұрын
Caraca!! Poderia dizer qual extensão você usa ? Parabéns pelo vídeo!!
@AntonioMarcos-ye3kv 7 ай бұрын
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?
@AntonioMarcos-ye3kv 7 ай бұрын
Eu passei mais de uma hora analisando onde eu errei, e eu apenas coloquei uma virgula no lugar de um ponto kkkkk
@larissakich 7 ай бұрын
Oii, que bom que conseguiu resolver 😁
@matheuslessio2070 10 ай бұрын
o meu ctrl d não funciona, é as configurações do visual?
@thiagofidelis9515 6 ай бұрын
qual nome dessa extensão? para poder visualizar mobile e outros dispositivos
@bynitro8273 7 ай бұрын
qual a extensão de visualização móvel??
@kaycke5073 7 ай бұрын
Ó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?
@larissakich 7 ай бұрын
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.
@matheusalmeida4740 Жыл бұрын
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 .
@elvispresley1728 Жыл бұрын
Boa tarde Qual o nome dessa extensão?
@Gamerabrao001 Жыл бұрын
Mobile simulator - responsive testing tool
@larissakich Жыл бұрын
Essa mesmo, muito obrigada!
@sansodaniel 6 ай бұрын
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.
@larissakich 6 ай бұрын
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
@eduardobezerra6432 2 ай бұрын
O meu está dando problema na imagens alguém poderia me dizer o que pode ser ?
@user-eu3wk2yd9z 11 ай бұрын
qual a extensão para ver como celular
@AlaN_DeV 10 ай бұрын
LArissa qual extensão vc usou pra visualização mobile
@williamdovale1485 8 ай бұрын
Qual é essa extensão que você consegue ver seu site em qualquer dispositivo móvel?
@cailanegois2512 Жыл бұрын
Parabens pelo video lari, qual o nome dessa extensão que você usa para testar a responsividade?
@FelipeSilva-gc9xt 2 ай бұрын
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
@romildorochas Жыл бұрын
no final minha calculadora mão aceita números floats (números quebrados como por exemplo '1.5') e agora?
@geansoares007 11 ай бұрын
no html em input height precisa definir os incrementos usando step
@pedrovargas1021 Жыл бұрын
eu só tive um problema, a calculadora no meu código só aceita números inteiros, mais alguém passou por isso?
@-brenda Жыл бұрын
no html em input height precisa definir os incrementos usando step
@UniversoFascinante21 Жыл бұрын
oq vc acha sobre bootstrap?
@ismaelmaldonado_ 11 ай бұрын
Qual o nome da extensao movel?
@yurifernandes7766 Жыл бұрын
Qual o nome dessa extensão de dispositivo móvel
@VictorSilva-dc7bh 9 ай бұрын
qual o nome dessa extensão?
@shirakotakamoda1862 2 ай бұрын
pra mim nao funcionou
@btruylio Жыл бұрын
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
@btruylio Жыл бұрын
type number permite somente digitar inteiros né?
@btruylio Жыл бұрын
coloquei estes atributo junto com o type number e funcionou
@user-ct5dm1nu3e 8 ай бұрын
Qual nome dessa Extensão de visualização móvel ?
@larissakich 8 ай бұрын
Se eu não me engano é Simulador de celular - ferramenta de teste responsiva
@user-ct5dm1nu3e 8 ай бұрын
Obrigado
@Olucaslealllll Жыл бұрын
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 :(
@giliardconradodasilva1188 11 ай бұрын
faz o codigo assim, no meu deu certo.
@Vibesz____ Жыл бұрын
Não suma por tanto tempo assim!!! ❤
@larissakich Жыл бұрын
Fica um pouco complicado por conta da escola 😓, mas vou tentar gravar com mais frequência
@Vibesz____ Жыл бұрын
Nós agradecemos muito! Seu conteúdo é god de mais. Sucesso❤️
@larissakich Жыл бұрын
Muito muito obrigada 🥰
@beatriztavares4880 Жыл бұрын
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. 😢
@larissakich Жыл бұрын
Oii, ele está no GitHub: github.com/Larissakich/bmi_calculator Espero que consiga encontrar o erro! ❤
@user-eu4ef4ev4b 11 ай бұрын
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...
@LeticiaSantosdeAlmeida-wb4sh 10 ай бұрын
@@user-eu4ef4ev4b estou com o mesmo problema, você conseguiu?
@zakendo1710 10 ай бұрын
@@user-eu4ef4ev4b o meu tbm ficou aparecendo isso, ai eu copiei apenas o codigo em html dela e funcionou
@caalbertii 9 ай бұрын
oi beatriz. você conseguiu resolver? eu tambem estou com problema no codigo
@NilsonSilva-lg4wh Жыл бұрын
OI, não consigo adicionar a virgula o campo imput não esta permitindo como faço?
@lio_s7526 Жыл бұрын
eu consertei isso no meu colocando essa alteração step, tenta tbm pra ver se funciona
@vicnogueira4525 Жыл бұрын
@@lio_s7526 valeu
@scr4018 11 ай бұрын
@@lio_s7526 god, valeu!
@AlexSoaresGtr Жыл бұрын
Moça, qual o nome dessa extensão pra ver a responsividade ?
@larissakich Жыл бұрын
Oii, é essa daqui: chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk
@AlexSoaresGtr Жыл бұрын
@@larissakich muito obrigado
@RodrigoOliveira-gd1zj Жыл бұрын
Esses projetos vc tira do zero ou pega a base de algum outro ?
@larissakich Жыл бұрын
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
@RodrigoOliveira-gd1zj Жыл бұрын
@@larissakich show de bola. Vlw pelas dicas
@pablocavalcantee7720 Жыл бұрын
Como é o nome da extensão que tu usa?
@jv_bsb Жыл бұрын
eu dei uma procurada, o nome é (Mobile simulator - responsive testing tool)
@quemediga 11 ай бұрын
meu único problema foi que simplesmente o meu vscode simplesmente não atualiza o live server conforme eu altero o código '-'
@larissakich 11 ай бұрын
Tenta atualizar a página na primeira vez, no meu quando trava isso resolve
@konji8902 10 ай бұрын
clica com botão direito no index.html la dentro do vs code e clica em abrir com live server
@alanoliveiraoliveira2928 9 ай бұрын
pode ser que o autosave do VS code esteja desativado tbm. Vai em arquivo e ver se está tudo ok
@quemediga 9 ай бұрын
aaah era o autosave! obrigado, pessoal!
@pauloalexandre2154 Жыл бұрын
Vc comprou algum curso pra aprender?
@larissakich Жыл бұрын
Oii, comprei o curso do b7web e da Alura
@pauloalexandre2154 Жыл бұрын
@@larissakich obrigado!
@veronikedearmore1347 Жыл бұрын
'Promosm' 😱
@jefersonsilvadeveloper Жыл бұрын
Sugestão de vídeo, não achei nada com isso em português. Sucesso pra vc! kzfaq.info/get/bejne/iNWIe82SyJbaiGQ.html
@larissakich Жыл бұрын
Muito obrigada pela sujestão, assim que der vou fazer! ☺️
@user-rj2gk2ld9f Жыл бұрын
Minha linda explica melhor as coisas! Teu vídeo é muito bom mas tem coisas que não dá pra entender....
Larissa Kich
Рет қаралды 49 М.
Matheus Battisti - Hora de Codar
Рет қаралды 19 М.