Cómo crear una calculadora básica con HTML, CSS y JavaScript

La creación de una calculadora básica es un excelente proyecto para principiantes que quieren aprender a programar en web utilizando HTML, CSS y JavaScript. Este artículo te guiará paso a paso para construir tu propia calculadora desde cero.

Estructura de Archivos

Para empezar, crea una carpeta en tu computadora para tu proyecto. Dentro de esta carpeta, puedes crear tres archivos:

index.html
styles.css
script.js

Creando el Archivo HTML

El primer paso es definir la estructura básica de tu calculadora en HTML. Abre index.html y agrega el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora Básica</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="btn" onclick="clearDisplay()">C</button>
            <button class="btn" onclick="appendToDisplay('7')">7</button>
            <button class="btn" onclick="appendToDisplay('8')">8</button>
            <button class="btn" onclick="appendToDisplay('9')">9</button>
            <button class="btn" onclick="appendToDisplay('/')">/</button>
            <button class="btn" onclick="appendToDisplay('4')">4</button>
            <button class="btn" onclick="appendToDisplay('5')">5</button>
            <button class="btn" onclick="appendToDisplay('6')">6</button>
            <button class="btn" onclick="appendToDisplay('*')">*</button>
            <button class="btn" onclick="appendToDisplay('1')">1</button>
            <button class="btn" onclick="appendToDisplay('2')">2</button>
            <button class="btn" onclick="appendToDisplay('3')">3</button>
            <button class="btn" onclick="appendToDisplay('-')">-</button>
            <button class="btn" onclick="appendToDisplay('0')">0</button>
            <button class="btn" onclick="appendToDisplay('+')">+</button>
            <button class="btn" onclick="calculateResult()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explicación del Archivo HTML

El elemento <input> se usa para mostrar los resultados de la calculadora.
Los botones permiten a los usuarios interactuar con la calculadora.
Las funciones que se invocan al hacer clic en los botones están definidas en el archivo JavaScript script.js.

Estilos CSS para la Calculadora

A continuación, vamos a estilizar la calculadora. Abre styles.css y agrega el siguiente CSS:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

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

input[type="text"] {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

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

.btn {
    padding: 20px;
    font-size: 18px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

Explicación del Estilo CSS

Se utiliza Flexbox para centrar la calculadora en la página.
El contenedor .calculator tiene un fondo blanco, bordes redondeados y una sombra para darle un aspecto moderno.
Los botones tienen un diseño simple pero atractivo, con un color que cambia al pasar el mouse.

Lógica de JavaScript

Finalmente, implementaremos la lógica detrás de la calculadora. Abre script.js y agrega el siguiente código:

function appendToDisplay(value) {
    const display = document.getElementById('display');
    display.value += value;
}

function clearDisplay() {
    const display = document.getElementById('display');
    display.value = '';
}

function calculateResult() {
    const display = document.getElementById('display');
    try {
        display.value = eval(display.value);
    } catch (error) {
        display.value = 'Error';
    }
}

Explicación del Código JavaScript

appendToDisplay(value): Agrega el valor de un botón al campo de entrada.
clearDisplay(): Limpia la pantalla de la calculadora.
calculateResult(): Evalúa la expresión matemática ingresada y muestra el resultado. Utiliza eval(), lo cual es útil para este ejemplo simple. Sin embargo, en proyectos más grandes, se recomienda evitar su uso por razones de seguridad.

Probando la Calculadora

Ahora que hemos creado la calculadora, abre index.html en tu navegador y prueba la funcionalidad. Deberías poder realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.

Consejos para Mejorar la Calculadora

Validación de Entrada: Agrega validación para asegurarte de que los usuarios no ingresen caracteres no válidos.
Mejorar la Interfaz: Considera agregar transiciones y animaciones para mejorar la experiencia del usuario.
Funciones Avanzadas: Agrega funcionalidades como raíz cuadrada, exponentes o memoria.

Conclusión

Crear una calculadora básica con HTML, CSS y JavaScript es un ejercicio valioso para desarrollar tus habilidades de programación web. A lo largo de este artículo, hemos cubierto la creación de la estructura HTML, la estilización con CSS y la funcionalidad con JavaScript. Con este conocimiento, puedes expandir y mejorar tu calculadora o aplicar las habilidades adquiridas en otros proyectos.

Si te gustó este artículo, no olvides compartirlo con tus amigos y seguir aprendiendo sobre desarrollo web. ¡Buena suerte en tu camino para convertirte en un programador web!