🚀 Abrir Calculadora Online 🚀

🚀 Características

Diseño Visual

• Interfaz moderna que replica la apariencia de la calculadora de macOS
• Tema oscuro con botones circulares y efectos visuales
• Colores diferenciados por función:
  • 🟠 Naranja: Operadores matemáticos (÷, ×, -, +, =)
  • ⚪ Gris claro: Funciones especiales (AC, +/-, %)
  • ⚫ Gris oscuro: Números y punto decimal
• Tipografía del sistema (Helvetica Neue) para una apariencia auténtica
• Diseño responsivo que se adapta a dispositivos móviles

Funcionalidad Completa

• ✅ Operaciones aritméticas básicas: suma, resta, multiplicación, división
• ✅ Funciones especiales:
  • AC: Reinicio completo de la calculadora
  • +/-: Cambio de signo (positivo/negativo)
  • %: Conversión a porcentaje
• ✅ Soporte para números decimales
• ✅ Entrada por teclado para mayor comodidad
• ✅ Manejo de errores (división por cero)
• ✅ Retroalimentación visual en los botones de operadores

📁 Estructura del Proyecto

calculadora-beta/
├── index.html          # Estructura HTML principal
├── style.css           # Estilos CSS con diseño de macOS
├── script.js           # Lógica JavaScript de la calculadora
└── README.md           # Documentación del proyecto

🛠️ Tecnologías Utilizadas

• HTML5: Estructura semántica y accesible
• CSS3: Diseño moderno con efectos visuales y animaciones
• JavaScript ES6+: Lógica de calculadora con programación orientada a objetos

🚀 Uso

Instalación

1. Clona este repositorio:

   git clone https://github.com/Felipe-Moreno-Marciales/Calculadora-Online

2. Navega al directorio del proyecto:

   cd Calculadora-Online

3. Abre el archivo index.html en tu navegador web

4. Abra la calculadora desde el siguiente enlace https://felipe-moreno-marciales.github.io/Calculadora-Online/ en tu navegador web

Controles

Ratón/Táctil

• Haz clic en cualquier botón para realizar operaciones

Teclado

• Números: 0-9
• Operadores: +, -, *, /
• Funciones:
  • Enter o =: Calcular resultado
  • Escape o C: Limpiar (AC)
  • .: Punto decimal
  • %: Porcentaje

🧪 Ejemplos de Uso

Operación básica:     5 + 3 = 8
Decimales:           5.7 × 2 = 11.4
Porcentaje:          10% = 0.1
Cambio de signo:     5 → +/- → -5
Reinicio:            AC → 0

🎯 Objetivos de Diseño

Esta calculadora replica fielmente la experiencia de la calculadora de macOS:

• Distribución de botones idéntica al original
• Esquema de colores y jerarquía visual coincidente
• Animaciones suaves y efectos de interacción
• Tipografía profesional y espaciado cuidadoso
• Patrones de interacción intuitivos y familiares

📱 Compatibilidad

• ✅ Navegadores modernos: Chrome, Firefox, Safari, Edge
• ✅ Dispositivos móviles: iOS, Android
• ✅ Diseño responsivo: Se adapta a diferentes tamaños de pantalla

👨‍💻 Autor

Felipe Moreno Marciales - GitHub

---

Nota: Esta calculadora fue creada como un proyecto educativo para demostrar las mejores prácticas de desarrollo web frontend con HTML, CSS y JavaScript vanilla.