From 00720ffca418896018ee7d15bcc825a2856c42b7 Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Mon, 26 Sep 2016 21:36:06 +0000
Subject: [PATCH 1/9] Initial commit

---
 index.html | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 148 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 6524157..0ece2fe 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,151 @@
 <!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 (weather.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 getLocationAndWeather(){
+  if (window.XMLHttpRequest){
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener("load", function() {
+      var response = JSON.parse(xhr.responseText);
+
+      console.log(response);
+      var position = {
+        latitude: response.latitude,
+        longitude: response.longitude
+      };
+      var cityName = response.city;
+
+      var weatherSimpleDescription = response.weather.simple;
+      var weatherDescription = response.weather.description;
+      var weatherTemperature = roundTemperature(response.weather.temperature);
+
+      weatherData.temperatureValue = weatherTemperature;
+
+      loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
+      weatherData.city.innerHTML = cityName;
+      weatherData.weather.innerHTML =  ", " + weatherDescription;
+      weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
+    }, 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 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 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>

From b8fd66f988f0bda5cc75feeb9c2f60d7d9e23cdf Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Mon, 26 Sep 2016 21:42:23 +0000
Subject: [PATCH 2/9] Initial commit

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 0ece2fe..6244a4e 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Weather Web App</title>
   <style>
-body{
+	body{
 	height: 100%;
 	margin: 0;
 	padding: 0;
@@ -17,9 +17,9 @@
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-size: cover;
-}
+	}
 
-section{
+	section{
 	min-height: 100%;
 }
 

From a7937a7e8d84e4cd58731e4bbef71fbd049d6acd Mon Sep 17 00:00:00 2001
From: xidorn7 <xidorn7@users.noreply.github.com>
Date: Mon, 26 Sep 2016 17:50:29 -0400
Subject: [PATCH 3/9] Updated README.md

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index ea283d2..fbb7b80 100644
--- 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
+
+
+
+
 
 This project is open-ended! Requirements:
 

From 0da41f87af26b423708206695671c6bc7c7c161c Mon Sep 17 00:00:00 2001
From: xidorn7 <xidorn7@users.noreply.github.com>
Date: Mon, 26 Sep 2016 17:51:08 -0400
Subject: [PATCH 4/9] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fbb7b80..0630f4a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This mashup uses location data from ip-location to get weather information throu
 It displays the city and temperature in Celcius
 
 
-
+---------------------------------------------------------------------------OTHER COMMENTS----------------------------------------------
 
 
 This project is open-ended! Requirements:

From 7da47401f14f71517156724c6793509ce16a4e1c Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Mon, 26 Sep 2016 22:07:30 +0000
Subject: [PATCH 5/9] Changed for errors

---
 index.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 6244a4e..0700e64 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@ <h1 id = "city">Weather Web App</h1>
 
 
 <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>
+	<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 = {
@@ -72,11 +72,11 @@ <h1 id = "city">Weather Web App</h1>
 };
 
 function roundTemperature (val){
-	return Math.round(val)
+	return Math.round(val);
 }
 
 function switchUnits(){
-	if (weather.units == "°C"){
+	if (weather.units === "°C"){
 		weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
 		weatherData.units = "°F";
 	}
@@ -88,6 +88,14 @@ <h1 id = "city">Weather Web App</h1>
 	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();
@@ -125,13 +133,6 @@ <h1 id = "city">Weather Web App</h1>
   }           
 }
 
-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 jsonFlickrApi(data){
   if (data.photos.pages > 0){

From c1ed4e7215c55235742092e129656c2c525df2ff Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Tue, 27 Sep 2016 04:51:09 +0000
Subject: [PATCH 6/9] Changed for errors again

---
 index.html | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 0700e64..2df7b44 100644
--- a/index.html
+++ b/index.html
@@ -99,27 +99,23 @@ <h1 id = "city">Weather Web App</h1>
 function getLocationAndWeather(){
   if (window.XMLHttpRequest){
     var xhr = new XMLHttpRequest();
-    xhr.addEventListener("load", function() {
-      var response = JSON.parse(xhr.responseText);
-
-      console.log(response);
+var setState = function() {
+      response=JSON.parse(xhr.responseText);
+      this.responSe = JSON.parse(xhr.responseText);
       var position = {
         latitude: response.latitude,
         longitude: response.longitude
       };
-      var cityName = response.city;
-
-      var weatherSimpleDescription = response.weather.simple;
-      var weatherDescription = response.weather.description;
       var weatherTemperature = roundTemperature(response.weather.temperature);
 
       weatherData.temperatureValue = weatherTemperature;
-
-      loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
-      weatherData.city.innerHTML = cityName;
-      weatherData.weather.innerHTML =  ", " + weatherDescription;
+      loadBackground(position.latitude, position.longitude, response.weather.simple);
+      weatherData.city.innerHTML = response.city;
+      weatherData.weather.innerHTML =  ", " + response.weather.descriptionn;
       weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
-    }, false);
+   };
+    
+   xhr.addEventListener("load", setState, false);
 
     xhr.addEventListener("error", function(err){
       alert("Could not complete the request");

From 22a8edc47f86b6724f666ffde3fd75a87d316c36 Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Tue, 27 Sep 2016 05:10:16 +0000
Subject: [PATCH 7/9] Code tweaked

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2df7b44..d5915d8 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@ <h1 id = "city">Weather Web App</h1>
 }
 
 function switchUnits(){
-	if (weather.units === "°C"){
+	if (weatherData.units === "°C"){
 		weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
 		weatherData.units = "°F";
 	}

From e06ac816432cf2162c169c67de3fdea6a9d3f2f1 Mon Sep 17 00:00:00 2001
From: xidorn7 <souzimae@gmail.com>
Date: Tue, 27 Sep 2016 05:39:49 +0000
Subject: [PATCH 8/9] Code tweaked again

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index d5915d8..cdf0098 100644
--- a/index.html
+++ b/index.html
@@ -85,7 +85,7 @@ <h1 id = "city">Weather Web App</h1>
 		weatherData.units = "°C";
 	}
 
-	weatherData.temperature.innerHTML = weatherData.temperatureValue + weatehrData.units + ",";
+	weatherData.temperature.innerHTML = weatherData.temperatureValue + weatehrData.units + "";
 }
 
 function loadBackground(lat, lon, weatherTag) {
@@ -99,7 +99,7 @@ <h1 id = "city">Weather Web App</h1>
 function getLocationAndWeather(){
   if (window.XMLHttpRequest){
     var xhr = new XMLHttpRequest();
-var setState = function() {
+     var setState = function() {
       response=JSON.parse(xhr.responseText);
       this.responSe = JSON.parse(xhr.responseText);
       var position = {
@@ -111,7 +111,7 @@ <h1 id = "city">Weather Web App</h1>
       weatherData.temperatureValue = weatherTemperature;
       loadBackground(position.latitude, position.longitude, response.weather.simple);
       weatherData.city.innerHTML = response.city;
-      weatherData.weather.innerHTML =  ", " + response.weather.descriptionn;
+      weatherData.weather.innerHTML =  ", " + response.weather.description;
       weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
    };
     

From abc2b3218ebbfe90f1bc2c7eac42690f6c7d7a5d Mon Sep 17 00:00:00 2001
From: xidorn7 <xidorn7@users.noreply.github.com>
Date: Tue, 27 Sep 2016 13:15:37 -0400
Subject: [PATCH 9/9] Update Readme.md

Extra information
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0630f4a..b80df90 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # 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
+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----------------------------------------------
