chriswarmling / calculadoraimcrn Goto Github PK

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

const APP = () => {
  const [altura, setAltura] = useState('');
  const [peso, setPeso] = useState(0);
  const [resultado, setResultado] = useState(0);
  const [mensagem, setMensagem] = useState(null);

  function Calcular() {
    const resultado = peso / (altura / 100) ** 2;
    setResultado(resultado);

    if (resultado <= 17) {
      setMensagem({ text: 'Muito abaixo do peso!!!', color: '#eb3b5a' });
    } else if (resultado > 17 && resultado <= 18.49) {
      setMensagem({ text: 'Abaixo do peso!!', color: '#fa8231' });
    } else if (resultado >= 18.5 && resultado <= 24.99) {
      setMensagem({ text: 'Peso normal.', color: '#20bf6b' });
    } else if (resultado >= 25 && resultado <= 29.99) {
      setMensagem({ text: 'Sobrepeso!', color: '#f7b731' });
    } else if (resultado >= 30 && resultado <= 34.99) {
      setMensagem({ text: 'Obesidade I!!', color: '#fa8231' });
    } else if (resultado >= 35 && resultado <= 39.99) {
      setMensagem({ text: 'Obesidade II (severa)!!!', color: '#eb3b5a' });
    } else {
      setMensagem({ text: 'Obesidade III (mórbida)!!!', color: '#d01638' });
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Calculadora IMC</Text>
      <TextInput
        style={styles.input}
        keyboardType="number-pad"
        placeholder="digite sua altura..."
        placeholderTextColor="#fff"
        onChangeText={(altura) => {
          setAltura(altura);
        }}
      />
      <TextInput
        style={styles.input}
        keyboardType="number-pad"
        placeholder="digite seu peso..."
        placeholderTextColor="#fff"
        onChangeText={(peso) => {
          setPeso(peso);
        }}
      />
      <TouchableOpacity style={styles.button} onPress={Calcular}>
        <Text style={styles.buttonText}>Calcular</Text>
      </TouchableOpacity>
      <Text style={styles.resultado}>IMC: {resultado.toFixed(2)}</Text>
      {+resultado > 0 && !!mensagem && (
        <Text
          style={[
            styles.resultado,
            { color: mensagem.color, fontWeight: 'bold' },
          ]}>
          {mensagem.text}
        </Text>
      )}
      <Text style={styles.textoInfo}>
        Soluções Mobile {'\n'}
        Engenharia de Computação - UNISATC {'\n'}
        Acadêmicos: Christian e Guilherme Vieira {'\n'}
        Professor orientador: Lucas Resendes Ferreira
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#312e38',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: '#a55eea',
    textAlign: 'center',
    fontSize: 30,
    marginBottom: 25,
  },
  input: {
    height: 50,
    width: '75%',
    padding: 5,
    paddingLeft: 10,
    fontSize: 25,
    color: 'white',
    margin: 10,
    backgroundColor: 'rgba(0,0,0,0.3)',
    textAlign: 'center',
  },
  button: {
    width: '50%',
    alignItems: 'center',
    backgroundColor: '#a55eea',
    height: 50,
    borderRadius: 15,
    justifyContent: 'center',
    marginBottom: 20,
  },
  buttonText: {
    fontSize: 25,
    color: 'white',
  },
  resultado: {
    fontSize: 25,
    color: 'white',
    marginBottom: 10,
  },
  textoInfo: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    color: 'rgba(255,255,255,0.3)',
    fontSize: 15,
    textAlign: 'right',
  },
});

export default APP;