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

¿Te gustaría aprender a crear una calculadora funcional utilizando solo tecnologías web? En este artículo te mostraré cómo hacerlo con HTML, CSS y JavaScript, para que puedas incorporar esta funcionalidad en tus proyectos personales o profesionales. Además, podrás mejorar tus habilidades de desarrollo web al trabajar con un proyecto sencillo pero muy útil.

Introducción

Crear una calculadora en HTML, CSS y JavaScript es un excelente ejercicio para mejorar tus habilidades de programación. A través de este proyecto, pondrás en práctica conceptos básicos de desarrollo web como la estructuración de contenido con HTML, el uso de CSS para dar estilo a los elementos, y la lógica de JavaScript para manejar las operaciones matemáticas y la interactividad del usuario.

Este proyecto es ideal para principiantes, pero también es interesante para desarrolladores intermedios que quieran optimizar la funcionalidad o ampliar la calculadora con características avanzadas.

Paso 1: Crear la estructura básica con HTML

El primer paso es estructurar los elementos de la calculadora utilizando HTML. Aquí diseñaremos la interfaz de la calculadora, incluyendo botones para los números, operadores y una pantalla para mostrar los resultados.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculadora">
        <div class="pantalla" id="pantalla">0</div>
        <div class="botones">
            <button class="btn" onclick="limpiar()">C</button>
            <button class="btn" onclick="borrar()">←</button>
            <button class="btn" onclick="operar('/')">/</button>
            <button class="btn" onclick="operar('*')">*</button>

            <button class="btn" onclick="ingresar('7')">7</button>
            <button class="btn" onclick="ingresar('8')">8</button>
            <button class="btn" onclick="ingresar('9')">9</button>
            <button class="btn" onclick="operar('-')">-</button>

            <button class="btn" onclick="ingresar('4')">4</button>
            <button class="btn" onclick="ingresar('5')">5</button>
            <button class="btn" onclick="ingresar('6')">6</button>
            <button class="btn" onclick="operar('+')">+</button>

            <button class="btn" onclick="ingresar('1')">1</button>
            <button class="btn" onclick="ingresar('2')">2</button>
            <button class="btn" onclick="ingresar('3')">3</button>
            <button class="btn igual" onclick="calcular()">=</button>

            <button class="btn cero" onclick="ingresar('0')">0</button>
            <button class="btn" onclick="ingresar('.')">.</button>
        </div>
    </div>

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

En este código, creamos una estructura sencilla con un div para la pantalla y botones que representan los números y operadores. Utilizamos la etiqueta button para los botones y asignamos un atributo onclick para que interactúen con las funciones de JavaScript.

Paso 2: Dar estilo con CSS

El siguiente paso es hacer que nuestra calculadora sea visualmente atractiva con CSS. Aquí se definen estilos básicos como la disposición de los botones, el tamaño de la pantalla, y el uso de colores y tipografías.

Código CSS

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

.calculadora {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.pantalla {
    background-color: #222;
    color: #fff;
    font-size: 2rem;
    padding: 10px;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 10px;
}

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

.btn {
    background-color: #555;
    color: white;
    border: none;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #777;
}

.igual {
    background-color: #28a745;
    grid-column: span 2;
}

.cero {
    grid-column: span 2;
}

Aquí, hemos creado un diseño limpio y moderno utilizando CSS. Los botones están dispuestos en una cuadrícula utilizando CSS Grid, lo que facilita su organización. La pantalla de la calculadora tiene un fondo oscuro y el texto es blanco para mayor legibilidad.

Paso 3: Agregar la funcionalidad con JavaScript

El último paso es hacer que la calculadora funcione realmente. Utilizaremos JavaScript para manejar los eventos de clic y realizar las operaciones matemáticas. Esto incluye almacenar los números y operadores que el usuario selecciona, así como mostrar el resultado.

Código JavaScript

let operacion = "";
let resultado = false;

function ingresar(valor) {
    if (resultado) {
        operacion = valor;
        resultado = false;
    } else {
        operacion += valor;
    }
    document.getElementById("pantalla").innerText = operacion;
}

function operar(operador) {
    operacion += operador;
    document.getElementById("pantalla").innerText = operacion;
}

function limpiar() {
    operacion = "";
    document.getElementById("pantalla").innerText = "0";
}

function borrar() {
    operacion = operacion.slice(0, -1);
    document.getElementById("pantalla").innerText = operacion || "0";
}

function calcular() {
    try {
        operacion = eval(operacion);
        document.getElementById("pantalla").innerText = operacion;
        resultado = true;
    } catch (e) {
        document.getElementById("pantalla").innerText = "Error";
    }
}

En este script, utilizamos JavaScript para realizar las siguientes funciones:

ingresar(): Agrega el número o punto decimal a la operación actual.
operar(): Agrega el operador matemático seleccionado.
limpiar(): Resetea la operación y la pantalla.
borrar(): Borra el último carácter de la operación.
calcular(): Evalúa la operación completa usando la función eval() y muestra el resultado en la pantalla.

Conclusión

Crear una calculadora con HTML, CSS y JavaScript es un ejercicio práctico que te permite consolidar los conceptos fundamentales del desarrollo web. Este proyecto es sencillo pero desafiante, ya que implica estructurar la interfaz, estilizarla y dotarla de funcionalidad. Al completar este proyecto, habrás mejorado en la creación de interfaces interactivas y aprendido a manejar la lógica básica de JavaScript.

Si deseas profundizar aún más, puedes añadir funciones adicionales como la memoria de la calculadora, operaciones con porcentaje o mejorar el diseño responsivo para dispositivos móviles.