初めての天気アプリ

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);
});

関数 displayCurrent(location, currentWeather) {
    if (現在の天気) {
        lastUpdatedDate = 新しい日付(currentWeather.last_updated);
        let CardHTML = `
            <div>



<p>この機能は、現在の温度、気象条件、風速や湿度などの追加の詳細を表示するカードを生成します。生成された HTML を DOM に挿入することで、ページを動的に更新します。</p>


<hr>

<ol>
<li>3日間の天気予報を表示する</li>
</ol>

<p>次に、今後3日間の天気予報を表示します。これは、displayForecast() 関数によって処理されます:<br>
</p>
<pre class="brush:php;toolbar:false">関数 displayForecast(forecastData) {
    予測HTML = '';
    for (let i = 1; i <forecastdata.length i>



<p>この関数は予測データをループし、最高気温と最低気温、気象状況、アイコンを示すカードを次の 2 日間ごとに生成します。</p>


<hr>

<p>結論</p>

<p>この天気アプリの構築は、API の操作方法、JSON データの処理方法、Web ページの動的更新方法を学ぶための素晴らしい練習になりました。このプロジェクトは、非同期 JavaScript、DOM 操作、イベント処理の知識を固めるのに役立ちました。</p>

<p>JavaScript と API を始めたばかりの場合、この天気アプリはスキルを練習するためのシンプルかつ強力な方法です。エラー処理、より詳細な予測、UI のダーク モードなどの機能を追加して、このプロジェクトを拡張できます。</p>


<hr>

<p>自由にコードを試して、ニーズに合わせて微調整してください。ご質問やご提案がございましたら、お知らせください。</p>


          </forecastdata.length>