GBCBlockchain · Adam-Koza · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<html>
+    <head>
+        <!-- BootStrap, JQuery, Javascript -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+        <script src="index.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
+
+    </head>
+        <body>
+            <img class="mx-auto d-block" src="nasa.png">
+            <div class="d-flex justify-content-center">
+                    <input id="term" type="text">
+                    <button onclick="search()">Search</button>
+            </div>
+            <br>
+            <br>
+
+            <div id="results" class="card-deck">
+
+
+
+            </div>
+            <br>
+            <br>
+            <div id="loadMore"></div>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,89 @@
+
+
+var lastResult;
+var lastIndex;
+
+function search() {
+    var encoded = encodeURIComponent($('#term').val());
+    $.get({
+        url: "https://images-api.nasa.gov/search?q=apollo%2011&description=" + encoded + "&media_type=image",
+        success: function(response){
+            console.log(response);
+            lastResult = response;
+            var addString = '';
+            var limit;
+
+            if (response.collection.items.length < 12) {
+                limit = response.collection.items.length;
+                lastIndex = -1;
+            } else {
+                limit = 12;
+                lastIndex = 11;
+            }
+
+            for (i=0;i<limit;i++){
+                console.log(response.collection.items[i]);
+                addString +=
+                `<div class="card">
+                <img class="card-img-top" src="` + response.collection.items[i].links[0].href + `" alt="Card image cap">
+                <div class="card-body">
+                  <h5 class="card-title">`+ response.collection.items[i].data[0].title + `</h5>
+                  <p class="card-text">` + response.collection.items[i].data[0].description + `</p>
+                </div>
+                </div>`;
+                if (((i+1) % 4) == 0)  {
+                    addString += `</div><div class="card-deck">`;
+                }
+            }
+            $('#results').html(addString);
+            if (lastIndex != -1) {
+                $('#loadMore').html(`<div class="d-flex justify-content-center">
+                <button onclick="loadMore()">Load More</button>
+                </div>`);
+            }
+        }
+    });
+}
+
+function loadMore() {
+    var addString = '';
+    var limit;
+    var response = lastResult;
+    var showButton = true;
+
+    if (response.collection.items.length < (lastIndex + 1)) {
+        limit = (lastIndex + 1)
+        showButton = false;
+    } else {
+        if (response.collection.items.length < (lastIndex + 13)) {
+            limit = response.collection.items.length - 12;
+            showButton = false;
+
+        } else {
+            limit = (lastIndex + 12);
+        }
+    }
+
+    for (i=(lastIndex + 1);i<limit;i++){
+        addString +=
+        `<div class="card">
+        <img class="card-img-top" src="` + response.collection.items[i].links[0].href + `" alt="Card image cap">
+        <div class="card-body">
+          <h5 class="card-title">`+ response.collection.items[i].data[0].title + `</h5>
+          <p class="card-text">` + response.collection.items[i].data[0].description + `</p>
+        </div>
+        </div>`;
+        if (((i+1) % 4) == 0)  {
+            addString += `</div><div class="card-deck">`;
+        }
+    }
+    $('#results').html($('#results').html() + `</div>` + addString);
+    lastIndex += 12;
+    if (showButton) {
+        $('#loadMore').html(`<div class="d-flex justify-content-center">
+                <button onclick="loadMore()">Load More</button>
+                </div>`);
+    } else {
+        $('#loadMore').html(``);
+    }
+}
diff --git a/nasa.png b/nasa.png