Tutorial paso a paso para crear una calculadora básica con JavaScript y HTML

¡Bienvenido a este tutorial calculadora JavaScript! Si estás comenzando en el mundo del desarrollo web y quieres aprender cómo crear una calculadora funcional, sencilla y didáctica, este artículo es para ti. Aquí te enseñaremos cómo crear una calculadora básica HTML con un toque de CSS para que se vea agradable y cómo programar calculadora web usando JavaScript.

Este proyecto JavaScript para principiantes cubrirá desde la estructura básica hasta la lógica que permite realizar las operaciones aritméticas básicas: suma, resta, multiplicación y división.

1. Estructura HTML para la calculadora

Vamos a empezar creando la estructura básica de nuestra calculadora usando HTML. Esta estructura incluye el área donde mostramos los resultados y los botones para los números y las operaciones.

<!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 JavaScript</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="0" disabled />
        <div class="calculator-keys">
            <!-- Botones de números -->
            <button type="button" class="number" value="7">7</button>
            <button type="button" class="number" value="8">8</button>
            <button type="button" class="number" value="9">9</button>
            <button type="button" class="operator" value="/">÷</button>

            <button type="button" class="number" value="4">4</button>
            <button type="button" class="number" value="5">5</button>
            <button type="button" class="number" value="6">6</button>
            <button type="button" class="operator" value="*">×</button>

            <button type="button" class="number" value="1">1</button>
            <button type="button" class="number" value="2">2</button>
            <button type="button" class="number" value="3">3</button>
            <button type="button" class="operator" value="-">−</button>

            <button type="button" class="number" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">C</button>
            <button type="button" class="operator" value="+">+</button>

            <button type="button" class="equal-sign" value="=">=</button>
        </div>
    </div>

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

<!DOCTYPE html>

<head>

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

</head>

<body>

</div>

</body>

</html>

Explicación

Usamos un <input> de texto (disabled) para mostrar los resultados, evitando que el usuario escriba directamente.
Los botones se agrupan dentro de un contenedor para facilitar el diseño con CSS.
Cada botón tiene una clase y un valor que utilizaremos luego para la lógica en JavaScript.

2. Diseño sencillo con CSS

Para que nuestra calculadora no sea solo funcional sino también agradable a la vista, agregaremos un CSS básico. Creamos un archivo llamado styles.css.

/* Estilo general del cuerpo */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calculator {
    border: 1px solid #999;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    width: 320px;
}

.calculator-screen {
    width: 100%;
    height: 60px;
    border: none;
    background-color: #252525;
    color: white;
    font-size: 2rem;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 10px;
    padding-right: 10px;
}

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

button {
    height: 60px;
    font-size: 1.5rem;
    border-radius: 5px;
    border: none;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button.operator {
    background-color: #ff9500;
    color: white;
}

button.equal-sign {
    background-color: #34c759;
    color: white;
    grid-column: span 4;
}

button.all-clear {
    background-color: #ff3b30;
    color: white;
}

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

button.operator:hover, .equal-sign:hover, .all-clear:hover {
    opacity: 0.9;
}

/* Estilo general del cuerpo */

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

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

}

.calculator {

border: 1px solid #999;

border-radius: 10px;

padding: 20px;

background-color: #fff;

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

width: 320px;

}

.calculator-screen {

width: 100%;

height: 60px;

border: none;

background-color: #252525;

color: white;

font-size: 2rem;

text-align: right;

border-radius: 5px;

margin-bottom: 10px;

padding-right: 10px;

}

.calculator-keys {

display: grid;

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

gap: 10px;

}

button {

height: 60px;

font-size: 1.5rem;

border-radius: 5px;

border: none;

background-color: #e0e0e0;

cursor: pointer;

transition: background-color 0.2s ease;

}

button.operator {

background-color: #ff9500;

color: white;

}

button.equal-sign {

background-color: #34c759;

color: white;

grid-column: span 4;

}

button.all-clear {

background-color: #ff3b30;

color: white;

}

button:hover {

background-color: #cacaca;

}

button.operator:hover, .equal-sign:hover, .all-clear:hover {

opacity: 0.9;

}

Explicación

Usamos grid para organizar mejor los botones.
Colores diferenciados para operadores y botones especiales.
Efectos hover simples para mejorar la experiencia.

3. Lógica en JavaScript para realizar operaciones básicas

Ahora que tenemos la interfaz definida, es el momento de darle vida con JavaScript. Crea un archivo llamado script.js y agrega el siguiente código.

// Seleccionamos elementos importantes
const calculatorScreen = document.querySelector('.calculator-screen');
const keys = document.querySelector('.calculator-keys');

// Estado interno de la calculadora
let firstOperand = null;
let operator = null;
let waitForSecondOperand = false;

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

// Función para manejar la entrada de números
function inputDigit(digit) {
    if (waitForSecondOperand) {
        updateScreen(digit);
        waitForSecondOperand = false;
    } else {
        const currentValue = calculatorScreen.value;
        updateScreen(currentValue === '0' ? digit : currentValue + digit);
    }
}

// Función para manejar el punto decimal
function inputDecimal(dot) {
    if (waitForSecondOperand) {
        updateScreen('0.');
        waitForSecondOperand = false;
        return;
    }
    if (!calculatorScreen.value.includes(dot)) {
        updateScreen(calculatorScreen.value + dot);
    }
}

// Función para manejar las operaciones
function handleOperator(nextOperator) {
    const inputValue = parseFloat(calculatorScreen.value);

    if (operator && waitForSecondOperand) {
        operator = nextOperator;
        return;
    }

    if (firstOperand === null) {
        firstOperand = inputValue;
    } else if (operator) {
        const result = calculate(firstOperand, inputValue, operator);
        updateScreen(String(result));
        firstOperand = result;
    }

    operator = nextOperator;
    waitForSecondOperand = true;
}

// Función para calcular resultado
function calculate(first, second, operator) {
    switch (operator) {
        case '+':
            return first + second;
        case '-':
            return first - second;
        case '*':
            return first * second;
        case '/':
            // Validar división entre cero
            if (second === 0) {
                alert('Error: División entre cero no permitida');
                return first;
            }
            return first / second;
        default:
            return second;
    }
}

// Función para reiniciar calculadora
function resetCalculator() {
    updateScreen('0');
    firstOperand = null;
    operator = null;
    waitForSecondOperand = false;
}

// Evento para detectar clicks en botones
keys.addEventListener('click', event => {
    const { target } = event;
    if (!target.matches('button')) {
        return;
    }

    if (target.classList.contains('operator')) {
        handleOperator(target.value);
        return;
    }

    if (target.classList.contains('decimal')) {
        inputDecimal(target.value);
        return;
    }

    if (target.classList.contains('all-clear')) {
        resetCalculator();
        return;
    }

    if (target.classList.contains('equal-sign')) {
        if (operator && !waitForSecondOperand) {
            handleOperator(operator);
            operator = null;
        }
        return;
    }

    inputDigit(target.value);
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

// Seleccionamos elementos importantes

const calculatorScreen = document.querySelector('.calculator-screen');

const keys = document.querySelector('.calculator-keys');

// Estado interno de la calculadora

let firstOperand = null;

let operator = null;

let waitForSecondOperand = false;

// Función para actualizar la pantalla

function updateScreen(value) {

calculatorScreen.value = value;

}

// Función para manejar la entrada de números

function inputDigit(digit) {

if (waitForSecondOperand) {

updateScreen(digit);

waitForSecondOperand = false;

} else {

const currentValue = calculatorScreen.value;

updateScreen(currentValue === '0' ? digit : currentValue + digit);

}

// Función para manejar el punto decimal

function inputDecimal(dot) {

if (waitForSecondOperand) {

updateScreen('0.');

waitForSecondOperand = false;

return;

}

if (!calculatorScreen.value.includes(dot)) {

updateScreen(calculatorScreen.value + dot);

}

// Función para manejar las operaciones

function handleOperator(nextOperator) {

const inputValue = parseFloat(calculatorScreen.value);

if (operator && waitForSecondOperand) {

operator = nextOperator;

return;

}

if (firstOperand === null) {

firstOperand = inputValue;

} else if (operator) {

const result = calculate(firstOperand, inputValue, operator);

updateScreen(String(result));

firstOperand = result;

}

operator = nextOperator;

waitForSecondOperand = true;

}

// Función para calcular resultado

function calculate(first, second, operator) {

switch (operator) {

case '+':

return first + second;

case '-':

return first - second;

case '*':

return first * second;

case '/':

// Validar división entre cero

if (second === 0) {

alert('Error: División entre cero no permitida');

return first;

}

return first / second;

default:

return second;

}

// Función para reiniciar calculadora

function resetCalculator() {

updateScreen('0');

firstOperand = null;

operator = null;

waitForSecondOperand = false;

}

// Evento para detectar clicks en botones

keys.addEventListener('click', event => {

const { target } = event;

if (!target.matches('button')) {

return;

}

if (target.classList.contains('operator')) {

handleOperator(target.value);

return;

}

if (target.classList.contains('decimal')) {

inputDecimal(target.value);

return;

}

if (target.classList.contains('all-clear')) {

resetCalculator();

return;

}

if (target.classList.contains('equal-sign')) {

if (operator && !waitForSecondOperand) {

handleOperator(operator);

operator = null;

}

return;

}

inputDigit(target.value);

});

Explicación paso a paso

Estado de la calculadora: Usamos variables para guardar el primer número, el operador actual y si estamos esperando el segundo número.
Actualizar pantalla: Manejamos la actualización del input para mostrar resultados o números introducidos.
Entrada de dígitos y decimales: Concatenamos correctamente y prevenimos números con múltiples puntos.
Operadores: Cuando el usuario elige un operador, guardamos estado para posteriormente hacer la operación o cambiar el operador si quiere.
Cálculo: Realizamos la operación correspondiente, con validación para división por cero.
Reset: Permite limpiar y volver a estado inicial.
Eventos: Detectamos el botón presionado y dirigimos la acción apropiada.

4. Consejos para mejorar tu calculadora

Validar entradas: El ejemplo actual evita errores comunes; sigue validando para que la calculadora no acepte operaciones extrañas.
Soporte para teclas físicas: Puedes añadir un listener para eventos de teclado y mapear las teclas a botones.
Memoria de operaciones: Para un nivel más avanzado, permite encadenar operaciones y mostrar un historial.
Mejorar el diseño: Integrar frameworks CSS o mejor responsive design para móviles.
Internacionalización: Adaptar símbolos y formatos numéricos para diferentes regiones.

5. Conclusión

Has aprendido cómo crear una calculadora básica HTML paso a paso, desde la estructura hasta la lógica fundamental en JavaScript. Este proyecto JavaScript para principiantes es ideal para entender conceptos clave como manejo de eventos, actualización de interfaces y validación de entrada.

Te animo a continuar experimentando: ¿qué tal si añades más funciones como porcentaje, raíz cuadrada o historial? ¡El límite está en tu creatividad!

Si te ha gustado este tutorial, no olvides practicar y compartir tus avances. La mejor manera de aprender a programar es construir proyectos como este poco a poco y con constancia.

¡Manos a la obra, futuro desarrollador! 🚀

¿Quieres más tutoriales y proyectos para principiantes? Suscríbete a nuestro blog y mantente actualizado con contenidos que te ayudarán a convertirte en un experto del desarrollo web.