Jago JavaScript 3: Mini Project - Aplikasi Cuaca Dunia

Kita bakal gabungin semua jurus: Async/Await, Fetch API, Error Handling, dan DOM Manipulation.

🧩 Apa yang Akan Dipelajari

• Cara dapet dan pakai API Key.
• Mengirim parameter (nama kota) lewat URL Fetch.
• Mengolah data JSON yang kompleks (objek di dalam objek).
• Menampilkan ikon cuaca secara dinamis.

🚀 Langkah-Langkah

1. Persiapan (Penting!)

Untuk proyek ini, biasanya kita butuh API Key. Tapi buat latihan cepat, kita bakal pakai URL simulasi atau kamu bisa daftar gratis di OpenWeatherMap.

Psttt... untuk demo ini, kita asumsikan fungsinya sudah punya akses ya!

2. Struktur HTML (Wadah Cuaca)

<div class="weather-card">
    <input type="text" id="city-input" placeholder="Masukkan nama kota...">
    <button id="search-btn">Cari Cuaca</button>

    <div id="weather-result" class="result-hidden">
        <h2 id="city-name">Jakarta</h2>
        <img id="weather-icon" src="" alt="icon">
        <h1 id="temperature">28°C</h1>
        <p id="description">Cerah Berawan</p>
        <div class="details">
            <span>Kelembapan: <b id="humidity">70%</b></span>
        </div>
    </div>
    <p id="error-msg" style="color: red;"></p>
</div>

3. Logika Fetch Data (Si Otak Aplikasi)

const apiKey = "MASUKKAN_API_KEY_MU_DI_SINI"; // Ganti dengan key asli
const btn = document.getElementById('search-btn');
const input = document.getElementById('city-input');

async function getByCity(city) {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=id`;
    
    try {
        const response = await fetch(url);
        
        if (!response.ok) throw new Error("Kota tidak ditemukan, Kay!");

        const data = await response.json();
        displayWeather(data);
    } catch (err) {
        showError(err.message);
    }
}

function displayWeather(data) {
    document.getElementById('weather-result').classList.remove('result-hidden');
    document.getElementById('error-msg').innerText = "";
    
    document.getElementById('city-name').innerText = data.name;
    document.getElementById('temperature').innerText = `${Math.round(data.main.temp)}°C`;
    document.getElementById('description').innerText = data.weather[0].description;
    document.getElementById('humidity').innerText = `${data.main.humidity}%`;
    
    // Ambil ikon cuaca dari server mereka
    const iconCode = data.weather[0].icon;
    document.getElementById('weather-icon').src = `![](https://openweathermap.org/img/wn/${iconCode}@2x.png)`;
}

function showError(msg) {
    document.getElementById('weather-result').classList.add('result-hidden');
    document.getElementById('error-msg').innerText = msg;
}

btn.addEventListener('click', () => getByCity(input.value));

💡 Analisis Proyek

• Dynamic URL: Kita masukin ${city} dan ${apiKey} langsung ke dalam string URL. Inilah gunanya Template Literals!
• Units=metric: Secara default, API cuaca pakai Kelvin. Kita tambahin parameter ini biar hasilnya Celsius.
• Error Handling: Kalau user ngetik kota yang gak ada (misal: "Planet Bekasi"), blok catch bakal nangkap error-nya dan nampilin pesan ke user.

❗ Tantangan Untukmu (Challenge)

1. Background Dynamic: Coba ganti warna background aplikasi kalau cuacanya "Hujan" jadi abu-abu, dan kalau "Cerah" jadi biru langit.
2. Auto-Fetch: Gunakan navigator.geolocation buat ngambil lokasi user otomatis pas pertama kali buka web!

🎯 Kesimpulan

Selamat! Kamu sudah menyelesaikan Season 3. Kamu bukan lagi sekadar belajar teori, tapi sudah bisa membangun "jembatan" antara komputermu dengan data di seluruh dunia. Aplikasi cuaca ini adalah bukti kalau kamu sudah siap jadi Web Developer beneran!