This is one of my first programs working with APIs and I was hoping to get some input in the form of suggestions, recommendations or corrections. The goal is to register the user location by IP, derive a latitude and longitude from the ip-api public site, pass this to Open Weather’s API for weather details and description, and use this information to search for a Flickr image of the location.
I have only been working with Javascript for a few months so any suggestions would be very much appreciated. If you can recommend any sources to remediate any shortcomings that would be appreciated as well.
var displayData = {
city: document.querySelector("#city"),
temperature: document.querySelector("#temperature"),
weather: document.querySelector("#weather"),
icon: document.querySelector("#icon"),
source: document.querySelector("#source")
};
function getWeather(latitude, longitude) {
if (window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(){
var response = JSON.parse(xhr.responseText);
displayData.city.innerHTML = response.name;
displayData.temperature.innerHTML = response.main.temp;
var detailWeather = response.weather[0];
var description = detailWeather.description;
flickrLoad(latitude, longitude, description);
displayData.weather.innerHTML = description;
displayData.icon.src = "http://openweathermap.org/img/w/" + detailWeather.icon + ".png";
}, false);
xhr.addEventListener("error", function(err){
alert("Initial request error");
}, false);
var target = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=54e7bed8487f1b7de520fa68a9080abe&units=imperial" ;
xhr.open("GET", target, true);
xhr.send();
} else {
alert("Initial XMLHttpRequest");
}
}
function flickrLoad(latitude, longitude, description){
var searchDesc, splitDesc;
splitDesc = description.split(" ");
searchDesc = splitDesc.slice(-1)[0];
console.log(searchDesc);
if (window.XMLHttpRequest){
var body = document.getElementsByTagName('body')[0];
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(){
var response = xhr;
var fullText = response.responseText;
var segment = (fullText.slice(14, -14)) + "}";
var fullJSON = JSON.parse(segment);
var imgURL = fullJSON.photos.photo[0].url_l;
var img = new Image();
img.src = imgURL;
body.style.backgroundImage = 'url(' + imgURL + ')';
}, false);
xhr.open("GET", "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c004bd46564d26383d37d88c1cbd4154&lat=" + latitude + "&lon=" + longitude + "&accuracy=1&tags=" + searchDesc + "&sort=relevance&extras=url_l&format=json", true);
xhr.send();
}}
function findIP(){
if (window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(){
var response = JSON.parse(xhr.responseText);
console.log(response.lat, response.lon);
getWeather(response.lat, response.lon);
displayData.source.innerHTML = "From: " + response.query;
}, false);
xhr.open("GET", "http://ip-api.com/json", true);
xhr.send();
}}
findIP();
body {
background-color: #696969;
font-family: 'Open Sans', sans-serif;
}
#imageSupport {
width: 100%;
height: 100%;
background-size: 100%;
}
#shell {
position: absolute;
top: 35%;
width: 100%;
text-align: center;
}
#main {
width: 30%;
margin: auto;
border: solid 1px black;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.7)
}
#footer {
margin: 0 5px 0 0;
position: fixed;
bottom: 10px;
right: 10px;
}
a {
color: #800000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather App 25 Sept</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="wx25.css">
</head>
<body >
<div id="imageSupport">
<div id="shell">
<section id="main">
<h1 id="city">Weather Web App</h1>
<h4 id="source">Local IP</h4>
<p id="temperature"></p>
<span id="weather"> By Cameron</span><br>
<img id="icon">
</section>
</div>
</div>
<footer id="footer">
<a href="http://flickr.com/services/api/"> Flickr</a> and <a
href="http://openweathermap.org"> Openweathermap.org</a>
</footer>
<script src="wx25.js"></script>
</body>
</html>