EJERCICIO IMC

 HTML

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="estilos.css">

    <title>Calculadora IMC - Bachillerato</title>

</head>

<body>

    <div class="contenedor">

        <h1>Calculadora de IMC</h1>

        <input type="number" id="peso" placeholder="Peso en kg">

        <input type="number" id="altura" placeholder="Altura en cm">

        <button onclick="calcularIMC()">Calcular Resultado</button>

        <div id="resultado">Ingrese sus datos para comenzar</div>

    </div>

    <script src="script.js"></script>

</body>

</html>



CSS

body {

    background-color: #f4f7f6;

    font-family: 'Arial', sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

 

.contenedor {

    background: white;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    text-align: center;

    width: 300px;

}

 

input {

    width: 90%;

    padding: 10px;

    margin: 10px 0;

    border: 1px solid #ddd;

    border-radius: 5px;

}

 

button {

    background-color: #3498db;

    color: white;

    border: none;

    padding: 12px;

    width: 100%;

    border-radius: 5px;

    cursor: pointer;

}

 

#resultado {

    margin-top: 20px;

    padding: 15px;

    border-radius: 5px;

    font-weight: bold;

}

 

/* Clases dinámicas */

.verde { background-color: #2ecc71; color: white; }

.amarillo { background-color: #f1c40f; color: black; }

.rojo { background-color: #e74c3c; color: white; }




JS

function calcularIMC() {

    const peso = parseFloat(document.getElementById('peso').value);

    const alturaCm = parseFloat(document.getElementById('altura').value);

    const divResultado = document.getElementById('resultado');

 

    if (peso > 0 && alturaCm > 0) {

        const alturaM = alturaCm / 100;

        const imc = (peso / (alturaM * alturaM)).toFixed(1);

        let mensaje = "";

        let clase = "";

 

        if (imc < 18.5) {

            mensaje = `IMC: ${imc} - Bajo Peso`;

            clase = "amarillo";

        } else if (imc >= 18.5 && imc <= 24.9) {

            mensaje = `IMC: ${imc} - Peso Normal`;

            clase = "verde";

        } else {

            mensaje = `IMC: ${imc} - Sobrepeso`;

            clase = "rojo";

        }

 

        divResultado.innerHTML = mensaje;

        divResultado.className = clase; // Aplica la clase de CSS dinámicamente

    } else {

        divResultado.innerHTML = "Por favor, llene los campos correctamente";

        divResultado.className = "";

    }

}


Comentarios

Publicar un comentario

Entradas populares de este blog

Imagen
 CONCEPTOS BÁSICOS DE INTERNET  ¿Qué es INTERNET?  Internet es una gran red internacional de computadoras, es una red de redes. Internet nos permite, como todas las redes, compartir recursos. Es decir: mediante una computadora podemos, establecer una comunicación inmediata con cualquier parte del mundo para obtener información sobre un tema que nos interesa. De este modo se establecen vínculos comunicativos con millones de personas de todo el mundo, sea para fines académicos, de negocios, de investigación, o personales. Internet es una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. Una red de computadoras es un conjunto de máquinas, que se comunican a través de algún medio (cable coaxial, fibra óptica, radiofrecuencia, líneas telefónicas, etc.) con el objeto de compartir recursos. Concepto de WWW  El World-Wide Web (WWW) es un sistema hipermedia distribuido, accesible a través de Internet, que permite navegar con faci...
Leer más

Tablas y Frames, Flexbox y Grid

  1. Hojas de Estilo (CSS) 🎨 Una Hoja de Estilo en Cascada (CSS, del inglés Cascading Style Sheets ) es el lenguaje que describe la presentación de un documento escrito en un lenguaje de marcado, como HTML. Función y Principio Clave La función principal de CSS es separar el Contenido (estructurado en HTML) de la Presentación (el diseño, colores, fuentes, y disposición). Presentación: Define cómo se debe ver el contenido (ej., el texto principal debe ser azul, centrado y con fuente Arial ). Consistencia: Permite aplicar el mismo estilo a múltiples páginas web de un sitio, asegurando uniformidad visual con solo modificar un archivo. Eficiencia: Reduce el tamaño de los archivos HTML, haciendo que la página cargue más rápido. Tipos de Inclusión de CSS Externa: El método más recomendado. Los estilos se definen en un archivo separado ( .css ) y se vinculan al documento HTML. Interna: Los estilos se definen dentro de la sección <head> del documento HTML, utilizando la etiq...
Leer más

Navegadores (browsers)

 Un navegador web (o browser ) es el software esencial que permite a los usuarios acceder a la información disponible en la World Wide Web (WWW) . Actúa como un intérprete: solicita datos a los servidores web e interpreta el código (principalmente HTML, CSS y JavaScript) para mostrar las páginas de manera visual e interactiva en tu pantalla. Período Hitos Clave Principios de los 90 (Nacimiento) En 1990 , Tim Berners-Lee creó el primer navegador y editor, llamado WorldWideWeb (luego Nexus). En 1993 , apareció Mosaic , el primer navegador popular que mostraba imágenes y texto en la misma página, lo que impulsó el uso masivo de Internet. Mediados de los 90 (Guerra de Navegadores) En 1994 , se lanzó Netscape Navigator , que dominó el mercado inicial. En 1995 , Microsoft lanzó Internet Explorer (IE) . Siguió una intensa "Guerra de Navegadores" donde IE, al ser incluido en Windows, se convirtió en el dominante. Años 2000 (Renacimiento y Estándares) La caída de Netscape llevó a...
Leer más