MyWeatherApp/app.js at main · 169233/MyWeatherApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
let now = new Date()
let hour = now.getHours()
if(hour<10){
  hour=`0${hour}`
}
let minutes = now.getMinutes()
if(minutes<10){
  minutes=`0${minutes}`
}

let fullTime= (`${hour}:${minutes}`)
let showTime = document.querySelector("#time")
showTime.innerHTML=`${fullTime}`

let days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ];
let day = days[now.getDay()];
let showDay= document.querySelector("#weekDay")
showDay.innerHTML=`${day}`

let year=now.getFullYear()
let months = [
        "Jan",
        "Feb",
        "March",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Augu",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ];
let month = months[now.getMonth()];

let numberDate=now.getDate()
let showFullDate=document.querySelector("#date")
showFullDate.innerHTML=`${numberDate}. ${month} ${year}`

function currentForecast(response){
  let temperature = Math.round(response.data.main.temp)
  let showTemp = document.querySelector("#celsium")
  showTemp.innerHTML=`${temperature}`

  let headline = response.data.name
  let head=document.querySelector("h1")
  head.innerHTML=`${headline}`

  let description = response.data.weather[0].main
  let showDescription=document.querySelector("#description")
  showDescription.innerHTML=`${description}`

  let humidity=response.data.main.humidity
  let showHumidity=document.querySelector("#humidity")
  showHumidity.innerHTML=` ${humidity}`

  let wind= Math.round(response.data.wind.speed)
  let showWind=document.querySelector("#wind")
  showWind.innerHTML=` ${wind}`

  let country=response.data.sys.country
  let showCountry=document.querySelector("#country")
  showCountry.innerHTML=` ${country}`

  let icon=response.data.weather[0].icon
  let showIcon=document.querySelector("#icon")
  showIcon.innerHTML=`<img src="http://openweathermap.org/img/wn/${icon}@2x.png"/src>`;

 getForecast(response.data.coord)
}

function searchCity(city){
let apiUrl = `${mainApi}q=${city}&appid=${apiKey}&units=${unit}`;
axios.get(apiUrl).then(currentForecast);
}

function showCity(event){
event.preventDefault()
let input= document.querySelector("#searchCity")
let city = input.value
searchCity(city);
}

function handlePosition(position){
let lat = position.coords.latitude
let lon=position.coords.longitude
let apiUrlLocation = `${mainApi}lat=${lat}&lon=${lon}&appid=${apiKey}&units=${unit}`;
axios.get(apiUrlLocation).then(currentForecast)
}

function currentLocation(event){
event.preventDefault()
navigator.geolocation.getCurrentPosition(handlePosition)
}

function getForecast(coordinate){
 let apiKeyFore="f8e6a9e3d6fde87cb38868da460b1371"
 let apiUrlForecast=`https://api.openweathermap.org/data/2.5/onecall?lat=${coordinate.lat}&lon=${coordinate.lon}&appid=${apiKeyFore}&units=${unit}`
axios.get(apiUrlForecast).then(nextForecast)
}

function formatDay(timestamp){
  let date= new Date(timestamp*1000)
  let day=date.getDay()
  let days = [
        "Sun",
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
      ];
  return days[day]
}

function nextForecast(response){
let dailyForecast=response.data.daily
console.log(dailyForecast)
  let forecast=document.querySelector("#nextForecast")
  let insideHTML=`<div class="row">`

  dailyForecast.forEach(function(forecastDay,index){
    if (index<6) {
   insideHTML=insideHTML + `
        <div class="col-2" >
          <div>
          ${formatDay(forecastDay.dt)}
          </div>
          <img src="http://openweathermap.org/img/wn/${forecastDay.weather[0].icon}@2x.png"/src>
          <div class="tempForecast">${Math.round(forecastDay.temp.max)}<span> °C</span></div>
        </div>
        `;}
      }) ;
  insideHTML=insideHTML + `</div>`;
  forecast.innerHTML=insideHTML;
}

let form=document.querySelector("#enterCity")
form.addEventListener("submit",showCity)

let button=document.querySelector("#location")
button.addEventListener("click",currentLocation)

let unit = "metric";
let apiKey = "78fc98c085614cc01c7a0b894f6604c6";
let mainApi = "https://api.openweathermap.org/data/2.5/weather?"

searchCity("Prague")