https://sarahiseffy-weatherapp-forecast.netlify.app/src/script.js

1function refreshWeather(response) {
2  //2nd function for the temperature for API data retrieval
3  let cityElement = document.querySelector("#city"); //to target the city variable make sure to add id
4  let temperatureElement = document.querySelector("#weather-app-temp-value"); //targets the weather temperature value element with the id
5  let temperature = response.data.temperature.current;
6  let descriptionElement = document.querySelector("#weather-description"); //targets the weather description value element
7  let humidityElement = document.querySelector("#humidity");
8  let windElement = document.querySelector("#wind");
9  let timeElement = document.querySelector("#time");
10  let date = new Date(response.data.time * 1000); // new Date code to parse the time code
11  let iconElement = document.querySelector("#weather-app-icon"); //this will target the icon element value
12
13  cityElement.innerHTML = `${response.data.city}`; // this will change the city element with what is being logged on the searchInput
14  temperatureElement.innerHTML = Math.round(temperature); //this will change the temperature related to the city data the user has searched.
15  descriptionElement.innerHTML = response.data.condition.description; //targets the description value element id
16  humidityElement.innerHTML = `${response.data.temperature.humidity}%`; //targets the humidity value element id
17  windElement.innerHTML = `${response.data.wind.speed}km/h`; //targets the win value element id
18  timeElement.innerHTML = formatDate(date); //this will change the time using function created to format date properly
19  iconElement.innerHTML = `<img src="${response.data.condition.icon_url}" class="weather-app-icon">`; //this will change the icon and pull image from API
20
21  getForecast(response.data.city);
22}
23
24function formatDate(date) {
25  //create this function to get better format of the time
26
27  let hours = date.getHours();
28  let minutes = date.getMinutes();
29  let days = [
30    "Sunday",
31    "Monday",
32    "Tuesday",
33    "Wednesday",
34    "Thursday",
35    "Friday",
36    "Saturday",
37  ];
38  let day = days[date.getDay()];
39
40  if (minutes < 10) {
41    //if the time is less than 10 hours, to add "0" before the minutes value (example 1:01 instead of 1:1)
42    minutes = `0${minutes}`;
43  }
44
45  return `${day}, ${hours}:${minutes}`; //this will return the proper format output
46}
47
48function searchCity(city) {
49  //1st function for the city for API data retrieval
50
51  let apiKey = "47c53bba2097318c33196010f07cot74";
52  let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
53
54  axios.get(apiUrl).then(refreshWeather);
55}
56
57function handleSearchSubmit(event) {
58  //function for the search bar to prevent blank search
59  event.preventDefault();
60  let searchInput = document.querySelector("#search-input"); //this will target the form that will the user will input.
61
62  searchCity(searchInput.value); // this is added for API function use
63}
64
65let searchFormElement = document.querySelector("#search-form-id"); //targets the search form
66searchFormElement.addEventListener("submit", handleSearchSubmit); //this will activate the button whenever the user clicks the search button
67
68
69function getForecast(city) {
70  //function to get the API for forecast
71
72  let apiKey = "47c53bba2097318c33196010f07cot74";
73  let apiUrl = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=metric`;
74
75  axios(apiUrl).then(displayForecast);
76}
77
78function formatDay(timestamp) {  //create this function to convert the day format instead of showing as timestamp
79
80  let date = new Date(timestamp * 1000);
81  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
82
83  return days[date.getDay()];
84}
85
86function displayForecast(response) {
87  //Create function to display forecast
88  console.log(response.data);
89
90 
91  let forecastHtml = "";
92
93  response.data.daily.forEach(function (day, index) {
94    //this function is a loop function
95
96    if (index < 5) {
97
98    forecastHtml =
99      forecastHtml +
100
101      `
102   <div class="weather-forecast-day">
103   
104    <div class="weather-forecast-date">${formatDay(day.time)}
105    </div>
106
107    <img src="${day.condition.icon_url}" />
108
109    <div class="weather-forecast-temperatures">
110    <div class="weather-forecast-temperature">
111    <strong>${Math.round(day.temperature.maximum)}º</strong>
112    </div>
113    <div class="weather-forecast-temperature">${Math.round(day.temperature.minimum)}º</div>
114    </div>
115    </div>
116    `;
117    }
118
119  });
120
121
122  let forecastElement = document.querySelector("#forecast");
123  forecastElement.innerHTML = forecastHtml;
124}
125
126searchCity("Prague"); //to default to this city once refreshed