script.js
// Request Open Weather API based on user input
Request Open Weather API based on user input
Request Open Weather API based on user input
function currentConditionsRequest(searchValue) {
    var queryURL = "https://api.openweathermap.org/data/2.5/weather?q=" + searchValue + "&units=imperial&appid=" + APIkey;
    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function(response){
        console.log(response);
        currentCity.text(response.name);
        currentCity.append("<small class='text-muted' id='current-date'>");
        $("#current-date").text("(" + currentDate + ")");
        currentCity.append("<img src='https://openweathermap.org/img/w/" + response.weather[0].icon + ".png' alt='" + response.weather[0].main + "' />" )
        currentTemp.text(response.main.temp);
        currentTemp.append("&deg;F");
        currentHumidity.text(response.main.humidity + "%");
        currentWindSpeed.text(response.wind.speed + "MPH");
        var lat = response.coord.lat;
        var lon = response.coord.lon;
        var UVurl = "https://api.openweathermap.org/data/2.5/uvi?&lat=" + lat + "&lon=" + lon + "&appid=" + APIkey;
        $.ajax({
            url: UVurl,
            method: "GET"
        }).then(function(response){
            UVindex.text(response.value);
        });
        var countryCode = response.sys.country;
        var forecastURL = "https://api.openweathermap.org/data/2.5/forecast?&units=imperial&appid=" + APIkey + "&lat=" + lat +  "&lon=" + lon;
        $.ajax({
            url: forecastURL,
            method: "GET"
        }).then(function(response){
            console.log(response);
            $('#five-day-forecast').empty();
            for (var i = 1; i < response.list.length; i+=8) {
                var forecastDateString = moment(response.list[i].dt_txt).format("L");
                console.log(forecastDateString);
                var forecastCol = $("<div class='col-12 col-md-6 col-lg forecast-day mb-3'>");
                var forecastCard = $("<div class='card'>");
                var forecastCardBody = $("<div class='card-body'>");
                var forecastDate = $("<h5 class='card-title'>");
                var forecastIcon = $("<img>");
                var forecastTemp = $("<p class='card-text mb-0'>");
                var forecastHumidity = $("<p class='card-text mb-0'>");
                $('#five-day-forecast').append(forecastCol);
                forecastCol.append(forecastCard);
                forecastCard.append(forecastCardBody);
                forecastCardBody.append(forecastDate);
                forecastCardBody.append(forecastIcon);
                forecastCardBody.append(forecastTemp);
                forecastCardBody.append(forecastHumidity);
                forecastIcon.attr("src", "https://openweathermap.org/img/w/" + response.list[i].weather[0].icon + ".png");
                forecastIcon.attr("alt", response.list[i].weather[0].main)
                forecastDate.text(forecastDateString);
                forecastTemp.text(response.list[i].main.temp);
                forecastTemp.prepend("Temp: ");
                forecastTemp.append("&deg;F");
                forecastHumidity.text(response.list[i].main.humidity);
                forecastHumidity.prepend("Humidity: ");
                forecastHumidity.append("%");
            }
        });
    });
}
function currentConditionsRequest ( searchValue ) { var queryURL = "https://api.openweathermap.org/data/2.5/weather?q=" + searchValue + "&units=imperial&appid=" + APIkey ; $ . ajax ( { url : queryURL , method : "GET" } ) . then ( function ( response ) { console . log ( response ) ; currentCity . text ( response . name ) ; currentCity . append ( "<small class='text-muted' id='current-date'>" ) ; $ ( "#current-date" ) . text ( "(" + currentDate + ")" ) ; currentCity . append ( "<img src='https://openweathermap.org/img/w/" + response . weather [ 0 ] . icon + ".png' alt='" + response . weather [ 0 ] . main + "' />" ) currentTemp . text ( response . main . temp ) ; currentTemp . append ( "&deg;F" ) ; currentHumidity . text ( response . main . humidity + "%" ) ; currentWindSpeed . text ( response . wind . speed + "MPH" ) ; var lat = response . coord . lat ; var lon = response . coord . lon ; var UVurl = "https://api.openweathermap.org/data/2.5/uvi?&lat=" + lat + "&lon=" + lon + "&appid=" + APIkey ; $ . ajax ( { url : UVurl , method : "GET" } ) . then ( function ( response ) { UVindex . text ( response . value ) ; } ) ; var countryCode = response . sys . country ; var forecastURL = "https://api.openweathermap.org/data/2.5/forecast?&units=imperial&appid=" + APIkey + "&lat=" + lat + "&lon=" + lon ; $ . ajax ( { url : forecastURL , method : "GET" } ) . then ( function ( response ) { console . log ( response ) ; $ ( '#five-day-forecast' ) . empty ( ) ; for ( var i = 1 ; i < response . list . length ; i += 8 ) { var forecastDateString = moment ( response . list [ i ] . dt_txt ) . format ( "L" ) ; console . log ( forecastDateString ) ; var forecastCol = $ ( "<div class='col-12 col-md-6 col-lg forecast-day mb-3'>" ) ; var forecastCard = $ ( "<div class='card'>" ) ; var forecastCardBody = $ ( "<div class='card-body'>" ) ; var forecastDate = $ ( "<h5 class='card-title'>" ) ; var forecastIcon = $ ( "<img>" ) ; var forecastTemp = $ ( "<p class='card-text mb-0'>" ) ; var forecastHumidity = $ ( "<p class='card-text mb-0'>" ) ; $ ( '#five-day-forecast' ) . append ( forecastCol ) ; forecastCol . append ( forecastCard ) ; forecastCard . append ( forecastCardBody ) ; forecastCardBody . append ( forecastDate ) ; forecastCardBody . append ( forecastIcon ) ; forecastCardBody . append ( forecastTemp ) ; forecastCardBody . append ( forecastHumidity ) ; forecastIcon . attr ( "src" , "https://openweathermap.org/img/w/" + response . list [ i ] . weather [ 0 ] . icon + ".png" ) ; forecastIcon . attr ( "alt" , response . list [ i ] . weather [ 0 ] . main ) forecastDate . text ( forecastDateString ) ; forecastTemp . text ( response . list [ i ] . main . temp ) ; forecastTemp . prepend ( "Temp: " ) ; forecastTemp . append ( "&deg;F" ) ; forecastHumidity . text ( response . list [ i ] . main . humidity ) ; forecastHumidity . prepend ( "Humidity: " ) ; forecastHumidity . append ( "%" ) ; } } ) ; } ) ; }
Request Open Weather API based on user input
Request Open Weather API based on user input
// Formulate URL for AJAX api call // Make AJAX call // AJAX Call for UV index // console.log("UV call: ") // console.log(response); // AJAX call for 5-day forecast // console.log(response.list[i].dt_txt); // console.log(response.list[i].main.temp); // console.log(response.list[i].main.humidity);