Apl Cuaca pertama saya

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

paparan fungsi Semasa(lokasi, Cuaca semasa) {
    jika (Cuaca semasa) {
        biarkan lastUpdatedDate = new Date(currentWeather.last_updated);
        biarkan cardHTML = `
            <div>



<p>Fungsi ini menjana kad yang memaparkan suhu semasa, keadaan cuaca dan butiran tambahan seperti kelajuan angin dan kelembapan. Ia mengemas kini halaman secara dinamik dengan memasukkan HTML yang dijana ke dalam DOM.</p>


<hr>

<ol>
<li>Memaparkan Ramalan 3 Hari</li>
</ol>

<p>Seterusnya, saya memaparkan ramalan cuaca untuk tiga hari akan datang. Ini dikendalikan oleh fungsi displayForecast():<br>
</p><pre class="brush:php;toolbar:false">fungsi paparanRamalan(Data ramalan) {
    biarkan forecastHTML = '';
    untuk (biar i = 1; i < forecastData.length; i ) {
        ramalanHTML = `
            <div>



<p>Fungsi ini melingkari data ramalan dan menjana kad untuk setiap dua hari seterusnya, menunjukkan suhu maksimum dan min, keadaan cuaca dan ikon.</p>


<hr>

<p>Kesimpulan</p>

<p>Membina apl cuaca ini merupakan latihan yang bagus untuk saya kerana saya belajar cara berinteraksi dengan API, memproses data JSON dan mengemas kini halaman web secara dinamik. Projek ini membantu saya mengukuhkan pengetahuan saya tentang JavaScript tak segerak, manipulasi DOM dan pengendalian acara.</p>

<p>Jika anda baru bermula dengan JavaScript dan API, apl cuaca ini ialah cara yang mudah tetapi berkesan untuk melatih kemahiran anda. Anda boleh melanjutkan projek ini dengan menambahkan lebih banyak ciri seperti pengendalian ralat, ramalan yang lebih terperinci atau juga mod gelap untuk UI.</p>


<hr>

<p>Jangan ragu untuk mencuba kod dan ubah suai untuk memenuhi keperluan anda. Beritahu saya jika anda mempunyai sebarang soalan atau cadangan!</p>