Calculadora

# 🧮 Proyecto: Calculadora en JavaScript Es hora de poner en práctica todo lo que has aprendido. En este proyecto construiremos una **calculadora básica** que permite sumar, restar, multiplicar y dividir números. Utilizaremos HTML para la estructura, CSS para el estilo y JavaScript para la lógica. ## 🏗️ Estructura HTML Crea un archivo `index.html` con la siguiente estructura. Incluye botones para los números, las operaciones y un campo de pantalla para mostrar resultados. ```html Calculadora

``` ## 🎨 Estilos básicos con CSS Define un archivo `styles.css` para centrar la calculadora y dar estilo a los botones. Usa flexbox o grid para organizar las teclas. ```css body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; } .calculadora { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .teclas { display: grid; grid-template-columns: repeat(4, 60px); gap: 10px; } button { padding: 10px; font-size: 1.2rem; } ``` ## ⚙️ Lógica en JavaScript En `app.js` vamos a capturar los clics de los botones y actualizar la pantalla. También evaluaremos las operaciones de forma segura. ```js const pantalla = document.getElementById("pantalla"); const botones = document.querySelectorAll("button"); let expresion = ""; botones.forEach(boton => { boton.addEventListener("click", () => { const valor = boton.textContent; if (valor === "=") { try { expresion = eval(expresion); pantalla.value = expresion; } catch { pantalla.value = "Error"; expresion = ""; } } else if (valor === "C") { expresion = ""; pantalla.value = ""; } else { expresion += valor; pantalla.value = expresion; } }); }); ``` > ⚠️ **Aviso**: usar `eval()` es una forma sencilla de evaluar expresiones, pero puede ser peligroso si aceptas entrada del usuario. En proyectos reales, implementa un parser propio para las operaciones. ## 🎯 Extensiones y mejoras - Añade soporte para teclas de teclado (`keydown`). - Implementa operaciones más avanzadas (potencias, raíces, porcentaje). - Añade historial de operaciones y tema oscuro. ¡Comparte tu calculadora y experimenta adaptándola a tus necesidades! Esta práctica te ayudará a consolidar conceptos de HTML, CSS y JavaScript trabajando juntos.