Weather-App/script.js at main · ehuieric/Weather-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
let searchhistory = localStorage.getItem(`searchhistory`);
if(!searchhistory) {
    localStorage.setItem(`searchhistory` , `[]`);
    searchhistory = "[]";
}

function formatDate (date) {
  return moment.unix(date).format("MM/DD/YYYY");

}

function apisearch (cityname) {

    var APIkey = `56396c503c5dc56ffc899f8c7489582d`;
    var key = '7YBjjSaewx5BgAnD4Sxe61fQ83dHuABQ';
    var url1= `https://www.mapquestapi.com/geocoding/v1/address?key=${key}&location=${cityname}`;

    $.ajax({
        url: url1,
        method: "GET",
        headers: {
            "x-requested-with": "xhr"
        }
    }).then(function(response){

        const lat = response.results[0].locations[0].displayLatLng.lat;
        const lon = response.results[0].locations[0].displayLatLng.lng;
        var url = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=alert,minutely&appid=${APIkey}&units=imperial`;
        var queryurl = `https://cors-anywhere.herokuapp.com/` + url;


        $.ajax({
            url: queryurl,
            method: "GET",
            headers: {
                "x-requested-with": "xhr"
            }
        }).then(function (data) {
            console.log('weather', data);
            $("#results").empty();
            $("#results").append(`<div class="info">
                                    <h1 class="city">
                                    ${response.results[0].providedLocation.location}
                                      <span>
                                       ${formatDate(data.current.dt)}
                                      </span>
                                    </h1>
                                    <p>Temperature: ${data.current.temp} F</p>
                                    <p>Humidity: ${data.current.humidity}%</p>
                                    <p>wind speed: ${data.current.wind_speed} MPH</p>
                                    <p>UV Index: ${data.current.uvi} </p>
                                </div>`);


            $("#futureTemp").empty();
            $("#forecastTitle").empty();
            $("#forecastTitle").append('<h2>5-Day Forecast</h2>');

            for(let i = 1; i < 6; i++) {
                const forecast = data.daily[i];
                const date = formatDate(data.daily[i].dt);
                const iconurl = `https://openweathermap.org/img/w/${data.daily[i].weather[0].icon}.png`;

                $("#futureTemp").append (`<div class="col-sm">
                                            <div class="box">
                                            <p>${date}</p>
                                            <div id="icon">
                                              <img src=${iconurl} alt="weather icon">
                                            </div>
                                            <div>temp: ${data.daily[i].temp.day}</div>
                                            <p>humidity: ${data.daily[i].humidity}</p>
                                            </div>
                                       </div>`)


            }

        })
    })
}

const cityarray = JSON.parse(searchhistory);

for(let i = 0; i < cityarray.length; i++) {

    const onecity = cityarray[i];

    $('#searchhistory').prepend(`<div class="cityname">
                                 <button class="onecity" id="onecity-${i}">${onecity}</button>
                             </div>`);

    $(`#onecity-${i}`).on("click", function () {
        apisearch(onecity);
    })

}

$('#search').on("click", function () {
    const  cityname = $('input[id=cityname]').val();

    cityarray.push(cityname);
    localStorage.setItem(`searchhistory` , JSON.stringify(cityarray));

   apisearch(cityname);

})