Cómo Crear una Calculadora con HTML, CSS y JavaScript (Guía Paso a Paso)

En este tutorial completo, te guiaremos paso a paso en la creación de una calculadora funcional utilizando HTML para la estructura, CSS para el estilo y JavaScript para la lógica. No se requiere experiencia previa en programación, ¡así que prepárate para aprender y divertirte!

¿Por qué construir tu propia calculadora?

Crear una calculadora es un excelente proyecto para principiantes porque combina varios conceptos fundamentales de desarrollo web, como:

• HTML: Estructurar la interfaz de usuario (botones, pantalla).
• CSS: Darle estilo y presentación a la calculadora.
• JavaScript: Implementar la lógica de las operaciones matemáticas.

Además, es una manera práctica de entender cómo interactúan estos tres lenguajes para crear una aplicación web funcional.

Requisitos Previos

Antes de comenzar, asegúrate de tener lo siguiente:

• Un editor de texto (como VS Code, Sublime Text, Atom, Notepad++, etc.).
• Un navegador web (Chrome, Firefox, Safari, etc.).
• Conocimientos básicos de HTML, CSS y JavaScript (aunque te guiaremos paso a paso).

Paso 1: Estructura HTML (La Base de la Calculadora)

Comenzaremos creando el archivo `index.html` que contendrá la estructura básica de nuestra calculadora.

html

Analicemos el código HTML:

• ``: Define el tipo de documento como HTML5.
• ``: Define la etiqueta raíz del documento HTML y especifica el idioma como español.
• ``: Contiene metadatos sobre el documento, como el título, la codificación de caracteres y la vinculación a la hoja de estilo CSS.
• ``: Define la codificación de caracteres como UTF-8, que admite una amplia gama de caracteres.
• ``: Configura la ventana gráfica para que se ajuste al ancho del dispositivo y establece la escala inicial en 1.0, lo que garantiza una visualización adecuada en diferentes dispositivos.
• ``: Establece el título de la página que se mostrará en la pestaña del navegador.
• ``: Vincula la hoja de estilo CSS (`style.css`) para aplicar estilos a la calculadora.
• ``: Contiene el contenido visible de la página.
• `
  `: Un contenedor principal para toda la calculadora.
• ``: El campo de texto que mostrará los números y resultados. El atributo `readonly` impide que el usuario escriba directamente en el campo.
• `
  `: Un contenedor para todos los botones de la calculadora.
• ``: Cada botón de la calculadora. Hemos agregado clases `operator` a los botones de operadores y `equal` al botón de igual para poder aplicarles estilos específicos.
• ``: Vincula el archivo JavaScript (`script.js`) que contendrá la lógica de la calculadora.

Paso 2: Estilo CSS (Haciendo que se vea bien)

Ahora crearemos el archivo `style.css` para darle un aspecto atractivo a nuestra calculadora.

css
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}

.calculator {
width: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}

#display {
width: 100%;
height: 60px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

button {
padding: 15px;
font-size: 20px;
border: none;
border-radius: 5px;
background-color: #eee;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #ddd;
}

.operator {
background-color: #f0ad4e;
color: white;
}

.operator:hover {
background-color: #eea236;
}

.equal {
background-color: #5cb85c;
color: white;
grid-column: span 2;
}

.equal:hover {
background-color: #4cae4c;
}

Analicemos el código CSS:

• `body` styles: Establece la fuente, centra la calculadora en la pantalla y define el color de fondo.
• `.calculator` styles: Define el ancho, el color de fondo, el borde redondeado y la sombra de la calculadora.
• `#display` styles: Estiliza el campo de texto de la pantalla, incluyendo el ancho, la altura, el tamaño de la fuente, la alineación del texto y el margen inferior.
• `.buttons` styles: Utiliza `grid` para organizar los botones en una cuadrícula de 4 columnas.
• `button` styles: Estiliza los botones, incluyendo el relleno, el tamaño de la fuente, el borde, el radio del borde, el color de fondo y el cursor. También agrega una transición suave para el cambio de color al pasar el mouse por encima.
• `.operator` styles: Estiliza los botones de operadores con un color de fondo naranja.
• `.equal` styles: Estiliza el botón de igual con un color de fondo verde y lo extiende a través de dos columnas en la cuadrícula.

Paso 3: Lógica JavaScript (Haciéndola funcional)

Ahora crearemos el archivo `script.js` para agregar la lógica de la calculadora.

javascript
const display = document.getElementById(‘display’);
const buttons = document.querySelectorAll(‘.buttons button’);

let currentInput = ”;

buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const buttonText = button.textContent;

if (buttonText === ‘AC’) {
currentInput = ”;
display.value = ”;
} else if (buttonText === ‘DEL’) {
currentInput = currentInput.slice(0, -1);
display.value = currentInput;
} else if (buttonText === ‘=’) {
try {
currentInput = eval(currentInput);
display.value = currentInput;
} catch (error) {
display.value = ‘Error’;
currentInput = ”;
}
} else {
currentInput += buttonText;
display.value = currentInput;
}
});
});

Analicemos el código JavaScript:

• `const display = document.getElementById(‘display’);`:** Obtiene el elemento de entrada de texto (la pantalla) usando su ID.
• `const buttons = document.querySelectorAll(‘.buttons button’);`:** Obtiene todos los botones dentro del contenedor `.buttons`.
• `let currentInput = ”;`:** Inicializa una variable para almacenar la entrada actual del usuario.
• `buttons.forEach(button => { … });`:** Itera sobre cada botón.
• `button.addEventListener(‘click’, () => { … });`:** Agrega un detector de eventos de clic a cada botón.
• `const buttonText = button.textContent;`:** Obtiene el texto del botón que se hizo clic.
• `if (buttonText === ‘AC’) { … }`:** Si el botón es ‘AC’ (Borrar todo), borra la entrada actual y la pantalla.
• `else if (buttonText === ‘DEL’) { … }`:** Si el botón es ‘DEL’ (Borrar), borra el último carácter de la entrada actual y actualiza la pantalla.
• `else if (buttonText === ‘=’) { … }`:** Si el botón es ‘=’, evalúa la expresión en la entrada actual usando `eval()`. Maneja errores (por ejemplo, división por cero) mostrando ‘Error’ en la pantalla.
• `else { … }`:** Si el botón es un número o un operador, agrega el texto del botón a la entrada actual y actualiza la pantalla.

Explicación Detallada del Código JavaScript

Vamos a profundizar en el código JavaScript para entender cada parte con mayor detalle:

Obtención de Elementos del DOM

javascript
const display = document.getElementById(‘display’);
const buttons = document.querySelectorAll(‘.buttons button’);

Estas líneas obtienen referencias a los elementos HTML que necesitamos para interactuar. `document.getElementById(‘display’)` busca el elemento con el ID `display` (nuestro campo de entrada) y lo asigna a la variable `display`. `document.querySelectorAll(‘.buttons button’)` busca todos los elementos `` que están dentro de un elemento con la clase `buttons` y los asigna a la variable `buttons` como un NodeList.

Variable de Entrada Actual

javascript
let currentInput = ”;

Esta variable almacena la expresión que el usuario está construyendo. Inicialmente está vacía y se va actualizando a medida que el usuario presiona los botones.

Iteración sobre los Botones

javascript
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
// Código para manejar el clic del botón
});
});

Este bucle `forEach` itera sobre cada botón en la NodeList `buttons`. Para cada botón, agrega un detector de eventos `click` que se ejecutará cuando el usuario haga clic en ese botón.

Manejo del Clic del Botón

javascript
const buttonText = button.textContent;

if (buttonText === ‘AC’) {
currentInput = ”;
display.value = ”;
} else if (buttonText === ‘DEL’) {
currentInput = currentInput.slice(0, -1);
display.value = currentInput;
} else if (buttonText === ‘=’) {
try {
currentInput = eval(currentInput);
display.value = currentInput;
} catch (error) {
display.value = ‘Error’;
currentInput = ”;
}
} else {
currentInput += buttonText;
display.value = currentInput;
}

Dentro del detector de eventos `click`, se obtiene el texto del botón (`buttonText`). Luego, se utiliza una serie de sentencias `if` para determinar qué acción realizar en función del texto del botón:

• `buttonText === ‘AC’`: Si el botón es ‘AC’, se borra la entrada actual (`currentInput = ”`) y se actualiza la pantalla (`display.value = ”`).
• `buttonText === ‘DEL’`: Si el botón es ‘DEL’, se elimina el último carácter de la entrada actual usando `currentInput.slice(0, -1)` y se actualiza la pantalla.
• `buttonText === ‘=’`: Si el botón es ‘=’, se intenta evaluar la expresión en la entrada actual usando la función `eval()`.
  • `try…catch`:** Se utiliza un bloque `try…catch` para manejar posibles errores que puedan ocurrir durante la evaluación, como la división por cero o sintaxis inválida. Si ocurre un error, se muestra ‘Error’ en la pantalla y se borra la entrada actual.
  • `eval(currentInput)`: Evalúa la expresión en la entrada actual. **Advertencia:** `eval()` puede ser peligroso si se utiliza con entradas no confiables, ya que puede ejecutar código arbitrario. En este caso, estamos controlando la entrada a través de los botones de la calculadora, lo que reduce el riesgo, pero en aplicaciones más complejas, es importante considerar alternativas más seguras como el uso de una biblioteca de análisis sintáctico y evaluación de expresiones.
• `else`:** Si el botón no es ‘AC’, ‘DEL’ o ‘=’, se asume que es un número o un operador. En este caso, se agrega el texto del botón a la entrada actual (`currentInput += buttonText`) y se actualiza la pantalla.

Consideraciones de Seguridad con `eval()`

Como se mencionó anteriormente, el uso de la función `eval()` puede ser riesgoso en algunos contextos. `eval()` ejecuta cualquier código JavaScript que se le pase como una cadena. Si la cadena proviene de una fuente no confiable (por ejemplo, entrada del usuario directamente desde un formulario web), un atacante podría inyectar código malicioso.

En nuestra calculadora, el riesgo se reduce porque solo permitimos que el usuario ingrese números y operadores a través de los botones. Sin embargo, para aplicaciones más complejas donde la entrada del usuario podría ser más variada, se recomienda evitar `eval()` y utilizar alternativas más seguras, como:

• `Function()` constructor:** Similar a `eval()`, pero un poco más seguro porque se ejecuta en un ámbito más limitado.
• Bibliotecas de análisis sintáctico y evaluación de expresiones:** Estas bibliotecas analizan la expresión en una estructura de datos abstracta y luego evalúan la estructura de datos. Esto permite un control mucho más preciso sobre lo que se está evaluando y evita la ejecución de código arbitrario. Ejemplos de estas bibliotecas incluyen `math.js` y `nerdamer`.

Mejoras Adicionales

Aquí hay algunas ideas para mejorar aún más tu calculadora:

• Agregar más funciones:** Implementa funciones como seno, coseno, tangente, logaritmo, raíz cuadrada, etc.
• Historial de cálculos:** Muestra un historial de los cálculos anteriores.
• Soporte para teclado:** Permite al usuario ingresar números y operadores usando el teclado.
• Diseño responsivo:** Asegúrate de que la calculadora se vea bien en diferentes tamaños de pantalla.
• Validación de entrada:** Agrega validación para evitar que el usuario ingrese expresiones inválidas (por ejemplo, dos operadores seguidos).
• Temas:** Permite al usuario cambiar entre diferentes temas de color.

Conclusión

¡Felicidades! Has creado tu propia calculadora con HTML, CSS y JavaScript. Este proyecto te ha introducido a conceptos importantes de desarrollo web y te ha dado una base sólida para construir aplicaciones web más complejas. Recuerda siempre practicar y experimentar para seguir aprendiendo y mejorando tus habilidades.

No dudes en compartir tu calculadora con amigos y familiares, ¡y sigue explorando el mundo del desarrollo web!