startup-systems · xidorn7 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/README.md b/README.md
@@ -1,4 +1,11 @@
 # Mashup project
+This mashup uses location data from ip-location to get weather information through the Open Weather API and displays this to the user with geo-tagged images from Flickr in the background along.
+
+It displays the city and temperature in Celcius (as the default) but converts this to Fahrenheit when the Celcius value is clicked and vice versa.
+
+
+---------------------------------------------------------------------------OTHER COMMENTS----------------------------------------------
+
 
 This project is open-ended! Requirements:
 

diff --git a/index.html b/index.html
@@ -1,8 +1,148 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Weather Web App</title>
+  <style>
+	body{
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	font-family: Arial, sans-serif;
+	font-size: 2em;
+	text-shadow: 0 0 10px #000;
+	color: #fff;
+	background: #888;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	}
+
+	section{
+	min-height: 100%;
+}
+
+h1{
+	font-size: 2em;
+	padding: 0 0.3em;
+	line-height: 1em;
+}
+
+p{
+	padding: 0 1em;
+}
+
+a{
+	color: #fff;
+}
+
+footer{
+position: absolute;
+bottom: 0;
+font-size: 0.5em;
+}
+
+#temperature{
+	text-decoration: none;
+	border-bottom: 0.05em dotted white;
+}
+  </style>
+
+</head>
+<body>
+
+<section>
+  <h1 id = "city">Weather Web App</h1>
+  <p><a id  = "temperature" href="#" onclick="switchUnits(); return false;" title="Click to switch between metric and imperial units"></a><span id = "weather">by @Maven</span></p>
+</section>
+
+
+
+<footer>
+	<p>Powered by <a href="http://flickr.com/service/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>. Created by <a href="https://twitter.com/mmaeverick">@mmaeverick</a>. <a id="image-source" href= "#"> Image source</a>.</p>
+</footer>
+<script>
+var weatherData = {
+  city: document.querySelector("#city"),
+  weather: document.querySelector("#weather"),
+  temperature: document.querySelector("#temperature"),
+  temperatureValue: 0,
+  units: "°C"
+};
+
+function roundTemperature (val){
+	return Math.round(val);
+}
+
+function switchUnits(){
+	if (weatherData.units === "°C"){
+		weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
+		weatherData.units = "°F";
+	}
+	else{
+		weatherData.temperatureValue=roundTemperature((weatherData.temperatureValue - 32)*5/9);
+		weatherData.units = "°C";
+	}
+
+	weatherData.temperature.innerHTML = weatherData.temperatureValue + weatehrData.units + "";
+}
+
+function loadBackground(lat, lon, weatherTag) {
+  var script_element = document.createElement('script');
+
+  script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e2357e4f59c9cb46f93ae406026ba6d3&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";
+
+  document.getElementsByTagName('head')[0].appendChild(script_element);
+}
+
+function getLocationAndWeather(){
+  if (window.XMLHttpRequest){
+    var xhr = new XMLHttpRequest();
+     var setState = function() {
+      response=JSON.parse(xhr.responseText);
+      this.responSe = JSON.parse(xhr.responseText);
+      var position = {
+        latitude: response.latitude,
+        longitude: response.longitude
+      };
+      var weatherTemperature = roundTemperature(response.weather.temperature);
+
+      weatherData.temperatureValue = weatherTemperature;
+      loadBackground(position.latitude, position.longitude, response.weather.simple);
+      weatherData.city.innerHTML = response.city;
+      weatherData.weather.innerHTML =  ", " + response.weather.description;
+      weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
+   };
+
+   xhr.addEventListener("load", setState, false);
+
+    xhr.addEventListener("error", function(err){
+      alert("Could not complete the request");
+    }, false);
+
+    xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=6a2ecb3cb777d3e89027f9a8ab89f6c9&units=metric", true);
+    xhr.send();
+  }
+  else{
+    alert("Unable to fetch the location and weather data.");
+  }           
+}
+
+
+function jsonFlickrApi(data){
+  if (data.photos.pages > 0){
+    var photo = data.photos.photo[0];
+    document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
+    document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
+  }
+  else{
+    document.querySelector("body").style.backgroundImage = "url('students-resting-on-floor-aerial-view.jpeg')";
+    document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
+  }
+}
+
+getLocationAndWeather();
+</script>
+</body>
 </html>