Weather/script.js at master · mukund0502/Weather · 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
var place = document.getElementById("place");
var temperature = document.getElementById("temperature");
var icon = document.getElementById("icon");
var maushamtype = document.getElementById("maushamtype");
var humidity = document.getElementById("humidity");
var windspeed = document.getElementById("windspeed");
var btn = document.getElementById("btn");
var search = document.getElementById("searchh");
var option = document.getElementById("option");
var viewport = document.getElementById("view");
var op = document.getElementsByClassName("op");

var API = 'c43b5d7ce55249009df105521220607';

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  alert("Allow location for the realtime weather update.")
}

function showPosition(position) {
  console.log("Latitude: " + position.coords.latitude +
    "  Longitude: " + position.coords.longitude);
  fetch(`https://api.weatherapi.com/v1/current.json?key=${API}&q=${position.coords.latitude},${position.coords.longitude}&aqi=no`).then(res => res.json()).then(data => {
    console.log(data);
    value = {
      "name": data.location.name,
      "region": data.location.region,
      "country": data.location.country,
      "windspeed": data.current.wind_kph,
      "humidity": data.current.humidity,
      "temp": data.current.temp_c,
      "type": data.current.condition.text,
      "icon": data.current.condition.icon,
    };
    setpresent(value);
  })
}

function setpresent(value) {
  place.innerHTML = `${value.name}, ${value.country}`;
  windspeed.innerHTML = `Wind Speed: ${value.windspeed}km/hr`;
  humidity.innerHTML = `Humidity: ${value.humidity}%`;
  temperature.innerHTML = `${value.temp}&#176C`;
  maushamtype.innerHTML = `${value.type}`;
  icon.src = value.icon;
  if (value.type == "Sunny") {
    viewport.style.backgroundImage = "url(./sunny.jpg)";
  }
  else if (value.type.includes("cloudy")||value.type.includes("Cloudy")) {
    viewport.style.backgroundImage = "url(./cloudy.jpg)";
  }
  else if (value.type.includes("rain")||value.type.includes("Rain")) {
    viewport.style.backgroundImage = "url(./rain2.jpg)";
  }
  else {
    viewport.style.backgroundImage = "url(./aaa.jpg)";

  }
}
var opp = [];
btn.addEventListener("click", () => {
  ll();
})

search.addEventListener("keyup",()=>{
  setTimeout(ll,5);
})

function ll() {
  option.innerHTML = "";
  var placename = search.value;

  fetch(`https://api.weatherapi.com/v1/search.json?key=c43b5d7ce55249009df105521220607&q=${placename}`).then(res => res.json()).then(data => {
    console.log(data);
    var push = "";
    for (let index = 0; index < 7; index++) {
      push += `<div class="text-center cursor-pointer op text-xl">${data[index].name}, ${data[index].region},${data[index].country}</div> `
      option.innerHTML = push;

    }

    setTimeout(() => {
      for (let ind = 0; ind < op.length; ind++) {
        const element = op[ind];
        element.addEventListener("click", () => {
          var lat = data[ind].lat;
          var lon = data[ind].lon;
          console.log(`${data[ind].lat},${data[ind].lon}`);
          func(lat,lon,ind,element.innerHTML);

        })
      }
    }, 1000)
  })
  function func(lat,lon,ind,name) {
    fetch(`https://api.weatherapi.com/v1/current.json?key=${API}&q=${lat},${lon}&aqi=no`).then(res => res.json()).then(tata => {

      console.log(tata);

      // console.log(ind);
      // console.log(tata[ind]);

      value = { "name": tata.location.name,
                "region": tata.location.region,
                "country":tata.location.country,
                "windspeed": tata.current.wind_kph,
                "humidity": tata.current.humidity,
                "temp": tata.current.temp_c,
                "type": tata.current.condition.text,
                "icon":tata.current.condition.icon,};

      setpresent(value);
      option.innerHTML = "";
      search.value = "";
    })
  }

}
// console.log(op);
// console.log(opp.length);