COMPARTE ESTE ARTÍCULO

Las ecuaciones de segundo grado son fundamentales en matemáticas y física, y resolverlas puede ser un excelente ejercicio de programación. En este artículo, aprenderemos a crear una calculadora de ecuación cuadrática usando HTML, CSS y JavaScript.

Objetivo

Crear una interfaz en la que el usuario pueda ingresar los coeficientes de una ecuación cuadrática (ax² + bx + c = 0) y obtener las soluciones de la ecuación.

Paso 1: Estructura HTML

Comenzaremos definiendo la estructura de la calculadora en HTML. Crearemos un formulario para ingresar los valores de los coeficientes (a), (b) y (c), y un botón para calcular las soluciones.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de Ecuación de Segundo Grado</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <h2>Calculadora de Ecuación de Segundo Grado</h2>
        <label for="a">Coeficiente a:</label>
        <input type="number" id="a" required>
        <label for="b">Coeficiente b:</label>
        <input type="number" id="b" required>
        <label for="c">Coeficiente c:</label>
        <input type="number" id="c" required>
        <button onclick="calcular()">Calcular</button>
        <p id="resultado"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Estilo con CSS

Para mejorar la apariencia de nuestra calculadora, agregaremos algunos estilos en CSS.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f3f3f3;
    margin: 0;
}

.calculator {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 300px;
}

h2 {
    color: #333;
}

label {
    display: block;
    margin-top: 10px;
    color: #555;
}

input {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    border: 1px solid #ddd;
}

button {
    margin-top: 15px;
    padding: 10px 20px;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#resultado {
    margin-top: 15px;
    font-weight: bold;
    color: #333;
}

Paso 3: Lógica con JavaScript

Ahora vamos a crear el archivo JavaScript para calcular las raíces de la ecuación de segundo grado. Usaremos la fórmula general:

[
x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a}
]

A continuación, implementaremos la función calcular() que realiza esta operación y muestra el resultado.

// script.js
function calcular() {
    // Obtén los valores de los coeficientes
    const a = parseFloat(document.getElementById("a").value);
    const b = parseFloat(document.getElementById("b").value);
    const c = parseFloat(document.getElementById("c").value);

    // Calcula el discriminante
    const discriminante = b * b - 4 * a * c;
    const resultado = document.getElementById("resultado");

    if (discriminante > 0) {
        // Dos soluciones reales
        const x1 = (-b + Math.sqrt(discriminante)) / (2 * a);
        const x2 = (-b - Math.sqrt(discriminante)) / (2 * a);
        resultado.textContent = `Las soluciones son x1 = ${x1.toFixed(2)} y x2 = ${x2.toFixed(2)}`;
    } else if (discriminante === 0) {
        // Una solución real
        const x = -b / (2 * a);
        resultado.textContent = `La solución es x = ${x.toFixed(2)}`;
    } else {
        // Soluciones complejas
        const real = (-b / (2 * a)).toFixed(2);
        const imaginaria = (Math.sqrt(-discriminante) / (2 * a)).toFixed(2);
        resultado.textContent = `Las soluciones son x1 = ${real} + ${imaginaria}i y x2 = ${real} - ${imaginaria}i`;
    }
}

Explicación del Código

Obtención de valores: La función calcular() obtiene los valores de (a), (b) y (c) ingresados por el usuario.
Cálculo del discriminante: El discriminante determina el tipo de soluciones. Si es positivo, hay dos soluciones reales; si es cero, hay una solución real; si es negativo, las soluciones son complejas.
Calculo de soluciones: Dependiendo del discriminante, la función calcula las soluciones y las muestra en pantalla.

Conclusión

Hemos creado una calculadora sencilla para resolver ecuaciones de segundo grado usando HTML, CSS y JavaScript. Este proyecto nos permite practicar el uso de operaciones matemáticas y condicionales en JavaScript, además de desarrollar una interfaz intuitiva para el usuario.

Photo by Pavel Danilyuk on Pexels.com
Photo by RealToughCandy.com on Pexels.com
Photo by Andrea Piacquadio on Pexels.com

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos.