https://vanillalatte.netlify.app/src/verb.js

1function displayTemperature(response) {
2  let thisCity = document.querySelector("#present-city");
3  let presentDate = document.querySelector("#present-date");
4  let date = new Date(response.data.time * 1000);
5  let displayTemp = document.querySelector("#present-temperature-value");
6  let temperature = Math.round(response.data.temperature.current);
7  let icon = document.querySelector("#present-temperature-icon");
8  let conditions = document.querySelector("#present-conditions");
9  let humidity = document.querySelector("#present-humidity");
10  let wind = document.querySelector("#present-wind");
11
12  thisCity.innerHTML = response.data.city;
13  presentDate.innerHTML = formattedDate(date);
14  displayTemp.innerHTML = temperature;
15  icon.innerHTML = `<img src="${response.data.condition.icon_url}" id="present-temperature-icon"/>`;
16  conditions.innerHTML = response.data.condition.description;
17  humidity.innerHTML = `${response.data.temperature.humidity}%`;
18  wind.innerHTML = `${response.data.wind.speed} km/h`;
19
20  getForecast(response.data.city);
21}
22
23function formattedDate(date) {
24  let minutes = date.getMinutes();
25  let hours = date.getHours();
26  let days = [
27    "Sunday",
28    "Monday",
29    "Tuesday",
30    "Wednesday",
31    "Thurseday",
32    "Friday",
33    "Saturday",
34  ];
35  let day = days[date.getDay()];
36
37  if (hours < 10) {
38    hours = `0${hours}`;
39  }
40
41  if (minutes < 10) {
42    minutes = `0${minutes}`;
43  }
44
45  return `${day} <br /> ${hours}:${minutes}`;
46}
47
48function searchCity(city) {
49  let apiKey = "2903bd515o84e51d2d0at09a3a53f67a";
50  let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
51
52  axios.get(apiUrl).then(displayTemperature);
53}
54
55function handleSearchSubmit(event) {
56  event.preventDefault();
57  let presentCity = document.querySelector("#city-search-input");
58
59  searchCity(presentCity.value);
60}
61
62function formatDay(timestamp) {
63  let date = new Date(timestamp * 1000);
64  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
65
66  return days[date.getDay()];
67}
68
69function getForecast(city) {
70  let apiKey = "2903bd515o84e51d2d0at09a3a53f67a";
71  let apiUrl = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=metric`;
72  axios(apiUrl).then(displayForecast);
73}
74
75function displayForecast(response) {
76  let forecastText = "";
77
78  response.data.daily.forEach(function (day, index) {
79    if (index < 5) {
80      forecastText =
81        forecastText +
82        `<div class="present-city-forecast" id="present-city-forecast">
83      <div class="forecast-display-discs" id="forecast-details">
84        <div id="forecast-date">${formatDay(day.time)}</div>
85        <div id="forecast-temperature-value"> <strong>${Math.round(
86          day.temperature.maximum
87        )}ºC</strong> / ${Math.round(day.temperature.minimum)}ºC </div>
88        <div id="forecast-temperature-icon"><img src="${
89          day.condition.icon_url
90        }" id="forecast-temperature-icon"/></div>
91      </div>
92        </div>
93    `;
94    }
95  });
96
97  let forecastPrediction = document.querySelector("#forecast-details");
98  forecastPrediction.innerHTML = forecastText;
99}
100
101function revealMenu() {
102  let menu = document.querySelector("#info-drop");
103  menu.classList.toggle("revealFooterInfo");
104}
105
106function midnightArcadeTheme() {
107  let body = document.querySelector("body");
108  body.classList.toggle("midnightArcade");
109}
110
111let searchFormElement = document.querySelector("#city-search");
112searchFormElement.addEventListener("submit", handleSearchSubmit);
113
114let button = document.querySelector("#footer");
115button.addEventListener("click", revealMenu);
116
117button = document.querySelector("#midnight-arcade");
118button.addEventListener("click", midnightArcadeTheme);