GBCBlockchain · JgeYbwcDhCZJ9 · Nov 26, 2018 · Nov 26, 2018 · Nov 27, 2018 · Nov 27, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>NASA Image Previewer</title>
+    <script
+  src="https://code.jquery.com/jquery-3.3.1.min.js"
+  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+  crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js" integrity="sha256-swvs/72H2JZrIbyDdMskQv2t0bpTO5tgJOWVMBgZq6U=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <script src="script.js" type="text/javascript"></script>
+  </head>
+  <body>
+
+<div id="header"><h1>NASA Image Previewer</h1><p>Enter a search term and click submit<p></div>
+
+<div id="searchbox" class="col-5">
+  Enter your search query: <input type="text" class="form-control" placeholder="Search" name="searchq">
+  <button type="button" class="btn btn-primary" id="submit">Submit</button></div>
+
+<div id="image-container"></div>
+
+  <ul id="pagination" class="pagination-lg pull-right"></ul>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,95 @@
+$(document).ready(function(e) {   
+
+    $('#submit').click(function (event) {
+        event.preventDefault();  // Do not run the default action
+
+        $('#image-container').empty();  //refresh old search
+
+        let searchQuery = $(':text[name="searchq"]').val();
+        $.get("https://images-api.nasa.gov/search?q=" + searchQuery, function(data, status) {
+
+
+            if(status == "success") {
+                console.log(data);
+                let counter = 0;
+                var validData = [];
+
+                // Filter data for blanks or non-images
+                data.collection.items.forEach((item) => {
+                    if (item.links == undefined || item.links[0].href == undefined || item.links[0].href.split('.').pop() == 'srt') {
+                        return;
+                    } else {
+                        validData.push(item);
+                    }
+                });
+
+                // Partition data for pagination
+                let totalItems = validData.length;
+                let totalPages = Math.ceil(totalItems / 12);
+
+                // Build DOM
+                for(var i = 1; i <= totalPages; i++) {
+                    $('#image-container').append('<div class="page" id="page' + i + '"></div>');
+                    for(var j = 0; j < 12; j++) {
+                        if (i*j >= validData.length) { break; };
+                        $('#page' + i).append('<img height="250" width="325" style="padding:20px"src="' + validData[i*j].links[0].href + '" title="' + validData[i*j].data[0].title + '"></img>')
+                    }
+                }
+
+                // Pagination struct
+                $('#pagination').twbsPagination({
+                    totalPages: totalPages,
+                    // the current page that show on start
+                    startPage: 1,
+
+                    // maximum visible pages
+                    visiblePages: 5,
+
+                    initiateStartPageClick: true,
+
+                    // template for pagination links
+                    href: false,
+
+                    // variable name in href template for page number
+                    hrefVariable: '{{number}}',
+
+                    // Text labels
+                    first: 'First',
+                    prev: 'Previous',
+                    next: 'Next',
+                    last: 'Last',
+
+                    // carousel-style pagination
+                    loop: false,
+
+                    // callback function
+                    onPageClick: function (event, page) {
+                            $('.page-active').removeClass('page-active');
+                    $('#page'+page).addClass('page-active');
+                    },
+
+                    // pagination Classes
+                    paginationClass: 'pagination',
+                    nextClass: 'next',
+                    prevClass: 'prev',
+                    lastClass: 'last',
+                    firstClass: 'first',
+                    pageClass: 'page',
+                    activeClass: 'active',
+                    disabledClass: 'disabled'
+
+                });
+
+
+
+            } else {
+                alert("Error retreiving images from NASA. Status", status);
+                console.log(status, data);
+            }
+
+        });
+    });
+
+});
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,25 @@
+.page {
+  display: none;
+}
+.page-active {
+  display: block;
+}
+#image-container {
+    padding: 50px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}
+#header{
+padding: 50px;
+text-align: center;
+}
+
+#searchbox{
+margin-left: 100px;
+}
+
+#pagination{
+margin-left: 100px;
+}