GBCBlockchain · MarkCBall · Nov 25, 2018 · Nov 26, 2018 · Nov 26, 2018 · Nov 26, 2018
diff --git a/addImages.js b/addImages.js
@@ -0,0 +1,83 @@
+
+    //track what point in NASA's DB we are searching for photos from
+    var itemID = 0;
+    const picturesPerClick = 12;
+
+    //add images to browser through sub functions
+    function addImages(searchTerm){
+        $.getJSON("https://images-api.nasa.gov/search?q="+searchTerm, function (imagesJSON){
+            showNextX(imagesJSON,picturesPerClick)
+        });
+    }  
+
+    //shows the next numImg files
+    //starts trying to add images from imagesJSON at location itemID
+    //uses recursion to deal with async loops when the image can't be displayed
+    //interacts with html when there are no images left to display
+
+
+    // for(var i = 0; i < length; i++){
+    //     var variable = variables[i];
+    //     (function(var){ //start wrapper code
+    //       otherVariable.doSomething(var, function(err){ //callback for when doSomething ends
+    //         do something else with var; //please note that i'm dealing with var here, not variable
+    //       }
+    //     })(variable);//passing in variable to var here
+    //   }
+
+
+
+
+    function showNextX(imagesJSON,numImg){
+        let maxItemID = itemID + numImg;
+        for (; itemID < maxItemID;itemID++){
+            //if we have not reached the end of the images
+            if (imagesJSON.collection.items[itemID]){
+                let image = imagesJSON.collection.items[itemID].href;
+                //use IVF - immediately invoked function - to pass variable to callback inside loop
+                let descrip = imagesJSON.collection.items[itemID].data[0].description;
+                (function(descr){
+                    //get the image urls from the json collection of images
+                    $.getJSON(image, function (imageJSON){
+                        //append a url in imageJSON if one exists, otherwise try again
+                        if (!appendImage(imageJSON, descr)){
+                            showNextX(imagesJSON,1)
+                        }
+                    });
+                })(descrip)//end IVF
+            }else {
+                //let the user know there are no more images to display
+                console.log("ran out of items");
+                $("#showMore").text("Nothing more to show").css({ 'color': 'red', 'font-size': '150%' });;
+            }     
+        }
+    }
+
+    //called to append a specific version of an image from the JSON including many versions of that file
+    function appendImage(imageJSON, desc){
+        for (let i=0;i<20;i++){
+            let url = imageJSON[i];
+            if ( (typeof(url)=="string") && urlIsImg(url) ){
+                appendFileLink(imageJSON[i], desc);
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    //Interacts with the html file
+    //function to append a single file to the html file
+    function appendFileLink(url, desc){
+        if (urlIsImg(url) )
+            $("p").append("<img width='132' height='124' src='"+url+"' title='"+desc+"'>")
+        else 
+            console.log("unsupported file type: " + url)
+    }
+
+    //UTIL FUNCTION
+    //check if a given url is a displayable image
+    function urlIsImg(url){
+        return ( url.endsWith('.png') || url.endsWith('.img') || url.endsWith('.jpg'))
+    }
+
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mark's Image finder</title>
+
+
+    <!-- JQUERY -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+    <!-- Mark's .js code -->
+    <script type="text/javascript" src="addImages.js"></script>
+</head>
+<body>
+    <h1>Nasa Image Provider</h1>
+    <br>
+    Search term: <input id='searchBox' value="audio" type="text" name="fname">
+
+    <!-- clicking search will remove old images, reset image counter and add the new images -->
+    <button id='search' onclick="$('img').remove();itemID=0;addImages( $('#searchBox').val());" >Search</button><br><br>
+    <p></p>
+    <!-- clicking slow more will add more images -->
+    <a id='showMore' onclick="addImages( $('#searchBox').val());"><br><center>Click here to load more images</center></a>
+</body>
+</html>