93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
const wrapper = document.querySelector(".wrapper"),
|
|
inputPart = wrapper.querySelector(".input-part"),
|
|
infoTxt = inputPart.querySelector(".info-txt"),
|
|
inputField = inputPart.querySelector("input"),
|
|
locationBtn = inputPart.querySelector("button"),
|
|
wIcon = wrapper.querySelector(".weather-part img"),
|
|
arrowBack = wrapper.querySelector("header i");
|
|
|
|
const apiKey = "c97161f5ff5a992afb41796b30adc57f";
|
|
let api;
|
|
|
|
inputField.addEventListener("keyup", (e) => {
|
|
if (e.key == "Enter" && inputField.value != "") {
|
|
requestApi(inputField.value);
|
|
}
|
|
});
|
|
|
|
locationBtn.addEventListener("click", () => {
|
|
if (navigator.geolocation) {
|
|
//if browser supports geolocation
|
|
navigator.geolocation.getCurrentPosition(onSuccess, onError);
|
|
} else {
|
|
alert("your browser does not support geolocation api");
|
|
}
|
|
});
|
|
|
|
function onSuccess(position) {
|
|
const { latitude, longitude } = position.coords; //getting latitue and longitude of use device from coords obj
|
|
api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`;
|
|
fecthData();
|
|
}
|
|
function onError(error) {
|
|
infoTxt.innerText = error.message;
|
|
infoTxt.classList.add("error");
|
|
}
|
|
|
|
function requestApi(city) {
|
|
api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
|
|
fecthData();
|
|
}
|
|
|
|
function fecthData() {
|
|
infoTxt.innerText = "Getting Weather details....";
|
|
infoTxt.classList.add("pending");
|
|
// getting api response and returning it with parsing into js obj and in another
|
|
// then function calling weatherDetails() with passing api result as an argument
|
|
fetch(api)
|
|
.then((response) => response.json())
|
|
.then((result) => weatherDetails(result));
|
|
}
|
|
|
|
function weatherDetails(info) {
|
|
if (info.cod == "404") {
|
|
infoTxt.innerText = `${inputField.value} isn't a valid city name`;
|
|
infoTxt.classList.replace("pending", "error");
|
|
} else {
|
|
// lets gets
|
|
const city = info.name;
|
|
const country = info.sys.country;
|
|
const { description, id } = info.weather[0];
|
|
const { feels_like, humidity, temp } = info.main;
|
|
|
|
if (id == 800) {
|
|
wIcon.src = "icons/clear.svg";
|
|
} else if (id >= 200 && id <= 232) {
|
|
wIcon.src = "icons/storm.svg";
|
|
} else if (id >= 600 && id <= 622) {
|
|
wIcon.src = "icons/snow.svg";
|
|
} else if (id >= 701 && id <= 781) {
|
|
wIcon.src = "icons/haze.svg";
|
|
} else if (id >= 801 && id <= 804) {
|
|
wIcon.src = "icons/cloud.svg";
|
|
} else if ((id >= 500 && id <= 531) || (id >= 300 && id <= 321)) {
|
|
wIcon.src = "icons/rain.svg";
|
|
}
|
|
|
|
// lets pass thes values to partivular html element
|
|
wrapper.querySelector(".temp .numb").innerText = Math.floor(temp);
|
|
wrapper.querySelector(".weather").innerText = description;
|
|
wrapper.querySelector(".location span").innerText = `${city}, ${country}`;
|
|
wrapper.querySelector(".temp .numb-2").innerText = Math.floor(feels_like);
|
|
wrapper.querySelector(".humidity span").innerText = `${humidity}%`;
|
|
|
|
infoTxt.classList.remove("pending", "error");
|
|
wrapper.classList.add("active");
|
|
console.log("info", info);
|
|
}
|
|
}
|
|
|
|
arrowBack.addEventListener("click", () => {
|
|
wrapper.classList.remove("active");
|
|
});
|