WindWhisk/script.js at main · kumar-amann/WindWhisk · 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
let weather = {
    apiKey: "10cc7abc64f94ab1fc56214e03ce670b ",
    fetchWeather: function (city) {
      fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=" +
          city +
          "&units=metric&appid=" +
          this.apiKey
      )
        .then((response) => {
          if (!response.ok) {
            alert("No weather found.");
            throw new Error("No weather found.");
          }
          return response.json();
        })
        .then((data) => this.displayWeather(data));
    },
    displayWeather: function (data) {
      const { name } = data;
      const { icon, description } = data.weather[0];
      const { temp, humidity } = data.main;
      const { speed } = data.wind;
      document.querySelector(".city").innerText = "Weather in " + name;
      document.querySelector(".icon").src =
        "https://openweathermap.org/img/wn/" + icon + ".png";
      document.querySelector(".description").innerText = description;
      document.querySelector(".temp").innerText = temp + "°C";
      document.querySelector(".humidity").innerText =
        "Humidity: " + humidity + "%";
      document.querySelector(".wind").innerText =
        "Wind speed: " + speed + " km/h";
      document.querySelector(".weather").classList.remove("loading");
      document.body.style.backgroundImage =
        // "url('https://source.unsplash.com/1600x900/?" + name + "')";
          "url('landscape.jpeg.jpg')";
    },
    search: function () {
      this.fetchWeather(document.querySelector(".search-bar").value);
    },
  };

  let geocode = {
    reverseGeocode: function (latitude,longitude){
        api_key = '1f3897f395f0488cb2b3deac0735ad5a';

        var query = latitude + ',' + longitude;


        var api_url = 'https://api.opencagedata.com/geocode/v1/json'

        var request_url = api_url
          + '?'
          + 'key=' + api_key
          + '&q=' + encodeURIComponent(query)
          + '&pretty=1'
          + '&no_annotations=1';

        // see full list of required and optional parameters:
        // https://opencagedata.com/api#forward

        var request = new XMLHttpRequest();
        request.open('GET', request_url, true);

        request.onload = function() {
          // see full list of possible response codes:
          // https://opencagedata.com/api#codes

          if (request.status === 200){
            // Success!
            var data = JSON.parse(request.responseText);
            //alert(data.results[0].formatted); // print the location
            weather.fetchWeather(data.results[0].components.city);

          } else if (request.status <= 500){
            // We reached our target server, but it returned an error

            console.log("unable to geocode! Response code: " + request.status);
            var data = JSON.parse(request.responseText);
            console.log('error msg: ' + data.status.message);
          } else {
            console.log("server error");
          }
        };

        request.onerror = function() {
          // There was a connection error of some sort
          console.log("unable to connect to server");
        };

        request.send();  // make the request
    },
getlocation : function(){
    function success(data){
        geocode.reverseGeocode(data.coords.latitude, data.coords.longitude);
    }
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(success,console.error);
    }
    else{
        weather.fetchWeather("Jamshedpur");
    }
  }
 };


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

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