https://farahchallenge.netlify.app/src/index.js

1function displayForecast(response) {
2  let forecastElement = document.querySelector("#forecast");
3  let forecast = response.data.daily;
4
5  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
6
7  let forecastHTML = `<div class="forecast-row">`;
8
9  forecast.slice(0, 5).forEach(function (day) {
10    let date = new Date(day.time * 1000);
11    let dayName = days[date.getDay()];
12
13    forecastHTML += `
14      <div class="forecast-day">
15        <div class="forecast-day-name">${dayName}</div>
16        <div class="forecast-icon">
17          <img src="${day.condition.icon_url}" alt="${day.condition.description}" />
18        </div>
19        <div class="forecast-temperatures">
20          <span class="forecast-high">${Math.round(day.temperature.maximum)}°</span>
21          <span class="forecast-low">${Math.round(day.temperature.minimum)}°</span>
22        </div>
23      </div>
24    `;
25  });
26
27  forecastHTML += `</div>`;
28  forecastElement.innerHTML = forecastHTML;
29}
30
31function displayTemperature(response) {
32  let temperatureElement = document.querySelector("#current-temperature");
33  let temperature = Math.round(response.data.temperature.current);
34  let cityElement = document.querySelector("#current-city");
35  let descriptionElement = document.querySelector("#current-description");
36  let humidityElement = document.querySelector("#current-humidity");
37  let windElement = document.querySelector("#current-wind");
38  let dateElement = document.querySelector("#current-date");
39  let iconElement = document.querySelector("#current-icon");
40
41  iconElement.innerHTML = `<img src="${response.data.condition.icon_url}" alt="${response.data.condition.description}" />`;
42  cityElement.innerHTML = response.data.city;
43  temperatureElement.innerHTML = temperature;
44  descriptionElement.innerHTML = response.data.condition.description;
45  humidityElement.innerHTML = response.data.temperature.humidity;
46  windElement.innerHTML = Math.round(response.data.wind.speed);
47  dateElement.innerHTML = formatDate(new Date());
48}
49
50function search(event) {
51  event.preventDefault();
52  let searchInputElement = document.querySelector("#search-input");
53  let city = searchInputElement.value;
54
55  let apiKey = "b2a5adcct04b33178913oc335f405433";
56  let currentApiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
57  let forecastApiUrl = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=metric`;
58
59  axios.get(currentApiUrl).then(displayTemperature);
60  axios.get(forecastApiUrl).then(displayForecast);
61}
62
63function formatDate(date) {
64  let minutes = date.getMinutes();
65  let hours = date.getHours();
66  let day = date.getDay();
67
68  if (minutes < 10) {
69    minutes = `0${minutes}`;
70  }
71
72  if (hours < 10) {
73    hours = `0${hours}`;
74  }
75
76  let days = [
77    "Sunday", "Monday", "Tuesday", "Wednesday",
78    "Thursday", "Friday", "Saturday"
79  ];
80
81  let formattedDay = days[day];
82  return `${formattedDay} ${hours}:${minutes}`;
83}
84
85let searchForm = document.querySelector("#search-form");
86searchForm.addEventListener("submit", search);
87
88let currentDateElement = document.querySelector("#current-date");
89let currentDate = new Date();
90currentDateElement.innerHTML = formatDate(currentDate);