Proyecto: una app del tiempo en JavaScript

Pides una ciudad, llamas a una API con fetch, y pintas una tarjeta con el resultado. Incluye el manejo de errores.

La app del tiempo es el "hola mundo" de consumir APIs: pides datos a un servidor, esperas la respuesta y la muestras. Junta fetch, async/await, JSON y el DOM.

Demo

Escribe una ciudad. La API es simulada (Madrid, Bilbao, Barcelona, Valencia, Sevilla, Santiago de Compostela). Prueba también una que no exista:

Paso 1: el HTML

<form id="form">
  <input type="text" id="ciudad" placeholder="Ciudad">
  <button>Consultar</button>
</form>
<div id="resultado"></div>

Paso 2: pedir los datos con fetch

const API = "https://api.openweathermap.org/data/2.5/weather";
const CLAVE = "TU_API_KEY";   // se saca gratis registrándote

async function pedirTiempo(ciudad) {
  const url = `${API}?q=${ciudad}&appid=${CLAVE}&units=metric&lang=es`;
  const res = await fetch(url);
  if (!res.ok) throw new Error("Ciudad no encontrada");   // 404
  return res.json();
}

Paso 3: pintar el resultado

function pintar(datos) {
  document.getElementById("resultado").innerHTML = `
    <h2>${datos.name}</h2>
    <p class="temp">${Math.round(datos.main.temp)}°C</p>
    <p>${datos.weather[0].description}</p>
  `;
}

Paso 4: juntarlo y manejar errores

document.getElementById("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const ciudad = document.getElementById("ciudad").value.trim();
  if (!ciudad) return;

  const salida = document.getElementById("resultado");
  salida.textContent = "Cargando...";

  try {
    const datos = await pedirTiempo(ciudad);
    pintar(datos);
  } catch (err) {
    salida.textContent = "⚠️ " + err.message;   // no dejes al usuario sin feedback
  }
});

Cómo seguir

  • Pedir el tiempo de los próximos 5 días (otro endpoint).
  • Usar la geolocalización del navegador para la ciudad actual.
  • Guardar la última ciudad buscada en localStorage.
  • Cambiar el fondo según haga sol, lluvia o nieve.