Cuaca di situs web kamu

Buat widget bagus dengan perkiraan akhir pekan – hal yang berguna untuk salah satu dari empat proyek.

Open-Meteo juga dapat memberikan perkiraan untuk beberapa hari mendatang. Cukup tambahkan apa yang kamu inginkan ke alamat:

https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto

Dalam responsnya, kamu akan menemukan daily.time (daftar hari), daily.temperature_2m_max, dan daily.temperature_2m_min (suhu tertinggi dan terendah). Same order = hari pertama sesuai suhu pertama.

kamu kemudian membuat widget dalam satu lingkaran:

<div id="pocasi" class="pocasi-widget"></div>

<script type="module">
  const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
  const data = await (await fetch(adresa)).json();

  const dny = data.daily.time;
  const max = data.daily.temperature_2m_max;
  const min = data.daily.temperature_2m_min;

  let html = '';
  for (let i = 0; i < 3; i++) {
    const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
    html += `<div class="den">
      <strong>${den}</strong>
      <span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
    </div>`;
  }
  document.querySelector('#pocasi').innerHTML = html;
</script>

Dan sedikit CSS sehingga terlihat seperti widget sungguhan:

.pocasi-widget {
  display: flex;
  gap: 10px;
}
.pocasi-widget .den {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Giliran kamu 💪

Tambahkan widget cuaca di mana pun yang sesuai dengan proyek kamu:

🏫 Situs web sekolah – solusi

Di halaman acara sekolah: “Cuaca untuk karyawisata sekolah.” Tetapkan koordinat tujuan – anak-anak dan orang tua akan senang mengetahui apa yang harus dikemas.

🙋 Situs web pribadi – solusi

Di header atau footer: cuaca di kota kamu sebagai sentuhan pribadi (“Hari ini suhu di kota saya 18 °C”).

🌍 Jurnal perjalanan – solusi

Untuk setiap perjalanan yang direncanakan, widget dengan ramalan cuaca di tempat tujuan. Ubah saja koordinat lokasi perjalanan.

⚽ Situs web klub – solusi

Di halaman pertandingan: “Cuaca untuk pertandingan hari Sabtu.” Temukan koordinat bidang pada peta. Bonus: jika diperkirakan akan turun hujan, tunjukkan “Bawakan jas hujan!”

💡

Di mana saya bisa mendapatkan koordinat? Pada layanan peta, klik kanan pada lokasi → “Apa yang ada di sini?” – koordinat akan muncul di atas.

✅

Periksa: Situs web kamu memiliki widget dengan prakiraan cuaca nyata selama 3 hari, yang ditata agar sesuai dengan desain kamu. Data dimuat langsung dari API.

Apa yang bisa diambil dari pelajaran ini

kamu memberi tahu alamat API apa yang kamu inginkan menggunakan bagian setelah tanda tanya (parameter).
kamu membuat data dari daftar ke dalam HTML dengan loop for.
Angka di JSON menjadi widget nyata – kamu yang menyediakan desainnya.

Pelajaran ini bagian dari level berbayar

Tunjukkan pada saya: mengubah data menjadi widget

Giliran kamu 💪

Apa yang bisa diambil dari pelajaran ini