https://erika-cast.netlify.app/src/index.js

1function refreshWeather(response) {
2  let temperatureElement = document.querySelector("#temperature");
3  let temperature = response.data.temperature.current;
4  let cityElement = document.querySelector("#city");
5  let descriptionElement = document.querySelector("#description");
6  let humidityElement = document.querySelector("#humidity");
7  let windSpeedElement = document.querySelector("#wind-speed");
8  let timeElement = document.querySelector("#time");
9  let date = new Date(response.data.time * 1000);
10  let iconElement = document.querySelector("#icon");
11
12  cityElement.innerHTML = response.data.city;
13  timeElement.innerHTML = formatDate(date);
14  descriptionElement.innerHTML = response.data.condition.description;
15  humidityElement.innerHTML = `${response.data.temperature.humidity}%`;
16  windSpeedElement.innerHTML = `${response.data.wind.speed}km/h`;
17  temperatureElement.innerHTML = Math.round(temperature);
18  iconElement.innerHTML = `<img src="${response.data.condition.icon_url}" class="weather-app-icon" />`;
19
20  getForecast(response.data.city);
21}
22
23function formatDate(date) {
24  let minutes = date.getMinutes();
25  let hours = date.getHours();
26  let days = [
27    "Sunday",
28    "Monday",
29    "Tuesday",
30    "Wednesday",
31    "Thursday",
32    "Friday",
33    "Saturday",
34  ];
35  let day = days[date.getDay()];
36
37  if (minutes < 10) {
38    minutes = `0${minutes}`;
39  }
40
41  return `${day} ${hours}:${minutes}`;
42}
43
44function searchCity(city) {
45  let apiKey = "b2a5adcct04b33178913oc335f405433";
46  let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
47  axios.get(apiUrl).then(refreshWeather);
48}
49
50function handleSearchSubmit(event) {
51  event.preventDefault();
52  let searchInput = document.querySelector("#search-form-input");
53
54  searchCity(searchInput.value);
55}
56
57function formatDay(timestamp) {
58  let date = new Date(timestamp * 1000);
59  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
60
61  return days[date.getDay()];
62}
63
64function getForecast(city) {
65  let apiKey = "b2a5adcct04b33178913oc335f405433";
66  let apiUrl = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=metric`;
67  axios(apiUrl).then(displayForecast);
68}
69
70function displayForecast(response) {
71  let forecastHtml = "";
72
73  response.data.daily.forEach(function (day, index) {
74    if (index < 8) {
75      forecastHtml =
76        forecastHtml +
77        `
78      <div class="weather-forecast-day">
79        <div class="weather-forecast-date">${formatDay(day.time)}</div>
80
81        <img src="${day.condition.icon_url}" class="weather-forecast-icon" />
82        <div class="weather-forecast-temperatures">
83          <div class="weather-forecast-temperature">
84            <strong>${Math.round(day.temperature.maximum)}º</strong>
85          </div>
86          <div class="weather-forecast-temperature">${Math.round(
87            day.temperature.minimum
88          )}º</div>
89        </div>
90      </div>
91    `;
92    }
93  });
94
95  let forecastElement = document.querySelector("#forecast");
96  forecastElement.innerHTML = forecastHtml;
97}
98
99let searchFormElement = document.querySelector("#search-form");
100searchFormElement.addEventListener("submit", handleSearchSubmit);
101
102searchCity("Mexico");