Тёмный

Como fazer uma calculadora de IMC RESPONSIVA com HTML, CSS e JavaScript 

Larissa Kich
Подписаться 20 тыс.
Просмотров 31 тыс.
50% 1

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

Наука

Опубликовано:

 

1 апр 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 147   
@lucaseduardo5739
@lucaseduardo5739 4 месяца назад
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
@larissakich 4 месяца назад
Oii, muito obrigada por compartilhar essa dica ☺️
@victorgoncalves2647
@victorgoncalves2647 2 месяца назад
obrigado irmao me ajudou muito 😀😁😁
@nextprodigital
@nextprodigital 2 месяца назад
SALVOU !
@CuriosityNews2020
@CuriosityNews2020 День назад
vlw meu chapa
@Breakervinci
@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.
@horie_h.a. 8 месяцев назад
Excelente vídeo! Os seus vídeos estão me ajudando muito nos meus estudos. Muito obrigado pelas suas vídeos aulas.
@carlosync
@carlosync 11 месяцев назад
Muito bom Larissa sua didática é ótima e bem direta ao ponto. Parabéns gostei do vídeo.
@itallosamuel7555
@itallosamuel7555 11 месяцев назад
seus videos estão me ajudando muito. Que Deus te abençoe!!!!
@jeffersongalvao3248
@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...😁😁😁
@MarciaPintoBarcelo1
@MarciaPintoBarcelo1 9 месяцев назад
Gostei muito do projeto e da sua explicação! 😍🥰
@AnaCaroline-rr3xr
@AnaCaroline-rr3xr 3 месяца назад
Muito legal! Ficou ótimo! Muito obrigada pela contribuição
@camillamendes7422
@camillamendes7422 Год назад
Sempre trazendo os melhores tutoriais! Sucesso Lari! Trás mais vídeos como esses.❤
@larissakich
@larissakich Год назад
Muito muito obrigada, isso me motiva muito, assim que der vou trazer mais ❤️
@otavioaugustovaz
@otavioaugustovaz Год назад
Conteúdo maravilhoso! Parabéns
@thiagocarneiro6159
@thiagocarneiro6159 11 месяцев назад
parabéns pelo vídeo, didática absurdaaaaa
@investindoemativos8690
@investindoemativos8690 4 месяца назад
Top demais a didática! Aprendendo. Quero ser um Dev um dia!
@hardillesgermanolima7149
@hardillesgermanolima7149 3 месяца назад
Legal a explicação do js no final.
@luanareinholzPersonal
@luanareinholzPersonal Год назад
Adorei! Parabéns pelo vídeo
@mayconrocha8723
@mayconrocha8723 Год назад
Sensacional, parabéns!
@pedrocfreitas
@pedrocfreitas Год назад
amo pessoas q explicam assim rapidinho. 10000 tnks
@larissakich
@larissakich Год назад
Muito obrigada! Hehe
@rtx_code
@rtx_code 11 месяцев назад
Parabéns muito bom 🎉❤
@erickdavid2489
@erickdavid2489 Год назад
Muito bom seus vídeos, parabéns
@Gamerabrao001
@Gamerabrao001 Год назад
Muito bom, parabéns pela dedicação, continue assim! 👏
@larissakich
@larissakich Год назад
Muito obrigadaaa! 🥰
@llukastavares
@llukastavares 6 месяцев назад
estou no primeiro semestre da faculdade de ads e estou estudando desenvolvimento web e seu video me ajudou muito no meu conhecimento
@larissakich
@larissakich 6 месяцев назад
Fico muito feliz em poder ajudar ☺️
@Brenno-hl7ok
@Brenno-hl7ok Год назад
Vlw! Tô estudando sozinho e seu vídeos me servem de aula, obrigado e continue!
@larissakich
@larissakich Год назад
Fico muito feliz em te ajudar 😊 sucesso!
@brunathaisjc
@brunathaisjc 8 месяцев назад
U A U ! Eu que agradeço por dar essa aula.
@leoleo22341
@leoleo22341 4 месяца назад
Muito top, parabéns pela didática, impecável.
@larissakich
@larissakich 4 месяца назад
Muito obrigada! Bons estudos 😊
@LuizSilva-gy5zf
@LuizSilva-gy5zf 7 месяцев назад
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
@lucasmatheus5039 6 месяцев назад
Como resolveu???
@arthur07606
@arthur07606 3 месяца назад
bom, é o seguinte, você tem que colocar da seguinte forma invés de pôr você vai pôr
@eliabeweverton
@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
@larissakich Год назад
Muito obrigada! Super apoio você a gravar seus projetos, com certeza isso irá ajudar outras pessoas! ☺️
@The_Best_Songs
@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
@larissakich Год назад
Muito obrigada! E obrigada pela sujestão, vou fazer sim ☺️😁
@Player11Oficcial
@Player11Oficcial 11 месяцев назад
muito bom estudar programacao !! 🤗
@janesilva6674
@janesilva6674 Год назад
Adoreiii 🎉
@edududusoares
@edududusoares 5 месяцев назад
Mais um projeto concluido! Seus tutoriais estão me ajudando
@larissakich
@larissakich 4 месяца назад
Fico feliz em poder ajudar ☺️
@LucasFerreira-tf2rq
@LucasFerreira-tf2rq 10 месяцев назад
Um aprendizado muito maneiro larissa, você conhece meios bem legais como o undraw, posta sempre que der, conteúdo muito bom 👏🏻👏🏻
@larissakich
@larissakich 10 месяцев назад
Muito muito obrigada, vou postar sim ☺️
@yagofelipe5066
@yagofelipe5066 Год назад
Muito bom!!!!
@eriklobo6945
@eriklobo6945 6 месяцев назад
conseguir aprender e reforça o que eu ja sabia muito bom
@larissakich
@larissakich 6 месяцев назад
Muito obrigada! Fico feliz em poder ajudar 😃
@cailanegois2512
@cailanegois2512 Год назад
Parabens pelo video lari, qual o nome dessa extensão que você usa para testar a responsividade?
@alexandreandrade5172
@alexandreandrade5172 Год назад
Que massa! Obrigado por tuas preciosas dicas Larissa.
@larissakich
@larissakich Год назад
Eu que agradeço, fico feliz que tenha gostado ☺️
@mayconrocha8723
@mayconrocha8723 Год назад
Larissa, Qual extensão você usa para aparecer aquele celular no final do vídeo?
@jeanbrazilio2322
@jeanbrazilio2322 4 месяца назад
otimo video!
@sousa8053
@sousa8053 4 месяца назад
Caraca!! Poderia dizer qual extensão você usa ? Parabéns pelo vídeo!!
@jv_bsb
@jv_bsb 9 месяцев назад
Nome da Extensão (Mobile simulator - responsive testing tool)
@user-kl4er9xq5n
@user-kl4er9xq5n 4 месяца назад
vlw major!!
@devIgorxisto
@devIgorxisto 7 месяцев назад
Seria melhor, pior ou não daria diferença usar o switch case no lugar dos if s ?
@AlaN_DeV
@AlaN_DeV 7 месяцев назад
LArissa qual extensão vc usou pra visualização mobile
@WilliamGigliozzi
@WilliamGigliozzi 2 месяца назад
Valeu!
@larissakich
@larissakich 2 месяца назад
Eu quem agradeçooo! ☺️
@UniversoFascinante21
@UniversoFascinante21 Год назад
oq vc acha sobre bootstrap?
@ContreiProvedor
@ContreiProvedor 7 дней назад
Qual a extensão que você para ver em mobile?
@thiagofidelis9515
@thiagofidelis9515 4 месяца назад
qual nome dessa extensão? para poder visualizar mobile e outros dispositivos
@williamdovale1485
@williamdovale1485 6 месяцев назад
Qual é essa extensão que você consegue ver seu site em qualquer dispositivo móvel?
@jamilfrancisco2224
@jamilfrancisco2224 11 месяцев назад
Quando fiz tive que colocar font-family no form para puxar a popping
@RogerioGoSantos
@RogerioGoSantos 2 месяца назад
opa baum, qual o nome dessa estação da visualizção movel.
@ericleirosario
@ericleirosario 9 месяцев назад
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
@leonardo70206 6 месяцев назад
@user-eu3wk2yd9z
@user-eu3wk2yd9z 9 месяцев назад
qual a extensão para ver como celular
@bynitro8273
@bynitro8273 4 месяца назад
qual a extensão de visualização móvel??
@matheusalmeida4740
@matheusalmeida4740 10 месяцев назад
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 .
@matheuslessio2070
@matheuslessio2070 8 месяцев назад
o meu ctrl d não funciona, é as configurações do visual?
@amarildobenedinijunior6525
@amarildobenedinijunior6525 Месяц назад
mais alguem deve problema em o lugar de inserir altura nao aceitar numero "quebrado"? o meu so aceita 1 e 2
@yurifernandes7766
@yurifernandes7766 Год назад
Qual o nome dessa extensão de dispositivo móvel
@Gamerabrao001
@Gamerabrao001 Год назад
O nome da extensão é Mobile simulator - responsive testing tool
@larissakich
@larissakich Год назад
Isso aí!
@kaycke5073
@kaycke5073 5 месяцев назад
Ó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
@larissakich 4 месяца назад
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.
@david-7279
@david-7279 8 месяцев назад
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
@nilsonsilva7204 8 месяцев назад
Muda de number para text
@jhonnysoares2782
@jhonnysoares2782 8 месяцев назад
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
@jhonnysoares2782 8 месяцев назад
eu tbm estava com esse problema
@Comandofe01
@Comandofe01 7 месяцев назад
Tu é um rei
@Comandofe01
@Comandofe01 7 месяцев назад
Eu te amo lá ele
@VictorSilva-dc7bh
@VictorSilva-dc7bh 7 месяцев назад
qual o nome dessa extensão?
@ismaelmaldonado_
@ismaelmaldonado_ 9 месяцев назад
Qual o nome da extensao movel?
@user-lb2wq4zt5i
@user-lb2wq4zt5i 26 дней назад
so nao consegui deixar responsivo por mais qe faça junto nao fica, alguém conseguiu tudo?
@romildorochas
@romildorochas Год назад
no final minha calculadora mão aceita números floats (números quebrados como por exemplo '1.5') e agora?
@geansoares007
@geansoares007 8 месяцев назад
no html em input height precisa definir os incrementos usando step
@Diego-sy5dj
@Diego-sy5dj Месяц назад
Nao sei pq, mas essa cor de fundo do site é muito satisfatória. Não é muito escuro ou muito claro
@AntonioMarcos-ye3kv
@AntonioMarcos-ye3kv 4 месяца назад
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
@AntonioMarcos-ye3kv 4 месяца назад
Eu passei mais de uma hora analisando onde eu errei, e eu apenas coloquei uma virgula no lugar de um ponto kkkkk
@larissakich
@larissakich 4 месяца назад
Oii, que bom que conseguiu resolver 😁
@leandrotome2077
@leandrotome2077 Месяц назад
não estou conseguindo adicionar a figura do "peso"
@v6semanas
@v6semanas Месяц назад
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; }
@sansodaniel
@sansodaniel 3 месяца назад
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
@larissakich 3 месяца назад
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
@RodrigoOliveira-gd1zj
@RodrigoOliveira-gd1zj Год назад
Esses projetos vc tira do zero ou pega a base de algum outro ?
@larissakich
@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
@RodrigoOliveira-gd1zj Год назад
@@larissakich show de bola. Vlw pelas dicas
@Olucaslealllll
@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
@giliardconradodasilva1188 9 месяцев назад
faz o codigo assim, no meu deu certo.
@pedrovargas1021
@pedrovargas1021 Год назад
eu só tive um problema, a calculadora no meu código só aceita números inteiros, mais alguém passou por isso?
@-brenda
@-brenda Год назад
no html em input height precisa definir os incrementos usando step
@btruylio
@btruylio 10 месяцев назад
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
@btruylio 10 месяцев назад
type number permite somente digitar inteiros né?
@btruylio
@btruylio 10 месяцев назад
coloquei estes atributo junto com o type number e funcionou
@NilsonSilva-lg4wh
@NilsonSilva-lg4wh Год назад
OI, não consigo adicionar a virgula o campo imput não esta permitindo como faço?
@lio_s7526
@lio_s7526 Год назад
eu consertei isso no meu colocando essa alteração step, tenta tbm pra ver se funciona
@vicnogueira4525
@vicnogueira4525 Год назад
​@@lio_s7526 valeu
@scr4018
@scr4018 8 месяцев назад
@@lio_s7526 god, valeu!
@elvispresley1728
@elvispresley1728 Год назад
Boa tarde Qual o nome dessa extensão?
@Gamerabrao001
@Gamerabrao001 Год назад
Mobile simulator - responsive testing tool
@larissakich
@larissakich Год назад
Essa mesmo, muito obrigada!
@beatriztavares4880
@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
@larissakich Год назад
Oii, ele está no GitHub: github.com/Larissakich/bmi_calculator Espero que consiga encontrar o erro! ❤
@user-eu4ef4ev4b
@user-eu4ef4ev4b 8 месяцев назад
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
@LeticiaSantosdeAlmeida-wb4sh 8 месяцев назад
@@user-eu4ef4ev4b estou com o mesmo problema, você conseguiu?
@zakendo1710
@zakendo1710 7 месяцев назад
@@user-eu4ef4ev4b o meu tbm ficou aparecendo isso, ai eu copiei apenas o codigo em html dela e funcionou
@caalbertii
@caalbertii 6 месяцев назад
oi beatriz. você conseguiu resolver? eu tambem estou com problema no codigo
@AlexSoaresGtr
@AlexSoaresGtr Год назад
Moça, qual o nome dessa extensão pra ver a responsividade ?
@larissakich
@larissakich Год назад
Oii, é essa daqui: chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk
@AlexSoaresGtr
@AlexSoaresGtr Год назад
@@larissakich muito obrigado
@user-ct5dm1nu3e
@user-ct5dm1nu3e 6 месяцев назад
Qual nome dessa Extensão de visualização móvel ?
@larissakich
@larissakich 6 месяцев назад
Se eu não me engano é Simulador de celular - ferramenta de teste responsiva
@user-ct5dm1nu3e
@user-ct5dm1nu3e 5 месяцев назад
Obrigado
@pablocavalcantee7720
@pablocavalcantee7720 10 месяцев назад
Como é o nome da extensão que tu usa?
@jv_bsb
@jv_bsb 9 месяцев назад
eu dei uma procurada, o nome é (Mobile simulator - responsive testing tool)
@Vibesz____
@Vibesz____ Год назад
Não suma por tanto tempo assim!!! ❤
@larissakich
@larissakich Год назад
Fica um pouco complicado por conta da escola 😓, mas vou tentar gravar com mais frequência
@Vibesz____
@Vibesz____ Год назад
Nós agradecemos muito! Seu conteúdo é god de mais. Sucesso❤️
@larissakich
@larissakich Год назад
Muito muito obrigada 🥰
@pauloalexandre2154
@pauloalexandre2154 Год назад
Vc comprou algum curso pra aprender?
@larissakich
@larissakich Год назад
Oii, comprei o curso do b7web e da Alura
@pauloalexandre2154
@pauloalexandre2154 Год назад
@@larissakich obrigado!
@veronikedearmore1347
@veronikedearmore1347 Год назад
'Promosm' 😱
@quemediga
@quemediga 9 месяцев назад
meu único problema foi que simplesmente o meu vscode simplesmente não atualiza o live server conforme eu altero o código '-'
@larissakich
@larissakich 9 месяцев назад
Tenta atualizar a página na primeira vez, no meu quando trava isso resolve
@konji8902
@konji8902 7 месяцев назад
clica com botão direito no index.html la dentro do vs code e clica em abrir com live server
@alanoliveiraoliveira2928
@alanoliveiraoliveira2928 7 месяцев назад
pode ser que o autosave do VS code esteja desativado tbm. Vai em arquivo e ver se está tudo ok
@quemediga
@quemediga 6 месяцев назад
aaah era o autosave! obrigado, pessoal!
@jefersonsilvadeveloper
@jefersonsilvadeveloper Год назад
Sugestão de vídeo, não achei nada com isso em português. Sucesso pra vc! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RoXHjac0vX0.html
@larissakich
@larissakich Год назад
Muito obrigada pela sujestão, assim que der vou fazer! ☺️
@user-rj2gk2ld9f
@user-rj2gk2ld9f Год назад
Minha linda explica melhor as coisas! Teu vídeo é muito bom mas tem coisas que não dá pra entender....
Далее
АКАДЕМИК ВОРУЕТ СНЕГ?!
00:50
Просмотров 88 тыс.
6 Novas Funcionalidades do GPT-4o que Parecem Mentira
15:43
Como sair do ZERO em JAVA em 1h - com @kipperdev
1:07:56
Просмотров 243 тыс.
TELA DE LOGIN COM TEMA DARK | HTML +  CSS
38:58
Просмотров 336 тыс.
Relógio Digital DINÂMICO | HTML, CSS e JS.
14:07
Просмотров 130 тыс.
Criando uma calculadora de IMC com JavaScript
25:36
Просмотров 11 тыс.
Mi primera placa con dios
0:12
Просмотров 497 тыс.
iphone fold ? #spongebob #spongebobsquarepants
0:15
Просмотров 593 тыс.