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.
¿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.
NUESTRAS ÚLTIMAS PUBLICACIONES
- La importancia de mantener un ritmo de estudio durante las navidades.
- Cómo Multiplicar Matrices en Java: Guía Completa con Ejemplo Práctico
- Triunfos y logros de nuestra Academia SanRoque
- Herramientas Imprescindibles para Realizar Ingeniería Inversa en Java
- ¿A qué nivel de conversación en inglés estás dispuesto a llegar con Academia SanRoque?
- Cómo Resolver una Ecuación de Segundo Grado con GNU Octave
- Cuando vienes a la Academia SaRoque justo antes del examen final.
- 25N Día Internacional para la Eliminación de la Violencia contra la Mujer
- Cuando el profesor nos da la última oportunidad.
ELIGE TU RED FAVORITA Y SÍGUENOS.
AYUDANOS A CRECER Y A LLEGAR A TODAS LAS PERSONAS QUE NOS NECESITAN.
Contenido restringido
Comments are closed