WeatherApp/script.js at master · timstallinger/WeatherApp · 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
// get weather data from openweathermap.org according to search query
// and display it on the screen
// the background image is changed according to the search location

let weather = {
    apiKey: "SECRET",
    fetchWeather: function (city) {
        // fetch weather data from openweathermap.org
        fetch(
            "https://api.openweathermap.org/data/2.5/weather?q="
            + city
            + "&lang=de&units=metric&appid="
            + this.apiKey
        )
        .then((response) => response.json())
        .then((data) => this.displayWeather(data));
    },
    displayWeather: function (data) {
        // display the weather data on the screen
        var { name } = data;
        const { icon, description } = data.weather[0];
        const { temp, humidity } = data.main;
        const { speed } = data.wind;

        // set text contents
        document.querySelector(".location-place").innerText = "Wetter in " + name;
        document.querySelector(".current-temp").innerText = temp + "°C";
        document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + ".png";
        document.querySelector(".current-weather").innerText = description;
        document.querySelector(".current-humidity").innerText = "Luftfeuchtigkeit: " + humidity + "%";
        document.querySelector(".current-wind").innerText = "Wind: " + speed + " km/h";

        // if the temperature is below 0°C, set label color to blue
        if (temp < 0) {
            document.querySelector(".current-temp").style.color = "blue";
        } else if (temp < 25) {
            document.querySelector(".current-temp").style.color = "white";
        } else {
            document.querySelector(".current-temp").style.color = "red";
        }

        // finished loading
        document.querySelector(".wetter").classList.remove("laden");

        // make name api-readable for background image
        name = name.replace(" ", ",");

        // set background image according to city from unsplash.com
        document.body.style.backgroundImage =
            "url('https://source.unsplash.com/" + screen.width + "x" + screen.height + "/?" + name +  "')";

    },
    search: function () {
        this.fetchWeather(document.querySelector(".search-bar").value);
      },
};


weather.fetchWeather("Frankfurt");

document.querySelector(".search button").addEventListener("click", function () {
    weather.search();
  });


  document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });