Question

添加输入框以输入城市名称在页面上应用提交按钮当用户输入城市时，请确保函数调用openweather api。

输入城市时，显示结果应包括城市名称，当前温度，天气描述，最低温度，最高温度。

选择城市后，结果应显示，但添加城市时也应更改 if语句，用于检查天气是否高于85度或低于40度。

$(function () {

    $('#search').click((event) => {
        event.preventDefault()
        displayCity(event.target.value);
    })

    function displayCity(weather) {
        searchCity(weather);
        // note added async to function
        function searchCity(search) {
            const url = 'https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=f674d7dcd4f4a4860d1b6eede3761c6c'


            $.getJSON(url, function(json) {
                console.log(json);
                if (search.status >= 200 && search.status < 400) {
                   let temp = obj.main.temp;
                }
                else{
                    console.log("The city doesn't exist! Kindly check");
                 }
            });

            // make API request using #.ajax()
            $.ajax({
                url: url,
                type: 'GET',
                data: { q: search }

            })
            .done((response) => {
                console.log(response)
                // get response from successful API call and
                // pass response data to the updateUi() function
                chooseCity(response)
            })
            .fail((error) => {
                console.log(error)
                alert('an error occurred')
            })
         }



         function chooseCity(city) {
          const cityName = city.name
          const cityTemp = city.main.temp
          const cityDescription = city.weather.description
          const cityTempMin = city.temp_min
          const cityTempMax = city.temp_max

          //adding jquery to update the UI
          $('.city').text(cityName)
          $('.temp').text(cityTemp)
          $('.description').text(cityDescription)
          $('.tempMin').text(cityTempMin)
          $('.tempMax').text(cityTempMax)
         }

    }
});

放置城市时，天气Api没有出现在屏幕上

0 个答案: