htmlcssjavascriptwidgetapiMenengah10 mnt baca

Widget Cuaca

Membangun widget cuaca cantik dengan data simulasi dan pilihan kota.

Kenapa Widget Cuaca?

Widget cuaca mengajarkan pola penting: mengambil data (nanti dari API sungguhan), mengubahnya menjadi tampilan, dan menangani state loading/error. Modul ini memakai data simulasi agar fokus pada pola, bukan pada API key.

Langkah Membangun

HTML: Kartu cuaca: nama kota (dropdown), ikon cuaca besar, suhu besar, deskripsi, detail (kelembapan, angin, tekanan).

CSS: Background kartu berubah sesuai kondisi: cerah (gradien biru-oranye), hujan (gradien abu-biru), berawan. Ikon memakai emoji besar agar sederhana.

JS: Object data simulasi per kota: { jakarta: { suhu: 32, kondisi: "cerah", lembap: 70, angin: 12 } }. Saat kota diganti:

  1. Tampilkan state loading (spinner) 800ms untuk mensimulasikan request.
  2. Render data kota ke kartu.
  3. Ubah class background sesuai kondisi.

Pola ini identik dengan fetch API sungguhan: loading -> sukses/error -> render. Nanti tinggal ganti data simulasi dengan fetch() ke OpenWeatherMap.

Kesalahan Umum

  • Tidak ada state loading sehingga perubahan terasa "melompat".
  • Data dan tampilan tercampur (pisahkan object data dari fungsi render).
  • Lupa menangani kota yang datanya tidak ada (tampilkan pesan error ramah).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Konversi Fahrenheit

Tambahkan toggle °C/°F yang mengkonversi suhu tampilan. Rumus: F = C × 9/5 + 32. Pastikan toggle tidak merusak data asli (simpan selalu dalam Celsius).