Scrip html Cuaca Bloger

<style>

  #weather-widget {

    max-width: 320px;

    margin: 15px auto;

    padding: 20px;

    background: #8B0000; /* Merah hati */

    color: #fff;

    border-radius: 15px;

    font-family: Arial, sans-serif;

    text-align: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  }

  #weather-city {

    font-size: 14px;

    font-weight: bold;

    text-transform: uppercase;

    display: block;

    margin-bottom: 8px;

  }

  #weather-temp {

    font-size: 38px;

    font-weight: bold;

    color: #FFD700; /* Gold */

    display: block;

  }

  #weather-desc {

    font-size: 15px;

    margin-bottom: 10px;

    display: block;

  }

  #weather-uv {

    font-size: 13px;

    background: rgba(0,0,0,0.2);

    padding: 5px 10px;

    border-radius: 20px;

    display: inline-block;

    color: #FFD700;

  }

</style>

<div id="weather-widget">

  <span id="weather-city">Mendeteksi Lokasi...</span>

  <span id="weather-temp">--°C</span>

  <span id="weather-desc">Menghubungkan...</span>

  <div id="weather-uv">Indeks UV: --</div>

</div>

<script>

  async function getWeather() {

    try {

      const response = await fetch('https://wttr.in/?format=j1&lang=id');

      const data = await response.json();

      

      const current = data.current_condition[0];

      const temp = current.temp_C;

      const desc = current.lang_id[0].value;

      const uv = current.uvIndex;

      const city = data.nearest_area[0].region[0].value;

      // Logika sederhana untuk keterangan UV

      let uvRisk = "";

      if (uv <= 2) uvRisk = "(Rendah)";

      else if (uv <= 5) uvRisk = "(Sedang)";

      else if (uv <= 7) uvRisk = "(Tinggi)";

      else uvRisk = "(Sangat Tinggi)";

      document.getElementById('weather-temp').innerHTML = temp + '°C';

      document.getElementById('weather-desc').innerText = desc;

      document.getElementById('weather-city').innerText = 'CUACA DI ' + city;

      document.getElementById('weather-uv').innerText = 'Indeks UV: ' + uv + ' ' + uvRisk;

    } catch (error) {

      document.getElementById('weather-city').innerText = 'Gagal Memuat Data';

      console.error(error);

    }

  }

  getWeather();

</script>