startup-systems · botingli · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/README.md b/README.md
@@ -1,16 +1,32 @@
 # Mashup project
 
-This project is open-ended! Requirements:
+This project is open-ended!
 
-* Build a site that uses data from at least one external API in an interesting, interactive way.
+* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
+* [inspiration?](http://www.programmableweb.com/mashups)
+
+## Requirements
+
+* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**)
+* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**)
+* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**)
 * Replace this README with a description of the project.
-* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
-* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
 
-The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.) No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
+### Extra credit
 
-* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
-* [inspiration?](http://www.programmableweb.com/mashups)
+Too easy?
+
+* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**)
+* Add fancy interactivity/animations (**10%**)
+
+If you do either of these, please let Aidan know so he can take a look.
+
+## Tips
+
+* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.)
+* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
+* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
+* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
 
 ## Finding an API
 
@@ -21,11 +37,6 @@ A couple things to look for in an API (or at least the endpoints you're using) f
 
 Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
 
-## Too easy?
-
-* build in an object-oriented way
-* add fancy interactivity/animations
-
 ## Running tests locally
 
 Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
@@ -42,3 +53,6 @@ Within this repository directory in your [virtual machine](https://github.com/st
     ```bash
     npm test -s
     ```
+
+
+
diff --git a/index.html b/index.html
@@ -1,8 +1,135 @@
 <!DOCTYPE html>
+<!--
+Most part of the site is built under the instructions in: https://fourtonfish.makes.org/thimble/make-your-own-web-mashup-introduction-to-web-apis
+
+I have added a function to load random picture , and fixed some problem with the unit conversions.
+-->
 <html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
+
+<head>
+  <title>Mashup</title>
+  <link rel = "stylesheet" href="style.css" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+</head>
+
+<body>
+  <section>
+    <h1 id='city'>An 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 Boting Li </span></p>
+
+
+      <p class = "change" onclick="getLocationAndWeather(); return false;" title="Click to change a random picture"> Change Pic</p>
+
+
+
+    </section>
+
+
+
+    <script>
+      var weatherData = {
+      city: document.querySelector("#city"),
+      weather: document.querySelector("#weather"),
+      temperature: document.querySelector("#temperature"),
+      temperatureValue: 0,
+      units: " C"
+    };
+
+
+
+      function switchUnits(){
+      if (weatherData.units === " C"){
+        weatherData.temperatureValue = (weatherData.temperatureValue *  9/5 + 32).toFixed(1);
+        weatherData.units = " F";
+      }
+      else{
+        weatherData.temperatureValue = ((weatherData.temperatureValue -  32) * 5/9).toFixed(1);
+        weatherData.units = " C";
+      }
+
+      weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units;   
+//      console.log(""+weatherData.temperatureValue);
+//      console.log( weatherData.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=13e395b96b7b8c5937454b23c895655c&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 ind = Math.floor((Math.random() * data.photos.photo.length ) + 1);
+//          console.log("" + ind)
+          var photo = data.photos.photo[ind];
+          document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
+        }
+        else{
+          document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
+        }
+      }
+
+    function loadInfo(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 = Math.round(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;
+        }
+
+    function getLocationAndWeather()
+    {
+     if (window.XMLHttpRequest){
+      var xhr = new XMLHttpRequest();
+      xhr.addEventListener("load", function() {
+        var response = JSON.parse(xhr.responseText);
+
+        console.log(response);
+          loadInfo(response);
+
+      });
+
+      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=9aed963107b4f6b4329a401768c13a60&units=metric", true);
+      xhr.send();
+    }
+    else{
+      alert("Unable to fetch the location and weather data.");
+    }         
+  }
+
+
+
+
+
+      getLocationAndWeather();
+
+
+
+    </script>
+
   </body>
-</html>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+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:
+}
+
+.change
+{
+  cursor: pointer
+
+}
+
+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;
+}