Widget Clima + Reloj Compacto

Hoy comparto un pequeño desarrollo que he creado para mis propios proyectos y que puede resultar útil a cualquiera que quiera añadir información meteorológica y un reloj digital a su sitio web sin depender de plugins ni servicios externos complicados.

Widget Clima + Reloj Compacto para cualquier sitio web (sin API keys)

Se trata de un widget compacto, moderno y totalmente autónomo que muestra:

• Temperatura actual
• Icono del clima
• Velocidad y dirección del viento
• Reloj digital en tiempo real
• Fecha completa
• Hora de la última actualización
• Diseño oscuro, transparente y adaptable

Funciona con Open‑Meteo, una API gratuita que no requiere registro ni claves.

Características principales

• No necesita API key
• Se actualiza automáticamente cada 10 minutos
• Diseño compacto y elegante
• Transparencia con efecto “cristal”
• Perfecto para barras laterales o widgets fijos
• Compatible con WordPress, Blogger, HTML puro, etc.
• Código 100% editable

Código completo del widget

Puedes copiar y pegar este bloque directamente en cualquier página o widget HTML:

html

<div id="weather-clock-widget"></div>

<style>
  #weather-clock-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 220px;
    padding: 14px;
    border-radius: 12px;

    background: rgba(17, 17, 17, 0.35);
    backdrop-filter: blur(6px);

    color: #e6edf7;
    font-family: system-ui, sans-serif;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    z-index: 9999;
  }

  .wc-title {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    color: #9ca3af;
  }

  .wc-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .wc-temp {
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(31,111,235,0.5);
  }

  .wc-icon {
    font-size: 2.2rem;
  }

  .wc-details {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.3;
  }

  .wc-clock {
    margin-top: 10px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 0.10em;
    font-weight: 600;
    text-shadow: 0 0 14px rgba(31,111,235,0.6);
  }

  .wc-date {
    margin-top: 2px;
    font-size: 0.75rem;
    text-align: center;
    color: #9ca3af;
  }

  .wc-update {
    margin-top: 6px;
    font-size: 0.7rem;
    text-align: center;
    color: #6b7280;
  }
</style>

<script>
  const weatherIcons = {
    0: "☀️", 1: "🌤️", 2: "⛅", 3: "☁️",
    45: "🌫️", 48: "🌫️",
    51: "🌦️", 61: "🌧️",
    71: "❄️", 95: "⛈️"
  };

  async function loadWeather() {
    const lat = 43.3603;
    const lon = -5.8448;

    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`;

    const res = await fetch(url);
    const data = await res.json();
    const w = data.current_weather;

    const icon = weatherIcons[w.weathercode] || "🌡️";

    const updateTime = new Date(w.time).toLocaleTimeString("es-ES", {
      hour: "2-digit",
      minute: "2-digit"
    });

    document.getElementById("weather-clock-widget").innerHTML = `
      <div class="wc-title">Clima en Oviedo</div>

      <div class="wc-main">
        <div class="wc-temp">${w.temperature}°C</div>
        <div class="wc-icon">${icon}</div>
      </div>

      <div class="wc-details">
        💨 ${w.windspeed} km/h<br>
        ➡️ ${w.winddirection}°
      </div>

      <div class="wc-clock" id="wc-clock">00:00:00</div>
      <div class="wc-date" id="wc-date">Cargando fecha...</div>

      <div class="wc-update">Actualizado: ${updateTime}</div>
    `;
  }

  function updateClock() {
    const now = new Date();

    const h = String(now.getHours()).padStart(2, "0");
    const m = String(now.getMinutes()).padStart(2, "0");
    const s = String(now.getSeconds()).padStart(2, "0");

    const days = ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'];
    const months = ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];

    document.getElementById("wc-clock").textContent = `${h}:${m}:${s}`;
    document.getElementById("wc-date").textContent =
      `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
  }

  loadWeather();
  setInterval(loadWeather, 600000);
  setInterval(updateClock, 1000);
  updateClock();
</script>

Licencia

Este código es completamente libre. Puedes copiarlo, modificarlo y usarlo en cualquier sitio web.

Conclusión

Un widget ligero, útil y adaptable que cualquiera puede integrar en su web en menos de un minuto. Si quieres personalizarlo (colores, tamaño, iconos, posición, animaciones…), puedes hacerlo fácilmente editando el CSS.