Proyecto: Teclado e historial

Nuestra calculadora ya funciona con clicks. En esta última clase vamos a darle dos mejoras que marcan la diferencia entre un proyecto básico y uno bien acabado:

Soporte de teclado: poder usar la calculadora sin tocar el ratón
Panel de historial: ver las operaciones anteriores y reutilizar resultados

Soporte de teclado

Los usuarios que usan mucho el teclado (es decir, todo el mundo) esperan poder escribir números y operaciones directamente. Vamos a escuchar el evento keydown en el document:

document.addEventListener('keydown', (evento) => {
  const tecla = evento.key

  // Números y punto decimal
  if ('0123456789.'.includes(tecla)) {
    evento.preventDefault()
    agregarNumero(tecla)
  }

  // Operadores
  else if (tecla === '+') {
    evento.preventDefault()
    seleccionarOperador('+')
  }
  else if (tecla === '-') {
    evento.preventDefault()
    seleccionarOperador('-')
  }
  else if (tecla === '*') {
    evento.preventDefault()
    seleccionarOperador('×')
  }
  else if (tecla === '/') {
    evento.preventDefault()
    seleccionarOperador('÷')
  }

  // Igual (Enter o =)
  else if (tecla === 'Enter' || tecla === '=') {
    evento.preventDefault()
    calcular()
  }

  // Limpiar (Escape)
  else if (tecla === 'Escape') {
    limpiar()
  }

  // Borrar (Backspace)
  else if (tecla === 'Backspace') {
    evento.preventDefault()
    if (numeroActual.length > 1) {
      numeroActual = numeroActual.slice(0, -1)
    } else {
      numeroActual = '0'
    }
    actualizarDisplay()
  }
})

Puntos importantes:

evento.key devuelve el carácter de la tecla pulsada: "5", "+", "Enter", etc.
evento.preventDefault() evita el comportamiento por defecto del navegador (por ejemplo, que / abra la búsqueda)
Reutilizamos las mismas funciones agregarNumero, seleccionarOperador y calcular que ya teníamos. No duplicamos lógica
Fíjate en que el teclado usa * y /, pero nuestra calculadora usa × y ÷. Hacemos la conversión aquí

Prueba: abre la calculadora y escribe 5+3 seguido de Enter. Debería funcionar igual que con los botones.

Añadir el panel de historial al HTML

Necesitamos ampliar el HTML para incluir el historial. Envuelve la calculadora en un contenedor y añade el panel:

<div class="calculadora-container">
  <div class="calculadora">
    <!-- ... lo que ya teníamos ... -->
  </div>

  <div class="historial">
    <h3>Historial</h3>
    <div id="lista-historial"></div>
    <button id="limpiar-historial">Limpiar Historial</button>
  </div>
</div>

Y estos estilos adicionales en calculadora.css:

.calculadora-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.historial {
  background: white;
  border-radius: 15px;
  padding: 20px;
  width: 250px;
  max-height: 400px;
  overflow-y: auto;
}

.historial h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}

.operacion-historial {
  padding: 8px;
  margin: 5px 0;
  background: #f8f9fa;
  border-radius: 5px;
  font-family: monospace;
  cursor: pointer;
  transition: background 0.2s;
}

.operacion-historial:hover {
  background: #e9ecef;
}

#limpiar-historial {
  width: 100%;
  padding: 10px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

Implementar el historial con createElement

Necesitamos una variable para almacenar las operaciones y una referencia al contenedor:

const listaHistorial = document.getElementById('lista-historial')
let historial = []

Cada vez que se completa una operación, la añadimos al historial. Creamos elementos del DOM dinámicamente con createElement:

function agregarAlHistorial(operacion) {
  historial.unshift(operacion) // Añadir al principio

  // Limitar a las últimas 10 operaciones
  if (historial.length > 10) {
    historial = historial.slice(0, 10)
  }

  renderizarHistorial()
}

function renderizarHistorial() {
  // Limpiar el contenedor
  listaHistorial.innerHTML = ''

  historial.forEach(operacion => {
    const div = document.createElement('div')
    div.className = 'operacion-historial'
    div.textContent = operacion

    // Al hacer click, usar el resultado de esa operación
    div.addEventListener('click', () => {
      const resultado = operacion.split(' = ')[1]
      if (resultado) {
        numeroActual = resultado
        numeroAnterior = ''
        operador = null
        debeReset = true
        actualizarDisplay()
      }
    })

    listaHistorial.appendChild(div)
  })
}

Repasemos lo que hace renderizarHistorial:

Limpia el contenedor con innerHTML = ''
Por cada operación crea un <div> nuevo con createElement
Le pone la clase y el texto con className y textContent
Le añade un click listener para poder reutilizar el resultado
Lo añade al DOM con appendChild

Ahora necesitamos llamar a agregarAlHistorial desde la función calcular. Añade esta línea justo antes de actualizar el estado:

// Dentro de calcular(), después de obtener el resultado:
agregarAlHistorial(`${anterior} ${operador} ${actual} = ${resultado}`)

Persistir el historial con localStorage

Si el usuario cierra el navegador, el historial se pierde. Vamos a guardarlo con localStorage:

function guardarHistorial() {
  localStorage.setItem('calculadora-historial', JSON.stringify(historial))
}

function cargarHistorial() {
  const guardado = localStorage.getItem('calculadora-historial')
  if (guardado) {
    historial = JSON.parse(guardado)
    renderizarHistorial()
  }
}

JSON.stringify convierte el array de strings a un string JSON para poder guardarlo
JSON.parse hace lo contrario: convierte el string JSON de vuelta a un array

Llama a guardarHistorial() cada vez que el historial cambie (al agregar y al limpiar) y a cargarHistorial() al inicio:

// Al final de agregarAlHistorial:
guardarHistorial()

// Botón de limpiar historial
document.getElementById('limpiar-historial').addEventListener('click', () => {
  historial = []
  renderizarHistorial()
  guardarHistorial()
})

// Cargar historial al inicio
cargarHistorial()

Prueba todo junto

Haz varias operaciones: 5 + 3, 10 × 2, 100 ÷ 4
Comprueba que aparecen en el panel de historial
Haz click en una operación del historial — el resultado debería cargarse en el display
Cierra el navegador, ábrelo de nuevo — el historial debería seguir ahí
Prueba el soporte de teclado: escribe 7*8 y pulsa Enter

Lo que hemos aprendido en este proyecto

A lo largo de las tres clases del proyecto de la calculadora hemos puesto en práctica:

Selección de elementos: getElementById, querySelectorAll
Data attributes: dataset.numero, dataset.operador
Eventos de click: addEventListener('click', ...) en botones individuales y grupos
Eventos de teclado: addEventListener('keydown', ...), evento.key, preventDefault()
Manipulación del DOM: textContent, createElement, appendChild, innerHTML
localStorage: setItem, getItem, JSON.stringify, JSON.parse
Manejo de errores: try/catch, throw new Error()

Proyecto: Teclado e historial

Proyecto: Teclado e historial

Soporte de teclado

Añadir el panel de historial al HTML

Implementar el historial con createElement

Persistir el historial con localStorage

Prueba todo junto

Lo que hemos aprendido en este proyecto

¿Qué beneficio aporta el soporte de teclado en la calculadora?

¿Por qué usamos evento.preventDefault() al escuchar teclas como "/" o "Enter"?

¿Por qué usamos localStorage para guardar el historial de la calculadora?

¿Por qué necesitamos JSON.stringify y JSON.parse para usar localStorage?

¿Qué técnica usamos para crear los elementos del historial dinámicamente?

Proyecto: Teclado e historial

Soporte de teclado

Añadir el panel de historial al HTML

Implementar el historial con createElement

Persistir el historial con localStorage

Prueba todo junto

Lo que hemos aprendido en este proyecto

¿Qué beneficio aporta el soporte de teclado en la calculadora?

¿Por qué usamos evento.preventDefault() al escuchar teclas como "/" o "Enter"?

¿Por qué usamos localStorage para guardar el historial de la calculadora?

¿Por qué necesitamos JSON.stringify y JSON.parse para usar localStorage?

¿Qué técnica usamos para crear los elementos del historial dinámicamente?