Cómo Crear una Calculadora Básica Usando JavaScript, HTML y CSS: Tutorial para Principiantes

Crear una calculadora básica es un excelente primer proyecto para quienes están empezando en la programación web. En este tutorial, aprenderás paso a paso cómo construir una calculadora funcional usando HTML, CSS y JavaScript. La calculadora podrá realizar operaciones aritméticas simples como suma, resta, multiplicación y división.

Este tutorial está dirigido a principiantes en programación frontend y desarrollo web, por lo que explicaremos cada sección con claridad y bloque de código comentado para que puedas seguirlo fácilmente. ¡Manos a la obra!

Índice

1. Estructura HTML para la Calculadora
2. Diseño con CSS: Interfaz Limpia y Responsiva
3. Lógica en JavaScript para Operaciones Aritméticas
4. Cómo Probar tu Calculadora
Conclusión y Buenas Prácticas

1. Estructura HTML para la Calculadora

Primero definiremos la base de nuestra calculadora con HTML. Usaremos un contenedor principal que incluirá una pantalla para mostrar los números y botones para las operaciones.

<!-- archivo: index.html -->
<!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 - Tutorial JavaScript</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div class="calculator">
        <!-- Pantalla donde se mostrarán los números y resultados -->
        <input type="text" class="calculator-screen" id="screen" disabled />

        <!-- Botones -->
        <div class="calculator-keys">
            <button class="key" data-action="clear">C</button>
            <button class="key" data-action="delete">⌫</button>
            <button class="key" data-action="operator" data-value="/">÷</button>
            <button class="key" data-action="operator" data-value="*">×</button>

            <button class="key">7</button>
            <button class="key">8</button>
            <button class="key">9</button>
            <button class="key" data-action="operator" data-value="-">−</button>

            <button class="key">4</button>
            <button class="key">5</button>
            <button class="key">6</button>
            <button class="key" data-action="operator" data-value="+">+</button>

            <button class="key">1</button>
            <button class="key">2</button>
            <button class="key">3</button>
            <button class="key" data-action="equals">=</button>

            <button class="key zero">0</button>
            <button class="key">.</button>
        </div>
    </div>

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

<!DOCTYPE html>

<head>

<title>Calculadora Básica - Tutorial JavaScript</title>

</head>

<body>

</div>

</body>

</html>

Explicación

Nuestro contenedor .calculator engloba todo.
La pantalla es un input de texto deshabilitado. Solo muestra datos, no acepta que el usuario escriba.
Los botones están dentro de .calculator-keys, cada <button> tiene clases y atributos personalizados para identificar su función.
Operadores y acciones especiales usan data-action para diferenciarlos.

2. Diseño con CSS: Interfaz Limpia y Responsiva

Aplicaremos estilos para que la calculadora luzca amigable y aproveche el espacio en diferentes dispositivos.

/* archivo: styles.css */

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

/* Contenedor principal de la calculadora */
.calculator {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px;
    width: 320px;
    max-width: 90vw;
}

/* Pantalla de la calculadora */
.calculator-screen {
    width: 100%;
    height: 60px;
    font-size: 2rem;
    border: none;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 10px 15px;
    text-align: right;
    margin-bottom: 20px;
    box-sizing: border-box;
    color: #333;
}

/* Contenedor de los botones */
.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
}

/* Estilo general para botones */
.key {
    padding: 20px 0;
    font-size: 1.3rem;
    border: none;
    border-radius: 8px;
    background-color: #e2e3e7;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
    user-select: none;
}

.key:hover {
    background-color: #d1d2d7;
}

/* Operadores con color diferente para destacarlos */
.key[data-action="operator"],
.key[data-action="equals"] {
    background-color: #4caf50;
    color: white;
}

.key[data-action="operator"]:hover,
.key[data-action="equals"]:hover {
    background-color: #45a049;
}

/* Botón Cero que ocupa dos columnas */
.key.zero {
    grid-column: span 2;
}

/* Botones especiales (borrar, clear) con color rojo */
.key[data-action="clear"],
.key[data-action="delete"] {
    background-color: #f44336;
    color: white;
}

.key[data-action="clear"]:hover,
.key[data-action="delete"]:hover {
    background-color: #d32f2f;
}

/* Responsive: ajustes para pantallas pequeñas */
@media (max-width: 400px) {
    .calculator {
        width: 100%;
        padding: 15px;
    }
    .calculator-screen {
        height: 50px;
        font-size: 1.5rem;
    }
    .key {
        padding: 15px 0;
        font-size: 1.1rem;
    }
}

100

101

102

103

104

105

106

107

108

/* archivo: styles.css */

/* Estilos base para el body */

body {

background-color: #f4f7f8;

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

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

/* Contenedor principal de la calculadora */

.calculator {

background-color: #ffffff;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0,0,0,0.1);

padding: 20px;

width: 320px;

max-width: 90vw;

}

/* Pantalla de la calculadora */

.calculator-screen {

width: 100%;

height: 60px;

font-size: 2rem;

border: none;

background-color: #f0f0f0;

border-radius: 8px;

padding: 10px 15px;

text-align: right;

margin-bottom: 20px;

box-sizing: border-box;

color: #333;

}

/* Contenedor de los botones */

.calculator-keys {

display: grid;

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

grid-gap: 15px;

}

/* Estilo general para botones */

.key {

padding: 20px 0;

font-size: 1.3rem;

border: none;

border-radius: 8px;

background-color: #e2e3e7;

color: #333;

cursor: pointer;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

transition: background-color 0.2s ease;

user-select: none;

}

.key:hover {

background-color: #d1d2d7;

}

/* Operadores con color diferente para destacarlos */

.key[data-action="operator"],

.key[data-action="equals"] {

background-color: #4caf50;

color: white;

}

.key[data-action="operator"]:hover,

.key[data-action="equals"]:hover {

background-color: #45a049;

}

/* Botón Cero que ocupa dos columnas */

.key.zero {

grid-column: span 2;

}

/* Botones especiales (borrar, clear) con color rojo */

.key[data-action="clear"],

.key[data-action="delete"] {

background-color: #f44336;

color: white;

}

.key[data-action="clear"]:hover,

.key[data-action="delete"]:hover {

background-color: #d32f2f;

}

/* Responsive: ajustes para pantallas pequeñas */

@media (max-width: 400px) {

.calculator {

width: 100%;

padding: 15px;

}

.calculator-screen {

height: 50px;

font-size: 1.5rem;

}

.key {

padding: 15px 0;

font-size: 1.1rem;

}

Explicación

Usamos grid para organizar los botones fácilmente.
Los botones operadores y especiales tienen colores llamativos para diferenciarlos.
El botón “0” ocupa dos columnas para un mejor diseño.
Los estilos hacen que la interfaz sea limpia, moderna y funcional en móviles.

3. Lógica en JavaScript para Operaciones Aritméticas

Ahora implementaremos la funcionalidad de la calculadora: capturar clicks en los botones, actualizar la pantalla, y realizar las operaciones matemáticas.

// archivo: script.js

// Accedemos a la pantalla y a todos los botones de la calculadora
const screen = document.getElementById('screen');
const keys = document.querySelectorAll('.key');

// Variables para almacenar el estado actual
let currentInput = '';

// Función para actualizar la pantalla
function updateScreen() {
    screen.value = currentInput;
}

// Función para manejar los clicks
keys.forEach(button => {
    button.addEventListener('click', () => {
        const action = button.dataset.action; // identifica si es operador o acción especial
        const buttonContent = button.textContent;

        if (!action) {
            // Si no tiene data-action, es un número o punto
            // Evitar múltiples puntos 
            if (buttonContent === '.' && currentInput.includes('.')) {
                return; // no agregar otro punto
            }
            currentInput += buttonContent;
            updateScreen();
        } else {
            // Manejar acciones especiales
            switch (action) {
                case 'clear':
                    currentInput = '';
                    updateScreen();
                    break;
                case 'delete':
                    currentInput = currentInput.slice(0, -1);
                    updateScreen();
                    break;
                case 'operator':
                    // Evitar doble operador seguido
                    if (currentInput === '') return;
                    const lastChar = currentInput.slice(-1);
                    if ('+-/*'.includes(lastChar)) {
                        // Reemplazar el operador
                        currentInput = currentInput.slice(0, -1) + button.dataset.value;
                    } else {
                        currentInput += button.dataset.value;
                    }
                    updateScreen();
                    break;
                case 'equals':
                    try {
                        // Evaluar la expresión
                        const result = eval(currentInput);
                        // Mostrar resultado y actualizar estado
                        currentInput = result.toString();
                        updateScreen();
                    } catch (error) {
                        // En caso de error (ejemplo división entre 0)
                        screen.value = 'Error';
                        currentInput = '';
                    }
                    break;
            }
        }
    });
});

// archivo: script.js

// Accedemos a la pantalla y a todos los botones de la calculadora

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

const keys = document.querySelectorAll('.key');

// Variables para almacenar el estado actual

let currentInput = '';

// Función para actualizar la pantalla

function updateScreen() {

screen.value = currentInput;

}

// Función para manejar los clicks

keys.forEach(button => {

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

const action = button.dataset.action; // identifica si es operador o acción especial

const buttonContent = button.textContent;

if (!action) {

// Si no tiene data-action, es un número o punto

// Evitar múltiples puntos

if (buttonContent === '.' && currentInput.includes('.')) {

return; // no agregar otro punto

}

currentInput += buttonContent;

updateScreen();

} else {

// Manejar acciones especiales

switch (action) {

case 'clear':

currentInput = '';

updateScreen();

break;

case 'delete':

currentInput = currentInput.slice(0, -1);

updateScreen();

break;

case 'operator':

// Evitar doble operador seguido

if (currentInput === '') return;

const lastChar = currentInput.slice(-1);

if ('+-/*'.includes(lastChar)) {

// Reemplazar el operador

currentInput = currentInput.slice(0, -1) + button.dataset.value;

} else {

currentInput += button.dataset.value;

}

updateScreen();

break;

case 'equals':

try {

// Evaluar la expresión

const result = eval(currentInput);

// Mostrar resultado y actualizar estado

currentInput = result.toString();

updateScreen();

} catch (error) {

// En caso de error (ejemplo división entre 0)

screen.value = 'Error';

currentInput = '';

}

break;

}

});

Explicación Paso a Paso

Usamos eval() para evaluar la expresión matemática construida (cuidado en proyectos más avanzados por seguridad).
currentInput almacena la cadena que representa la operación ingresada.
Se controla que no se agreguen múltiples puntos decimales y que no se ingresen operadores seguidos.
Limpiamos la pantalla con el botón “C” y eliminamos el último carácter con “⌫”.
El botón “=” evalúa la operación y muestra el resultado.
Si la expresión no es válida, se muestra “Error”.

4. Cómo Probar tu Calculadora

Crear los archivos: Crea tres archivos: index.html, styles.css, y script.js con los códigos proporcionados.
Abrir en navegador: Abre index.html en cualquier navegador moderno (Chrome, Firefox, Edge, Safari).
Interactúa: Prueba sumar, restar, multiplicar, dividir y probar los botones de borrar.
Prueba móvil: Para verificar la responsividad, abre las herramientas para desarrolladores (F12) y selecciona vista móvil.

Conclusión y Buenas Prácticas

¡Felicidades! Has construido una calculadora web básica usando HTML, CSS y JavaScript desde cero.

Esta práctica es un gran paso para introducirte en la programación frontend y el desarrollo web para principiantes. Además, te permite comprender conceptos clave como manejo del DOM, eventos, y lógica básica.

Buenas prácticas a seguir:

Evita usar eval() para proyectos más complejos por razones de seguridad; considera escribir un parser matemático.
Mantén el código organizado separando estructura (HTML), estilos (CSS) y lógica (JS).
Usa comentarios para facilitar la comprensión.
Prueba tu proyecto en distintos navegadores y dispositivos.
Experimenta añadiendo nuevas funciones o mejorando la interfaz.

Si te gustó este tutorial, ¡comparte con otros que quieran iniciarse en la programación web! También puedes suscribirte para recibir más guías prácticas y fáciles de seguir.

¡Gracias por aprender con nosotros y mucho éxito en tu camino como desarrollador web! 🚀