🚀 EL TIEMPO API - Ángel Sánchez

Bienvenido al repositorio de mi API de EL TIEMPO. Objetivo:

• Introducir una ciudad de la cual queremos saber el Tiempo actual.

• Acceder a una API externa de openweathermap.org.

• Seleccionar información de Clima.
• Mostrar todos estos datos recibidos en cartas con una bonita presentación.
• Por ejemplo: temperatura actual, humedad, nublado o soleado, viento, etc...
• IMPORTANTE: se necesita una API_KEY gratuita que se genera en openweathermap.org.
• Si no tienes API_KEY podrás simular datos ficticios con varios botones.
• La ciudad introducida debe tener mínimo 3 caracteres para poder ser gestionada.

---

🌐 Mi EL TIEMPO API Web

💡 Nota: Más abajo lo que tienes es una descripción técnica de todas las tecnologías que he utilizado para desarrollar el Proyecto.

---

🛠️ Stack Tecnológico

• HTML5: Estructura semántica adecuada para SEO y accesibilidad.
• CSS3: Flexbox (con diseños adaptativos).
• JavaScript (ES6+): Lógica interactiva, manipulación dinámica del DOM, funciones, creación objetos, json, búsqueda dinámica.
• API: Llamadas a API externa https://api.openweathermap.org/data/2.5/weather.

🧠 Lógica y Funcionalidades (JavaScript)

Utilizo varios conceptos en JavaScript para interactividad, rendimiento y dinamismo. Experiencia de Usuario (UX).

1. Funciones y Funciones predefinidas

Funciones para acceder a datos del objeto recibido, funciones para transformar objetos a JSON, funciones para contar las interacciones del usuario, funciones asíncronas para acceder a datos con fetch o axios.

2. Gestión de Navegación y DOM

• Objetos: Acceso a propiedades de objetos recibidos de la API.
• Estructuras: Uso de estructuras de decisión, bucles e iteraciones.
• localStorage: Uso de localStorage para guardar valores de variables.
• Captura de Eventos: Uso de event listeners.
• Delegación de Eventos: Uso de condicionales para optimización de event listeners.
• Acceso al DOM: Identificación de elementos, modificación del documento mediante código.

3. Consumo de APIs Externas (Axios API y Fetch API)

En una primera versión se ha utilizado Fetch API y probado todo correctamente. Finalmente he implementado el uso de la Axios API de JavaScript para la recuperación dinámica de datos, eliminando el acceso mediante Fetch:

• ¿Qué es Axios?: Es una función nativa de JavaScript que permite realizar peticiones asíncronas a servidores externos.
• Gestión de Promesas: Permite recibir la respuesta en formato JSON y usar esos datos en el DOM.
• Búsqueda Dinámica: Para acceder a la API, construyo una URL dinámicamente usando Template Strings. Incluso puedo realizar búsquedas personalizadas mediante parámetros de consulta (lat=${latitud}) para búsquedas personalizadas por ubicación o por ciudad.

---

🚀 ¿Cómo usar este repositorio?

Si necesitar observar este proyecto de forma local:

1. Clona el proyecto:

   git clone https://github.com/angelsandev/ELTIEMPO.git

2. Abre el archivo: Abre el archivo index.html en tu navegador.
3. ¡Explora el código! Podrás revisar la arquitectura y código. Pero recuerda echar un vistazo a mi experiencia y habilidades. Gracias.

📂 Organización del Proyecto

/
├── index.html          # Estructura principal y semántica
├── src/
│   ├── css/
│   │   └── style.css   # Variables, Layouts (Flex) y Responsive Design
│   ├── js/
│   │   └── script.js  # Eventos y lógica 
│   └── images/         # Assets y capturas de los proyectos
├── README.md
└── CHANGELOG.md

✍️ Autor

Hecho con ❤️ por Ángel Sánchez Guillén