Una aplicación web de alto rendimiento y diseño minimalista enfocada en la consulta precisa de condiciones meteorológicas en tiempo real. Diseñada bajo los principios de UX Móvil Primero, separación estricta de responsabilidades y manipulación nativa del DOM sin dependencias externas pesadas.
🔗 Demo en vivo desplegada: https://j3ssdev.github.io/WeatherApp/
La interfaz utiliza una paleta cromática de alta fidelidad basada en un Tema Oscuro Radial (#0b1220), optimizada para reducir la fatiga visual y resaltar la información meteorológica clave mediante contraste tipográfico (Fraunces e Inter).
- 🔍 Búsqueda Dinámica Global: Consulta síncrona de cualquier ciudad o región del mundo con soporte multilingüe (español por defecto).
- 🌡️ Telemetría Térmica: Cálculo preciso de la temperatura actual en grados Celsius y visualización de la sensación térmica (Feels Like).
- ☀️ Monitor del Ciclo Solar: Indicador gráfico que representa el progreso dinámico del sol durante el día, delimitado por las horas de amanecer y atardecer.
- 📊 Matriz de Métricas Atmosféricas (Readout):
- Viento: Velocidad en km/h y rosa de los vientos (dirección).
- Humedad: Porcentaje relativo ambiental.
- Presión: Medición en milibares (mb).
- Índice UV: Nivel de radiación ultravioleta.
- Extremos diarios: Rango de temperatura máxima y mínima proyectada.
- 📅 Pronóstico Extendido: Tarjetas informativas para la proyección del clima durante los días posteriores.
- 📱 Diseño Totalmente Responsive: Adaptación fluida desde pantallas móviles súper estrechas hasta monitores ultrapanorámicos.
| Capa | Tecnología / Herramienta | Justificación Técnica |
|---|---|---|
| Marcado | HTML5 Semántico | Uso de etiquetas <header>, <section>, <dl>, <dt>, <dd> para accesibilidad y SEO. |
| Estilos | CSS3 Puro | Variables CSS, Flexbox, CSS Grid y degradados radiales nativos sin frameworks pesados. |
| Lógica | JavaScript ES6+ | Funciones asíncronas (async/await), Fetch API y manipulación limpia del DOM. |
| Fuente de Datos | WeatherAPI | Servicio RESTful para obtención de datos climáticos en tiempo real y activos gráficos. |
| Tipografía | Google Fonts API | Integración optimizada de Fraunces (serif decorativa) e Inter (sans-serif legible). |
| Despliegue | Git & GitHub Pages | Control de versiones distribuido y CI/CD integrado con despliegue automatizado. |
El flujo de información en la aplicación sigue un ciclo unidireccional e interactivo:
[ Entrada del Usuario ] ──> ( Evento Submit )
│
▼
[ Petición Fetch a WeatherAPI ]
│
( Respuesta JSON ES6 )
│
▼
[ Mapeo de Datos en JS ]
│
▼
[ Inyección Dinámica al DOM HTML ]
WeatherApp/
├── index.html # Estructura semántica de la interfaz
├── style.css # Sistema de diseño, variables de color y layouts
├── app.js # Lógica de conexión a la API y actualización del DOM
└── README.md # Documentación técnica del proyecto