https://meteo-rahelweatherapp.netlify.app/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 windElement = document.querySelector("#wind");
8    let timeElement = document.querySelector("#time");
9    let date = new Date(response.data.time = 1000);
10    let iconElement = document.querySelector("#icon-url")
11
12
13
14    cityElement.innerHTML = response.data.city;
15    temperatureElement.innerHTML =  Math.round(temperature);   
16    descriptionElement.innerHTML = response.data.condition.description;
17    humidityElement.innerHTML =  `${response.data.temperature.humidity}%`;
18    windElement.innerHTML = `${response.data.wind.speed} km/hr`;
19    timeElement.innerHTML = formatDate(date);
20    iconElement.innerHTML = `<img src = "${response.data.condition.icon_url}" class="weather-app-icon" />`;
21
22    getForecast(response.data.city);
23}
24
25function formatDate(date){
26
27    let minutes = date.getMinutes();
28    let hours = date.getHours();
29    let days = ["sunday","monday","tuesday","wednesday","thursday","friday", "saturday"];
30    let day = days[date.getDay()];
31    if (minutes < 10) {
32        minutes =`0${minutes}`;
33    }
34
35
36    return  `${day} ${hours}:${minutes}`;
37}
38function searchCity(city){
39    let apiKey = "200cc43bt60312a3e9528fo8814ed375";
40    let apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
41axios.get(apiUrl).then(refreshWeather);
42}
43
44function handleSearchSubmit(event){
45    event.preventDefault();
46    let searchInput = document.querySelector("#search-forms-input");
47    
48    searchCity(searchInput.value);
49    }
50
51function formatDay(timetemp){
52    let date = new Date(timetemp * 1000);
53    let days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
54    return days[date.getDay()];
55}
56    function getForecast(city){
57        let apiKey ="200cc43bt60312a3e9528fo8814ed375";
58        let apiUrl =` https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}&units=metric`;
59        axios(apiUrl).then(displayForecast);
60    }
61function displayForecast(response){
62     let forecastHtml = "";
63
64     response.data.daily.forEach(function (day,index) {
65        if (index<5){
66    forecastHtml = forecastHtml +
67    `<div class="weather-forecast-day">
68                <div class="weather-forecast-date"> ${formatDay(day.time)} </div>
69               <img src="${day.condition.icon_url}" class="weather-forecast-icon"/>
70               <div class="weather-forecast-degrees"> 
71                 <div class="weather-forecast-degree"> 
72                  <strong>${Math.round(day.temperature.minimum)}°</strong>
73                  </div>
74                  <div class="weather-forecast-degree"> ${Math.round(day.temperature.maximum)}°</div>
75                </div>
76                </div>`;}
77});
78let forecastElement = document.querySelector("#forecast");     
79     forecastElement.innerHTML = forecastHtml
80     }   
81    
82let searchFormElement = document.querySelector("#search-form");
83searchFormElement.addEventListener("submit", handleSearchSubmit);
84
85searchCity("paris");
86