UWBC-Weather/script.js at main · JessicaDao/UWBC-Weather · 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
var apiKey = "562517dc15ed5983189073c3d202dae6";
var currentCity = "#currentCity";
var tempEl = "#temp";
var humidityEl = "#humidity";
var windEl = "#wind";
var uvIndexEl = "#ultraVI";
let weatherDesc = "#weatherDesc";
let lat = "";
let lon = "";

// City Submit Button
document
  .querySelector(".search-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    var cityInput = document.querySelector("#inputValue").value;
    if (document.getElementById("inputValue").value === "") {
      alert("Please enter a city.");
    } else if (cityInput === false) {
      alert("Please choose a different city.");
    } else {
      getWeather(cityInput);
      saveToStorage(cityInput);
      renderSaveBtns();
    }
  });

function saveToStorage(cityInput) {
  var inputDataSaved = JSON.parse(localStorage.getItem("searchCity")) || [];
  inputDataSaved.push(cityInput);
  localStorage.setItem("searchCity", JSON.stringify(inputDataSaved));
}

function renderSaveBtns() {
  let inputDataSaved = JSON.parse(localStorage.getItem("searchCity")) || [];
  if (inputDataSaved === null);

  document.querySelector("#searchHistory").innerHTML = "";
  inputDataSaved.forEach(function (citySearches) {
    let searchHistoryBtn = document.createElement("button");
    searchHistoryBtn.classList.add("saved-city-button");
    searchHistoryBtn.innerHTML = citySearches;
    document.querySelector("#searchHistory").prepend(searchHistoryBtn);
  });
}
renderSaveBtns();

var savedCityButtons = document.querySelectorAll(".saved-city-button");
savedCityButtons.forEach(function (eachButton) {
  eachButton.addEventListener("click", function (e) {
    var city = eachButton.innerHTML;
    getWeather(city);
  });
});

// api
function getWeather(cityName) {
  let queryURLForToday = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=imperial&appid=${apiKey}`;

  fetch(queryURLForToday)
    .then(function (weatherResponse) {
      return weatherResponse.json();
    })
    .then(function (data) {
      console.log(data);
      todayWeather(cityName, data);
      let queryURLForFiveDay = `https://api.openweathermap.org/data/2.5/onecall?lat=${data.coord.lat}&lon=${data.coord.lon}&units=imperial&appid=${apiKey}`;
      fetch(queryURLForFiveDay)
        .then(function (weatherResponse) {
          return weatherResponse.json();
        })
        .then(function (fiveDayData) {
          weekWeather(fiveDayData);
        });
    });
}

function todayWeather(cityName, data) {
  document.querySelector("#currentDate").innerHTML = moment().format(
    "MMMM Do, YYYY"
  );
  document.querySelector("#weatherDesc").innerHTML =
    data.weather[0].description;
  document.querySelector(
    "#currentIcon"
  ).innerHTML = `<img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png"/>`;
  document.querySelector("#currentCity").innerHTML = cityName;
  document.querySelector("#temp").innerHTML =
    Math.round(data.main.temp) + "°F";
  document.querySelector("#humidity").innerHTML = data.main.humidity + "%";
  document.querySelector("#wind").innerHTML =
    Math.round(data.wind.speed) + "mph";

  $("#card-text").empty();
}

function weekWeather(data) {
  let currentUVI = (document.querySelector(
    "#currentUVI"
  ).innerHTML = Math.round(data.current.uvi));

  document.querySelector("#weekContain").innerHTML = "";
  for (var i = 0; i < 5; i++) {
    let forecastDates = moment()
      .add(i + 1, "days")
      .format("ddd MM/DD/YYYY");
    let day = document.createElement("div");
    day.innerHTML = [
      `<h5>${forecastDates}</h5>
    <img src="https://openweathermap.org/img/wn/${
      data.daily[i].weather[0].icon
    }@2x.png">
    <p>${data.daily[i].weather[0].description}</p>
    <p>Temperature: ${Math.round(data.daily[i].temp.day)}°F</p>
    <p>Humidity: ${data.daily[i].humidity}%</p>`,
    ];
    document.querySelector("#weekContain").appendChild(day);
  }
  uviBadge(data);
  $("#card-text").empty();
}

function uviBadge(data) {
  let currentUVI = $("#currentUVI");
  currentUVI.innerHTML = Math.round(data.current.uvi);

  if (data.current.uvi <= 2) {
    currentUVI.addClass("badge badge-success");
  } else if (data.current.uvi > 2 && data.current.uvi <= 5) {
    currentUVI.addClass("badge badge-warning");
  } else if (data.current.uvi > 5) {
    currentUVI.addClass("badge badge-danger");
  }
}