Todos

Mini Projetos

Resolução do Mini Projeto

Calculadora de IMC com React

Login

Introdução

  • Introdução e Apresentação do Projeto
  • Iniciando o projeto com Vite e TailwindCSS
  • Estrutura e Estilização

  • A Estrutura do HTML
  • Estilizando com TailwindCSS
  • Componentizando o Label
  • Componentizando o Button e o Input
  • Usando o tailwind-merge e o clsx
  • Lógica da Calculadora no React

  • Estruturando a lógica da calculadora
  • Usando um formulário não controlado
  • Criando validações e transformando strings
  • Calculando o IMC e adicionando ao estado
  • Renderizando condicionalmente o resultado
  • Formatando os números com a Intl API
  • Limpando o formulário
  • Finalizando

  • Responsividade
  • Finalização
  • Introdução

  • Introdução e Apresentação do Projeto
  • Iniciando o projeto com Vite e TailwindCSS
  • Estrutura e Estilização

  • A Estrutura do HTML
  • Estilizando com TailwindCSS
  • Componentizando o Label
  • Componentizando o Button e o Input
  • Usando o tailwind-merge e o clsx
  • Lógica da Calculadora no React

  • Estruturando a lógica da calculadora
  • Usando um formulário não controlado
  • Criando validações e transformando strings
  • Calculando o IMC e adicionando ao estado
  • Renderizando condicionalmente o resultado
  • Formatando os números com a Intl API
  • Limpando o formulário
  • Finalizando

  • Responsividade
  • Finalização
  • A Estrutura do HTML

    Antes de mais nada vamos colocar no código a estrutura HTML da nossa calculadora. Vamos dividir a calculadora em três seções principais.

    Comentários

    (0)