Perjalanan Reaksi Saya: Hari ke-13

Jam Projek: Apl Cuaca

Hari ini, saya mencipta apl cuaca ringkas yang mengambil data cuaca masa nyata daripada OpenWeather API. Apl ini membolehkan pengguna mencari bandar dan memaparkan maklumat cuaca penting, seperti suhu, kelembapan, kelajuan angin dan keadaan cuaca.

Sorotan Kod Utama

1. Butiran API Aplikasi ini menggunakan OpenWeather API dengan unit metrik untuk suhu.

const apiKey = "789b1d530**********"; 
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=metric&q=";

2.Pemilih Pertanyaan
Elemen ini menyambungkan struktur HTML dengan JavaScript:

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");

3.Mengambil Data Cuaca
Fungsi checkWeather() menghantar permintaan API dan mengendalikan respons.

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();

        // Updating Weather Information
        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/hr";

        // Dynamic Weather Icon Update
        if (data.weather[0].main == "Clouds") {
            weatherIcon.src = "images/clouds.png";
        } else if (data.weather[0].main == "Rain") {
            weatherIcon.src = "images/rain.png";
        } else if (data.weather[0].main == "Clear") {
            weatherIcon.src = "images/clear.png";
        } else if (data.weather[0].main == "Drizzle") {
            weatherIcon.src = "images/drizzle.png";
        } else if (data.weather[0].main == "Mist") {
            weatherIcon.src = "images/mist.png";
        }

        document.querySelector(".weather").style.display = "block";
        document.querySelector(".error").style.display = "none";
    }
}

4.Pendengar Acara untuk Carian
Ini menambah interaktiviti pada butang carian:

searchBtn.addEventListener("click", () => {
    checkWeather(searchBox.value);
});

Apa yang Saya Pelajari

1. Penyepaduan API:

Mengambil data menggunakan fetch() dan mengendalikan respons dengan tidak segerak/menunggu.
Kepentingan mengurus kunci API dengan selamat (kunci ini adalah untuk tujuan ujian sahaja).

2.Pengendalian Ralat:

Memaparkan mesej ralat apabila bandar yang tidak sah dimasukkan atau jika permintaan API gagal.

3.Kemas Kini UI Dinamik:
Mengemas kini kandungan pada halaman secara dinamik berdasarkan data API.
Paparan bersyarat untuk ikon cuaca yang berbeza.

4.CSS & Responsif:

Apl ini menggunakan UI berasaskan kad ringkas. Fail styles.css yang berasingan telah digunakan untuk mengurus reka letak dan reka bentuk.

5.Manipulasi DOM JavaScript:
Menggunakan querySelector dan innerHTML untuk berinteraksi dengan elemen HTML.

Pemikiran Akhir
Membina apl cuaca ini sangat menarik dan mengukuhkan pengetahuan saya tentang JavaScript, panggilan API dan manipulasi DOM. Semasa saya meneruskan, saya tidak sabar-sabar untuk mengalihkan projek sedemikian kepada React untuk pendekatan yang lebih berasaskan komponen. ?

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari ke-13. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!