Tutorial para Crear una Calculadora Básica con JavaScript, HTML y CSS

¿Quieres aprender a crear tu propia calculadora web desde cero? Este tutorial calculadora JavaScript está diseñado para programadores principiantes que desean dar sus primeros pasos en programación frontend. A lo largo de esta guía paso a paso, aprenderás a crear una calculadora básica usando HTML, CSS y JavaScript para principiantes. ¡Manos a la obra!

Introducción

En este tutorial, construiremos una calculadora simple que pueda realizar operaciones básicas: suma, resta, multiplicación y división. Además, te enseñaré cómo diseñar su interfaz y cómo manejar la lógica y la validación de las entradas, ideal para quienes empiezan en programación frontend.

Paso 1: Estructura del Proyecto

Antes de comenzar a escribir código, crea una carpeta para tu proyecto, por ejemplo calculadora-js. Dentro, crea tres archivos:

index.html: para la estructura HTML
styles.css: para los estilos CSS
script.js: para la lógica en JavaScript

Tu estructura de carpetas será así:

calculadora-js/
│
├── index.html
├── styles.css
└── script.js

calculadora-js/

│

├── index.html

├── styles.css

└── script.js

Paso 2: Diseñar la Interfaz con HTML

Vamos a crear un diseño sencillo y funcional para la calculadora.

Abre index.html y pega el siguiente código:

<!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="calculadora">
        <input type="text" class="pantalla" id="pantalla" disabled />
        <div class="botones">
            <button class="btn" data-valor="7">7</button>
            <button class="btn" data-valor="8">8</button>
            <button class="btn" data-valor="9">9</button>
            <button class="btn operador" data-valor="/">÷</button>

            <button class="btn" data-valor="4">4</button>
            <button class="btn" data-valor="5">5</button>
            <button class="btn" data-valor="6">6</button>
            <button class="btn operador" data-valor="*">×</button>

            <button class="btn" data-valor="1">1</button>
            <button class="btn" data-valor="2">2</button>
            <button class="btn" data-valor="3">3</button>
            <button class="btn operador" data-valor="-">−</button>

            <button class="btn" data-valor="0">0</button>
            <button class="btn" data-valor=".">.</button>
            <button class="btn" id="btn-clear">C</button>
            <button class="btn operador" data-valor="+">+</button>

            <button class="btn igual" id="btn-igual">=</button>
        </div>
    </div>

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

<!DOCTYPE html>

<head>

<title>Calculadora Básica</title>

</head>

<body>

</div>

</body>

</html>

Explicación:

La calculadora tiene una caja de texto (input) que funciona como pantalla.
Los botones están marcados con valores usando el atributo data-valor para facilitar la lectura en JS.
Hay botones numéricos, operadores y dos botones especiales: Clear (C) y Igual (=).

Paso 3: Estilos Básicos con CSS

Ahora vamos a darle estilo para que se vea agradable y sea funcional.

Abre styles.css y pega este código:

body {
    background-color: #f4f4f4;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calculadora {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    width: 320px;
}

.pantalla {
    width: 100%;
    height: 50px;
    font-size: 2rem;
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 0 10px;
    background-color: #333;
    color: white;
    text-align: right;
}

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

.btn {
    padding: 15px;
    font-size: 1.4rem;
    border: none;
    border-radius: 5px;
    background-color: #444;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

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

.operador {
    background-color: #ff9500;
}

.operador:hover {
    background-color: #ffa733;
}

#btn-clear {
    background-color: #ff3b30;
}

#btn-clear:hover {
    background-color: #ff6659;
}

.igual {
    grid-column: span 4;
    background-color: #34c759;
    font-weight: bold;
}

.igual:hover {
    background-color: #5ce787;
}

body {

background-color: #f4f4f4;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.calculadora {

background-color: #222;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 15px rgba(0,0,0,0.3);

width: 320px;

}

.pantalla {

width: 100%;

height: 50px;

font-size: 2rem;

border: none;

border-radius: 5px;

margin-bottom: 15px;

padding: 0 10px;

background-color: #333;

color: white;

text-align: right;

}

.botones {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 12px;

}

.btn {

padding: 15px;

font-size: 1.4rem;

border: none;

border-radius: 5px;

background-color: #444;

color: white;

cursor: pointer;

transition: background-color 0.2s ease;

}

.btn:hover {

background-color: #555;

}

.operador {

background-color: #ff9500;

}

.operador:hover {

background-color: #ffa733;

}

#btn-clear {

background-color: #ff3b30;

}

#btn-clear:hover {

background-color: #ff6659;

}

.igual {

grid-column: span 4;

background-color: #34c759;

font-weight: bold;

}

.igual:hover {

background-color: #5ce787;

}

Explicación:

Usamos grid para acomodar los botones en una cuadrícula 4×5.
Los botones tienen colores distintivos para operadores, igual y clear.
La pantalla está centrada y con texto alineado a la derecha, típico de calculadoras.

Paso 4: Programar la Lógica con JavaScript

En este paso implementaremos la funcionalidad de la calculadora, incluyendo manejo de eventos y validación básica.

Abre script.js y añade lo siguiente:

// Obtener referencias a elementos HTML
const pantalla = document.getElementById('pantalla');
const botones = document.querySelectorAll('.btn');
const btnClear = document.getElementById('btn-clear');
const btnIgual = document.getElementById('btn-igual');

// Variable para almacenar la expresión actual
let expresion = '';

// Función para actualizar la pantalla
function actualizarPantalla() {
    pantalla.value = expresion;
}

// Función para validar que la expresión sea válida
function esValida(exp) {
    // Evitar operadores dobles consecutivos
    const operadores = ['+', '-', '*', '/'];

    for (let i = 0; i < exp.length - 1; i++) {
        if (operadores.includes(exp[i]) && operadores.includes(exp[i+1])) {
            return false;
        }
    }

    // Evitar que la expresión comience con operador excepto '-'
    if (exp.length > 0) {
        const primerChar = exp[0];
        if (operadores.includes(primerChar) && primerChar !== '-') {
            return false;
        }
    }

    // Evitar múltiples puntos en el mismo número
    const numeros = exp.split(/[-+/*]/);
    for (const num of numeros) {
        const puntos = num.match(/\./g);
        if (puntos && puntos.length > 1) {
            return false;
        }
    }

    return true;
}

// Manejar click en botones
botones.forEach(boton => {
    boton.addEventListener('click', () => {
        const valor = boton.getAttribute('data-valor');

        if (valor) {
            const nuevaExpresion = expresion + valor;
            if (esValida(nuevaExpresion)) {
                expresion = nuevaExpresion;
                actualizarPantalla();
            } else {
                // opción: puedes indicar error o simplemente ignorar
                console.log('Entrada no válida');
            }
        }
    });
});

// Limpiar la pantalla
btnClear.addEventListener('click', () => {
    expresion = '';
    actualizarPantalla();
});

// Calcular el resultado
btnIgual.addEventListener('click', () => {
    try {
        // Utilizamos eval con precaución: aquí es seguro porque validamos la expresión
        const resultado = eval(expresion);
        // Mostrar resultado redondeando a 10 decimales
        expresion = resultado.toFixed(10).replace(/\.?(0+)$/, '');
        actualizarPantalla();
    } catch (error) {
        pantalla.value = 'Error';
        expresion = '';
    }
});

// Obtener referencias a elementos HTML

const pantalla = document.getElementById('pantalla');

const botones = document.querySelectorAll('.btn');

const btnClear = document.getElementById('btn-clear');

const btnIgual = document.getElementById('btn-igual');

// Variable para almacenar la expresión actual

let expresion = '';

// Función para actualizar la pantalla

function actualizarPantalla() {

pantalla.value = expresion;

}

// Función para validar que la expresión sea válida

function esValida(exp) {

// Evitar operadores dobles consecutivos

const operadores = ['+', '-', '*', '/'];

for (let i = 0; i < exp.length - 1; i++) {

if (operadores.includes(exp[i]) && operadores.includes(exp[i+1])) {

return false;

}

// Evitar que la expresión comience con operador excepto '-'

if (exp.length > 0) {

const primerChar = exp[0];

if (operadores.includes(primerChar) && primerChar !== '-') {

return false;

}

// Evitar múltiples puntos en el mismo número

const numeros = exp.split(/[-+/*]/);

for (const num of numeros) {

const puntos = num.match(/\./g);

if (puntos && puntos.length > 1) {

return false;

}

return true;

}

// Manejar click en botones

botones.forEach(boton => {

boton.addEventListener('click', () => {

const valor = boton.getAttribute('data-valor');

if (valor) {

const nuevaExpresion = expresion + valor;

if (esValida(nuevaExpresion)) {

expresion = nuevaExpresion;

actualizarPantalla();

} else {

// opción: puedes indicar error o simplemente ignorar

console.log('Entrada no válida');

}

});

// Limpiar la pantalla

btnClear.addEventListener('click', () => {

expresion = '';

actualizarPantalla();

});

// Calcular el resultado

btnIgual.addEventListener('click', () => {

try {

// Utilizamos eval con precaución: aquí es seguro porque validamos la expresión

const resultado = eval(expresion);

// Mostrar resultado redondeando a 10 decimales

expresion = resultado.toFixed(10).replace(/\.?(0+)$/, '');

actualizarPantalla();

} catch (error) {

pantalla.value = 'Error';

expresion = '';

}

});

Explicación paso a paso:

Selección de elementos: Obtenemos referencias a la pantalla y a todos los botones.
Variable expresion: Contendrá la expresión actual que el usuario está escribiendo.
actualizarPantalla: Muestra el contenido de la variable en la pantalla.
esValida: Función que chequea la validez de la expresión para evitar que el usuario ingrese datos que produzcan errores.

No permite dos operadores seguidos.
No permite que una expresión empiece con operador distinto de -.
Evita múltiples puntos en un mismo número.

Eventos de botones:

Cuando se pulsa un botón, se agrega su valor a la expresión sólo si la nueva expresión es válida.
Si es inválida, la entrada se ignora y se notifica por consola.

Botón Clear: Limpia la expresión y la pantalla.
Botón Igual: Usa eval para calcular la expresión si es válida.

Se maneja con try-catch para capturar errores inesperados.
Se muestra el resultado con un máximo de 10 decimales.

Paso 5: Probar la Calculadora

Ahora que tienes todo listo, abre el archivo index.html en tu navegador.

Prueba sumar, restar, multiplicar y dividir números. La calculadora sólo permitirá entradas válidas y mostrará el resultado correcto.

Buenas Prácticas y Consejos

Validación: Siempre valida las entradas para evitar resultados erróneos o errores de ejecución.
Evita eval para producción: eval se usa aquí por simplicidad y la validación previa. En proyectos reales, considera usar un parser matemático para mayor seguridad.
Modulariza tu código: A medida que avances, separa la lógica en funciones y módulos para que sea más fácil mantener y escalar.
Accesibilidad: Añade atributos ARIA para mejorar la accesibilidad de tu calculadora.
Responsividad: Ajusta los estilos CSS con media queries para que se vea bien en dispositivos móviles.

Conclusión

¡Felicidades! Has completado este tutorial para crear una calculadora básica usando JavaScript, HTML y CSS. Este proyecto es una excelente práctica para entender la estructura de proyectos frontend, diseño con HTML/CSS y programación JavaScript para principiantes.

Te invitamos a que modifiques y amplíes la calculadora agregando nuevas funcionalidades, como operaciones avanzadas, historial de cálculos o temas personalizados.

Si te gustó este tutorial, compártelo y sigue aprendiendo sobre programación frontend para dominar la creación de aplicaciones web interactivas.