Lo que vas a construir

Una calculadora web funcional con React y TypeScript. Tendra botones numericos del 0-9, operaciones basicas (+, -, *, /), manejo de decimales, y un display que muestra la operacion actual. El diseno imitara una calculadora fisica real. Aprenderas a manejar estado complejo, eventos de click, y logica matematica en una interfaz interactiva.

Paso 1: Pídele a una IA la calculadora

Necesito una calculadora web con:
- Operaciones: +, -, *, /
- Botones numéricos 0-9
- Botón de igual y clear
- Display que muestre la operación
- Manejo de decimales
- React con TypeScript
- Tailwind CSS para estilos
- Diseño tipo calculadora física

Dame el código completo.

Conceptos clave

Concepto	Implementación
Estado	Número actual, operación pendiente
Eventos	onClick en cada botón
Lógica	Función que evalúa la expresión

Código típico

const [display, setDisplay] = useState('0')
const [prevValue, setPrevValue] = useState<number | null>(null)
const [operator, setOperator] = useState<string | null>(null)

const handleNumber = (num: string) => {
  setDisplay(display === '0' ? num : display + num)
}

const handleOperator = (op: string) => {
  setPrevValue(parseFloat(display))
  setOperator(op)
  setDisplay('0')
}

const calculate = () => {
  if (prevValue !== null && operator) {
    const current = parseFloat(display)
    let result: number
    switch (operator) {
      case '+': result = prevValue + current; break
      case '-': result = prevValue - current; break
      case '*': result = prevValue * current; break
      case '/': result = prevValue / current; break
      default: return
    }
    setDisplay(String(result))
  }
}

Mejoras posibles

Historial de operaciones
Funciones científicas (%, √)
Teclado numérico
Modo oscuro

Próximo paso

→ Quiz Interactivo — Lógica de juegos

Calculadora Web