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