116 lines
3.8 KiB
JavaScript
116 lines
3.8 KiB
JavaScript
const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d"
|
|
const API_URL = "https://api.opencagedata.com/geocode/v1/json"
|
|
|
|
let weather = {
|
|
apiKey: API_KEY,
|
|
fetchWeather: function (city) {
|
|
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${this.apikey}`)
|
|
.then((response) => { // error part if it fails
|
|
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 = `var(--${data.weather[0].main})`;
|
|
},
|
|
search: function () {
|
|
this.fetchWeather(document.querySelector(".search-bar").value);
|
|
},
|
|
};
|
|
|
|
let forcast = {
|
|
apiKey: API_KEY,
|
|
fetchForcast: function(latitude, longitude) {
|
|
fetch(`https://api.openweathermap.org/data/2.5/forcast?lat=${latitude}&lon${longitude}&apiid=${this.apiKey}`)
|
|
.then((responce) => {
|
|
if (!responce.ok) {
|
|
alert("No forcast found");
|
|
throw new Error("No forcast found.");
|
|
}
|
|
return responce.json();
|
|
}).then((data) => this.displayForcast(data));
|
|
},
|
|
displayForcast: function(data) {
|
|
|
|
}
|
|
}
|
|
|
|
let geocode = {
|
|
apiKey: "5333f43e8a7a4553abee4745425cae8b",
|
|
apiURL: API_URL,
|
|
reverseGeocode: function (latitude, longitude) {
|
|
var request_url = `${this.apiURL}?key=${this.apiKey}&q=${encodeURIComponent(latitude+","+longitude)}&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);
|
|
weather.fetchWeather(data.results[0].components.city);
|
|
console.log(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("Surrey");
|
|
}
|
|
}
|
|
};
|
|
|
|
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(); |