startup-systems · noopurP · 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):

diff --git a/ajax_text.txt b/ajax_text.txt
@@ -0,0 +1 @@
+<p id="p1">Image editing, courtesy of Aviary. Try editing snother image</p>
diff --git a/index.html b/index.html
@@ -1,8 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
-  </body>
+    <head>
+        <title>Mashup</title>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+        <!-- Load Feather code -->
+		<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script>
+		<!-- Instantiate Feather -->
+		<script type='text/javascript'>
+			var featherEditor = new Aviary.Feather({
+				apiKey: '463822cfe2b94aae9c119ab8ab6179ca',
+				theme: 'light', // Check out our new 'light' and 'light' themes!
+				tools: 'all',
+				appendTo: '',
+				onSave: function(imageID, newURL) {
+							var img = document.getElementById(imageID);
+								img.src = newURL;		
+						},
+				onError: function(errorObj) {
+							alert(errorObj.message);
+						}
+			});
+			function launchEditor(id, src) {
+				featherEditor.launch({
+					image: id,
+					url: src
+				});
+				return false;
+			}
+			function myFunct(){
+				var txt = document.getElementById("myurl").value;
+				document.getElementById("image1").setAttribute("src", txt);
+				launchEditor("image1", txt);
+			}
+
+			$(document).ready(function(){
+    				$("button").click(function(){
+        				$("#div1").load("ajax_text.txt");
+    				});
+			});
+		</script>
+    </head>
+    <body>
+		<div id='injection_site'></div>
+		<input type="text" id="myurl" placeholder="Enter the url of an image" style="width: 250px; height: 45px"/>
+		<button id="geturl" onclick="myFunct()" style="width: 60px; height: 51px" >GO</button>
+		<img id='image1' src='http://www.stuarthoward.com/images/uploads/projects/1/blank-white__background.png' alt='Your image'/>
+		<div id="div1"></div>
+    </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<p id="p1">Image editing, courtesy of Aviary. Try editing snother image</p>