diff --git a/index.html b/index.html new file mode 100644 index 0000000..3520d9c --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + NASA Image Previewer + + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..451d87d --- /dev/null +++ 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('
'); + for(var j = 0; j < 12; j++) { + if (i*j >= validData.length) { break; }; + $('#page' + i).append('') + } + } + + // 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 new file mode 100644 index 0000000..7d97d09 --- /dev/null +++ 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; +} \ No newline at end of file