Integrar una API externa es uno de los saltos más útiles en interfaces: pasas de UI estática a UI con datos reales. OpenWeatherMap es perfecta para practicar porque devuelve un JSON claro con temperatura, estado e iconos.

1) Preparación: API key

En OpenWeatherMap necesitas una API key. Recomendación: en proyectos reales, no expongas la key en frontend; usa un backend o proxy. Para aprendizaje, la puedes usar directamente.

2) Endpoint y ejemplo de petición

Ejemplo con fetch (temperatura en ºC con units=metric):

async function getWeather(city) {
  const apiKey = "TU_API_KEY";
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&units=metric&lang=es&appid=${apiKey}`;

  const res = await fetch(url);
  if (!res.ok) throw new Error("No se pudo obtener el tiempo");
  return await res.json();
}

3) Renderizado en la UI

const salida = document.querySelector("#weather");

function renderWeather(data) {
  const temp = Math.round(data.main.temp);
  const desc = data.weather[0].description;
  const icon = data.weather[0].icon;
  const iconUrl = `https://openweathermap.org/img/wn/${icon}@2x.png`;

  salida.innerHTML = `
    <div class="d-flex align-items-center gap-3">
      <img src="${iconUrl}" alt="${desc}" width="60" height="60">
      <div>
        <div><strong>${temp}°C</strong></div>
        <div class="text-muted">${desc}</div>
      </div>
    </div>
  `;
}

4) Ejemplo completo (input + botón)

const input = document.querySelector("#city");
const btn = document.querySelector("#btn");

btn.addEventListener("click", async () => {
  try {
    salida.textContent = "Cargando...";
    const data = await getWeather(input.value.trim());
    renderWeather(data);
  } catch (e) {
    salida.textContent = "Error: revisa la ciudad o la API key.";
  }
});

5) Ideas de mejora

• Geolocalización: usar navigator.geolocation para lat/lon.
• Cache: guardar la última respuesta en localStorage.
• Mapa: combinar con un SVG (provincias) o con un mapa interactivo.