Projeto 2: Calculadora de IMC

Curso Completo de Vue.js: Dominando do Básico ao Avançado

Sobre a Aula

Projeto 2: Calculadora de IMC

Descrição: Este projeto é uma simples calculadora de IMC que permite que os usuários calculem seu índice de massa corporal.

Requisitos:

O projeto deve permitir que os usuários insiram seu peso e altura.
O projeto deve calcular o IMC dos usuários.
O projeto deve exibir o IMC dos usuários.

Passos:

Crie um diretório para o projeto:

mkdir calculadora-imc

Instale as dependências:

npm install vue

Crie os arquivos iniciais:

touch index.html
touch main.js
touch style.css

Implemente o código:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Calculadora de IMC</title>
</head>
<body>
  <div id="app">
    <h1>Calculadora de IMC</h1>

    <p>Peso: <input type="number" v-model="peso"></p>
    <p>Altura: <input type="number" v-model="altura"></p>

    <p>IMC: {{ imc }}</p>
  </div>
</body>
</html>

JavaScript

import Vue from 'vue';

export default {
  name: 'App',
  data() {
    return {
      peso: 0,
      altura: 0,
      imc: 0,
    };
  },
  mounted() {
  },
  methods: {
    calcularIMC() {
      this.imc = this.peso / (this.altura * this.altura / 10000);
    },
  },
};

CSS

body {
  font-family: sans-serif;
}

Execute o projeto:

npm run serve

Este projeto irá exibir a seguinte tela:

Calculadora de IMC

Peso:
Altura:
IMC:

Desafios:

Adicione uma mensagem de erro se o usuário inserir um valor inválido para o peso ou a altura.
Adicione uma classe CSS para o elemento p que exibe o IMC, dependendo do valor do IMC.

Conclusão:

Este projeto é uma boa maneira de praticar os conceitos aprendidos no curso, como:

Atributos v-model para vincular os dados do componente à interface do usuário.
Métodos de componentes para executar ações.
Funções matemáticas.

Avaliação:

Para avaliar este projeto, você pode considerar os seguintes critérios:

O projeto atende aos requisitos especificados?
O código está bem escrito e organizado?
O projeto é funcional e intuitivo?

Sugestões:

Se você quiser tornar este projeto mais desafiador, você pode adicionar as seguintes funcionalidades:

Permita que os usuários selecionem a unidade de medida para o peso e a altura.
Permita que os usuários acessem um histórico de seus cálculos anteriores.
Permita que os usuários compartilhem seus cálculos com outras pessoas.

Siga-me

Entrar na conversa