javascript weather app

1// Full tutorial: https://www.youtube.com/watch?v=WZNG8UomjSI
2
3fetch(
4  "https://api.openweathermap.org/data/2.5/weather?q=" +
5    city +
6    "&units=metric&appid=" +
7    apiKey
8)
9  .then((response) => response.json())
10  .then((data) => this.displayWeather(data));

1// Declaring the variables
2let lon;
3let lat;
4let temperature = document.querySelector(".temp");
5let summary = document.querySelector(".summary");
6let loc = document.querySelector(".location");
7let icon = document.querySelector(".icon");
8const kel = 273;
9  
10window.addEventListener("load", () => {
11  if (navigator.geolocation) {
12    navigator.geolocation.getCurrentPosition((position) => {
13      console.log(position);
14      lon = position.coords.longitude;
15      lat = position.coords.latitude;
16  
17      // API ID
18      const api = "YOUR API KEY";
19  
20      // API URL
21      const base =
22`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&` +
23`lon=${lon}&appid=YOUR API KEY`;
24  
25      // Calling the API
26      fetch(base)
27        .then((response) => {
28          return response.json();
29        })
30        .then((data) => {
31          console.log(data);
32          temperature.textContent = 
33              Math.floor(data.main.temp - kel) + "°C";
34          summary.textContent = data.weather[0].description;
35          loc.textContent = data.name + "," + data.sys.country;
36          let icon1 = data.weather[0].icon;
37          icon.innerHTML = 
38              `<img src="https://openweathermap.org/img/w/${icon1}.png">`;
39        });
40    });
41  }
42});