En este proyecto escolar, desarrollé un sitio web interactivo que permite a los usuarios consultar el clima de cualquier ciudad utilizando una API. Este proyecto fue una excelente oportunidad para aprender y aplicar mis habilidades en JavaScript, CSS y trabajar con APIs. A continuación, detallo el proceso, las funcionalidades y los resultados obtenidos.
El objetivo principal del proyecto era crear un sitio web que pudiera consultar una API de clima y mostrar la información relevante de manera clara y atractiva. Utilizando el servicio de OpenWeatherMap, los usuarios pueden ingresar el nombre de una ciudad y obtener datos climáticos actualizados, incluyendo temperatura, humedad, presión atmosférica, y más.
Desarrollo del proyecto
Configuración Inicial
Para comenzar, se instaló una versión básica de HTML y CSS para estructurar y estilizar el sitio web. El código JavaScript fue el corazón del proyecto, encargado de manejar las solicitudes a la API y procesar las respuestas para mostrarlas en la interfaz del usuario.
const API_KEY = 'API KEY';
const URL = 'https://api.openweathermap.org/';
const api_mapa = 'API-MAPA';
const url_mapa = 'http://api.tomtom.com';
Funcionalidad principal
El botón de búsqueda permite a los usuarios ingresar el nombre de una ciudad. Al hacer clic en el botón, se llama a la función ciudad que realiza una solicitud a la API de OpenWeatherMap con el nombre de la ciudad ingresada.
button.addEventListener("click", () => {
ciudad(botonbuscar.value);
card.setAttribute(`style`, `display:none`);
});
function ciudad(ciudadbuscada) {
const fetchPromise = fetch(`${URL}data/2.5/weather?q=${ciudadbuscada}&units=metric&lang=es&appid=${API_KEY}`);
fetchPromise.then(response => {
return response.json();
}).then(result => {
localStore(result);
}).catch(err => {
console.log('fallo!: ', err);
informacion.innerHTML = `<div class="row justify-content-center text-center">
<p class="mb-3 col-12 align-self-center" style="color: red; font-weight: bold">Ciudad no encontrada, intente nuevamente por favor. </p>
<button type="button" class="btn btn-primary mt-3 col-2 align-self-center" onclick="location.reload()">Volver a intentarlo</button>
</div>`;
});
}
Almacenamiento y visualización de datos
Los datos climáticos se almacenan en localStorage para mantener un historial de consultas. Estos datos incluyen temperatura actual, máxima y mínima, humedad, sensación térmica, presión atmosférica, velocidad del viento y estado del clima. También se muestran iconos climáticos y un mapa estático de la ubicación consultada.
function localStore(result) {
let arrayDatos = localStorage.getItem("climaConsultado") ? JSON.parse(localStorage.climaConsultado) : [];
const data = {
temperatura: result.main.temp,
temperaturaMax: result.main.temp_max,
temperaturaMin: result.main.temp_min,
humedad: result.main.humidity,
sensasionTermica: result.main.feels_like,
presionAtmosferica: result.main.pressure,
velocidadViento: result.wind.speed,
estadoClima: result.weather[0].description,
iconoClima: result.weather[0].icon,
latitud: result.coord.lat,
longitud: result.coord.lon,
};
arrayDatos.push(data);
localStorage.setItem("climaConsultado", JSON.stringify(arrayDatos));
mostrardatos(data);
}
Diseño responsivo con CSS
El diseño del sitio fue pensado para ser completamente responsivo, adaptándose a diferentes dispositivos y tamaños de pantalla. Se utilizaron tarjetas (cards) para presentar la información de manera organizada y visualmente atractiva.
El uso de una fuente personalizada y un fondo con un gradiente suave añade un toque estético moderno y agradable.
function mostrardatos(data) {
informacion.innerHTML = '';
template.querySelector(".card-header").textContent = botonbuscar.value.toUpperCase();
template.querySelector(".card-body ul li:nth-child(1)").textContent = `Temperatura Actual: ` + data.temperatura + ` °C`;
template.querySelector(".card-body ul li:nth-child(2)").textContent = `Temperatura Máxima: ` + data.temperaturaMax + ` °C`;
template.querySelector(".card-body ul li:nth-child(3)").textContent = `Temperatura Mínima: ` + data.temperaturaMin + ` °C`;
template.querySelector(".card-body ul li:nth-child(4)").textContent = `Humedad: ` + data.humedad + ` %`;
template.querySelector(".card-body ul li:nth-child(5)").textContent = `Sensación térmica : ` + data.sensasionTermica + ` °C`;
template.querySelector(".card-body ul li:nth-child(6)").textContent = `Presión atmosférica : ` + data.presionAtmosferica + ` Pa`;
template.querySelector(".card-body ul li:nth-child(7)").textContent = `Velocidad del viento : ` + data.velocidadViento + ` m/s`;
template.querySelector(".card-body ul li:nth-child(8)").textContent = `Estado del clima: ` + data.estadoClima;
let rutaclima = `img/${data.iconoClima}.svg`;
template.querySelector(".card-body img").setAttribute(`src`, rutaclima);
template.querySelector(".card-body img").setAttribute(`class`, `img-fluid`);
let rutaMapa = `${url_mapa}/map/1/staticimage?key=${api_mapa}&zoom=9¢er=${data.longitud},${data.latitud}&format=jpg&layer=basic&style=main&width=1305&height=748&view=Unified&language=es-ES`;
template.querySelector(".card-body .mapa").innerHTML = `<img decoding="async" src="${rutaMapa}" alt="mapa de la ciudad" class="img-fluid" title="Proyecto: sitio web para consulta de clima con API 2">`;
const clone = template.cloneNode(true);
fragment.appendChild(clone);
informacion.appendChild(fragment);
}
Este proyecto me permitió entender mejor la importancia del diseño responsivo y la experiencia del usuario. La implementación de localStorage para conservar el historial de consultas fue una adición valiosa que mejoró la funcionalidad del sitio.
Da clic en el botón para ver el clima de tu ciudad.
