☀️API⛅
Weather Application
5-Day Forecast
Search History
User Comments:
API documentation / Documentación del API
Resumen General del API
Versión español
Este código es una aplicación web completa que permite a los usuarios buscar información meteorológica de una ciudad, ver un pronóstico del tiempo, visualizar un gráfico de temperatura, y mantener un historial de búsquedas. Además, incluye una sección de comentarios donde los usuarios pueden dejar y ver comentarios almacenados en el localStorage. La aplicación utiliza varias bibliotecas externas como Leaflet para el mapa y Chart.js para el gráfico de temperatura.
API General Summary
English version
This code is a complete web application that allows users to search for weather information for a city, view a weather forecast, display a temperature graph, and maintain a search history. In addition, it includes a comments section where users can leave and view comments stored in the localStorage. The application uses several external libraries such as Leaflet for the map and Chart.js for the temperature graph.
Cumplimiento de estándares de JavaScript (ECMAScript (ES) 6)
-
Uso de Constantes y Variables Let:
El código utiliza
constyletpara declarar variables y constantes de manera apropiada, asegurando un ámbito seguro y evitando problemas con variables globales. Por ejemplo:const apiKey = "eb4ae362308a4644aad02563c3c6cc4c"; let map; -
Funciones Flecha:
Se implementan funciones flecha, como en la declaración de eventos y funciones asíncronas, lo que reduce la verbosidad y asegura un manejo de contexto correcto. Por ejemplo:
searchBtn.addEventListener("click", async () => { // Código aquí }); -
Plantillas de Cadena:
Uso extensivo de
template literalspara construir dinámicamente el contenido HTML y las cadenas de texto. Por ejemplo:document.getElementById("city-name").textContent = `${data.name}, ${data.sys.country}`; -
Selección y manipulación del DOM:
Se seleccionan elementos del DOM con métodos estándar como
getElementById,querySelector, yinnerHTML. Por ejemplo:const cityInput = document.getElementById("city-input"); -
Desestructuración:
Se aplica destructuración para manejar datos complejos, como al acceder a las propiedades de objetos anidados. Por ejemplo:
const { lat, lon } = weatherData.coord; -
Manejo de Promesas:
Uso correcto de
async/awaitpara manejar promesas en operaciones asíncronas comofetch, asegurando un flujo de trabajo más limpio. Por ejemplo:async function fetchWeather(city, unit) { const response = await fetch(`${apiBase}/weather?q=${city}&units=${unit}&appid=${apiKey}`); if (!response.ok) throw new Error("City not found"); return response.json(); } -
Métodos de Array Avanzados:
Métodos como
map,filter, yforEachse utilizan para manejar colecciones de datos eficientemente. Por ejemplo:const forecastHTML = data.list .filter((_, index) => index % 8 === 0) .map((entry) => { return `<div class="forecast-item">...</div>`; }) .join("");
Explicación detallada del código JS (API)
1. Configuración Inicial
const apiKey = "eb4ae362308a4644aad02563c3c6cc4c";¿Qué hace? Define la clave de la API de OpenWeatherMap, que se utilizará para autenticar las solicitudes a la API.
const apiBase = "https://api.openweathermap.org/data/2.5";¿Qué hace? Establece la URL base de la API de OpenWeatherMap, que se utilizará para realizar las solicitudes.
let map;¿Qué hace? Declara una variable global para almacenar la instancia del mapa de Leaflet.
2. Función para Obtener Datos (fetchWeather)
async function fetchWeather(city, unit) {¿Qué hace? Declara una función asíncrona que se encarga de obtener los datos del clima para una ciudad específica.
const response = await fetch(`${apiBase}/weather?q=${city}&units=${unit}&appid=${apiKey}`);¿Qué hace? Realiza una solicitud HTTP GET a la API de OpenWeatherMap para obtener los datos del clima.
if (!response.ok) throw new Error("City not found");¿Qué hace? Verifica si la solicitud fue exitosa. Si no, lanza un error con un mensaje personalizado.
return response.json();¿Qué hace? Convierte la respuesta de la API en un objeto JSON y lo devuelve.
3. Función para Actualizar la Interfaz (updateWeatherUI)
function updateWeatherUI(data) {¿Qué hace? Actualiza la interfaz de usuario con los datos del clima obtenidos de la API.
document.getElementById("city-name").textContent = `${data.name}, ${data.sys.country}`;¿Qué hace? Muestra el nombre de la ciudad y el país en la interfaz.
document.getElementById("temperature").textContent = `🌡️ Temp: ${data.main.temp} °${unitSelect.value === "metric" ? "C" : "F"}`;¿Qué hace? Muestra la temperatura en la interfaz, utilizando la unidad seleccionada (Celsius o Fahrenheit).
4. Función para Actualizar el Mapa (updateMap)
function updateMap(lat, lon, cityName) {¿Qué hace? Actualiza la posición del mapa y el marcador para reflejar la ubicación de la ciudad buscada.
map.setView([lat, lon], 10);¿Qué hace? Centra el mapa en las coordenadas de la ciudad y ajusta el nivel de zoom.
5. Manejo de Eventos
searchBtn.addEventListener("click", async () => { ... });¿Qué hace? Maneja el evento de clic en el botón de búsqueda, iniciando el proceso de obtención de datos y actualización de la interfaz.
cityInput.addEventListener("keydown", (event) => { ... });¿Qué hace? Maneja el evento de presionar Enter en el campo de entrada de la ciudad, simulando un clic en el botón de búsqueda.
Compliance with JavaScript Standards (ECMAScript (ES) 6)
-
Use of Constants and Let Variables:
The code uses
constandletto declare variables and constants appropriately, ensuring safe scope and avoiding issues with global variables. For example:const apiKey = "eb4ae362308a4644aad02563c3c6cc4c"; let map; -
Arrow Functions:
Arrow functions are implemented, such as in event declarations and asynchronous functions, reducing verbosity and ensuring correct context handling. For example:
searchBtn.addEventListener("click", async () => { // Code here }); -
Template Literals:
Extensive use of
template literalsto dynamically build HTML content and strings. For example:document.getElementById("city-name").textContent = `${data.name}, ${data.sys.country}`; -
DOM Selection and Manipulation:
DOM elements are selected using standard methods like
getElementById,querySelector, andinnerHTML. For example:const cityInput = document.getElementById("city-input"); -
Destructuring:
Destructuring is applied to handle complex data, such as accessing properties of nested objects. For example:
const { lat, lon } = weatherData.coord; -
Promise Handling:
Correct use of
async/awaitto handle promises in asynchronous operations likefetch, ensuring cleaner workflow. For example:async function fetchWeather(city, unit) { const response = await fetch(`${apiBase}/weather?q=${city}&units=${unit}&appid=${apiKey}`); if (!response.ok) throw new Error("City not found"); return response.json(); } -
Advanced Array Methods:
Methods like
map,filter, andforEachare used to efficiently handle data collections. For example:const forecastHTML = data.list .filter((_, index) => index % 8 === 0) .map((entry) => { return `<div class="forecast-item">...</div>`; }) .join("");
Detailed Explanation of the JS Code (API)
1. Initial Configuration
const apiKey = "eb4ae362308a4644aad02563c3c6cc4c";What does it do? Defines the OpenWeatherMap API key, which will be used to authenticate API requests.
const apiBase = "https://api.openweathermap.org/data/2.5";What does it do? Sets the base URL for the OpenWeatherMap API, which will be used to make requests.
let map;What does it do? Declares a global variable to store the Leaflet map instance.
2. Function to Fetch Data (fetchWeather)
async function fetchWeather(city, unit) {What does it do? Declares an asynchronous function responsible for fetching weather data for a specific city.
const response = await fetch(`${apiBase}/weather?q=${city}&units=${unit}&appid=${apiKey}`);What does it do? Makes an HTTP GET request to the OpenWeatherMap API to fetch weather data.
if (!response.ok) throw new Error("City not found");What does it do? Checks if the request was successful. If not, it throws an error with a custom message.
return response.json();What does it do? Converts the API response into a JSON object and returns it.
3. Function to Update the UI (updateWeatherUI)
function updateWeatherUI(data) {What does it do? Updates the user interface with the weather data obtained from the API.
document.getElementById("city-name").textContent = `${data.name}, ${data.sys.country}`;What does it do? Displays the city name and country in the interface.
document.getElementById("temperature").textContent = `🌡️ Temp: ${data.main.temp} °${unitSelect.value === "metric" ? "C" : "F"}`;What does it do? Displays the temperature in the interface, using the selected unit (Celsius or Fahrenheit).
4. Function to Update the Map (updateMap)
function updateMap(lat, lon, cityName) {What does it do? Updates the map position and marker to reflect the location of the searched city.
map.setView([lat, lon], 10);What does it do? Centers the map on the city's coordinates and adjusts the zoom level.
5. Event Handling
searchBtn.addEventListener("click", async () => { ... });What does it do? Handles the click event on the search button, initiating the data fetching and UI update process.
cityInput.addEventListener("keydown", (event) => { ... });What does it do? Handles the Enter key press event in the city input field, simulating a click on the search button.
Recent Comments: