나의 첫 날씨 앱

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 (현재날씨) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        카드HTML = `
            <div>



<p>이 기능은 현재 온도, 날씨 상태, 풍속, 습도 등의 추가 세부정보를 표시하는 카드를 생성합니다. 생성된 HTML을 DOM에 삽입하여 페이지를 동적으로 업데이트합니다.</p>


<hr>

<ol>
<li>3일 예보 표시</li>
</ol>

<p>다음으로 앞으로 3일간의 일기예보를 표시합니다. 이는 displayForecast() 함수에 의해 처리됩니다.<br>
</p><pre class="brush:php;toolbar:false">함수 displayForecast(forecastData) {
    ForecastHTML = '';
    for (let i = 1; i < ForecastData.length; i ) {
        예측HTML = `
            <div>



<p>이 기능은 예측 데이터를 반복하여 다음 이틀 동안의 카드를 생성하여 최고 및 최저 기온, 기상 조건, 아이콘을 표시합니다.</p>


<hr>

<p>결론</p>

<p>API와 상호작용하고, JSON 데이터를 처리하고, 웹페이지를 동적으로 업데이트하는 방법을 배웠기 때문에 이 날씨 앱을 구축하는 것은 저에게 큰 도움이 되었습니다. 이 프로젝트는 비동기 JavaScript, DOM 조작 및 이벤트 처리에 대한 지식을 확고히 하는 데 도움이 되었습니다.</p>

<p>JavaScript와 API를 이제 막 시작했다면 이 날씨 앱은 기술을 연습할 수 있는 간단하면서도 강력한 방법입니다. 오류 처리, 더 자세한 예측 또는 UI의 어두운 모드와 같은 더 많은 기능을 추가하여 이 프로젝트를 확장할 수 있습니다.</p>


<hr>

<p>코드를 자유롭게 시험해보고 필요에 맞게 수정해 보세요. 질문이나 제안 사항이 있으면 알려주세요!</p>