From 1974e4049f71431148bed8c8f963559879730345 Mon Sep 17 00:00:00 2001 From: yanesh Date: Mon, 26 Nov 2018 11:00:02 -0500 Subject: [PATCH 1/7] initial commit --- index.html | 0 script.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 From 9fd24f1dc4e65b4743c44d181c8d6cc60a6ca23f Mon Sep 17 00:00:00 2001 From: yanesh Date: Mon, 26 Nov 2018 12:41:33 -0500 Subject: [PATCH 2/7] added query request --- index.html | 22 ++++++++++++++++++++++ script.js | 22 ++++++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/index.html b/index.html index e69de29..064420a 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,22 @@ + + + + + NASA Image Previewer + + + + + +
+
+ +
+

 

+ + + + \ No newline at end of file diff --git a/script.js b/script.js index e69de29..ca5dbe5 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,22 @@ + $(document).ready(function(e) { + + + $(':submit').click(function (event) { + event.preventDefault(); // Do not run the default action + + let searchQuery = $(':text[name="searchq"]').val(); + $.get("https://images-api.nasa.gov/search?q=" + searchQuery, function(data, status) { + + + if(status == "success") { + console.log(data); + } else { + alert("Error retreiving images from NASA. Status", status); + console.log(status, data); + } + + }); + } + }); + + From 3254a6201dfba391db5efd3a0b4fd5a7067860a2 Mon Sep 17 00:00:00 2001 From: yanesh Date: Mon, 26 Nov 2018 20:38:59 -0500 Subject: [PATCH 3/7] added image parsing --- index.html | 7 +++---- script.js | 50 ++++++++++++++++++++++++++++---------------------- 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 064420a..5fece29 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,9 @@ -
-
- -
+ + Enter your search query:
+

 

diff --git a/script.js b/script.js index ca5dbe5..e078c8a 100644 --- a/script.js +++ b/script.js @@ -1,22 +1,28 @@ - $(document).ready(function(e) { - - - $(':submit').click(function (event) { - event.preventDefault(); // Do not run the default action - - let searchQuery = $(':text[name="searchq"]').val(); - $.get("https://images-api.nasa.gov/search?q=" + searchQuery, function(data, status) { - - - if(status == "success") { - console.log(data); - } else { - alert("Error retreiving images from NASA. Status", status); - console.log(status, data); - } - - }); - } - }); - - +$(document).ready(function(e) { + + + $('#submit').click(function (event) { + event.preventDefault(); // Do not run the default action + + 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; + while(counter < 12) { + $('p:first').after(''); + counter++; + } + } else { + alert("Error retreiving images from NASA. Status", status); + console.log(status, data); + } + + }); + }); + +}); + + From f61c7765996104fd345426d664813ecaa807fa5d Mon Sep 17 00:00:00 2001 From: yanesh Date: Mon, 26 Nov 2018 21:09:37 -0500 Subject: [PATCH 4/7] added jquery twbs pagination --- index.html | 4 +++- script.js | 45 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5fece29..3dda5b5 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> + + @@ -16,6 +18,6 @@

 

- +
    \ No newline at end of file diff --git a/script.js b/script.js index e078c8a..af97fd7 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,47 @@ $(document).ready(function(e) { + + $('#pagination-demo').twbsPagination({ + totalPages: 5, + // 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' + + }); $('#submit').click(function (event) { @@ -12,7 +55,7 @@ $(document).ready(function(e) { console.log(data); let counter = 0; while(counter < 12) { - $('p:first').after(''); + $('p:first').after(''); counter++; } } else { From aa8648fc23945804bbe5874bf2df621a5b22e9fe Mon Sep 17 00:00:00 2001 From: yanesh Date: Mon, 26 Nov 2018 21:47:43 -0500 Subject: [PATCH 5/7] partition data --- index.html | 4 +- script.js | 105 +++++++++++++++++++++++++++++------------------------ styles.css | 0 3 files changed, 61 insertions(+), 48 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 3dda5b5..8a86dad 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ crossorigin="anonymous"> + @@ -17,7 +18,8 @@ Enter your search query:

     

    +
    -
      +
        \ No newline at end of file diff --git a/script.js b/script.js index af97fd7..5984c78 100644 --- a/script.js +++ b/script.js @@ -1,49 +1,5 @@ $(document).ready(function(e) { - $('#pagination-demo').twbsPagination({ - totalPages: 5, - // 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' - - }); - - $('#submit').click(function (event) { event.preventDefault(); // Do not run the default action @@ -54,10 +10,65 @@ $(document).ready(function(e) { if(status == "success") { console.log(data); let counter = 0; - while(counter < 12) { - $('p:first').after(''); - counter++; + + // Partition data for pagination + let totalItems = data.collection.items.length; + let totalPages = Math.ceil(totalItems / 12); + + + // Pagination struct + $('#pagination').twbsPagination({ + totalPages: totalPages, + // the current page that show on start + startPage: 1, + + // maximum visible pages + visiblePages: totalPages, + + 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' + + }); + + // Build DOM + for(var i = 1; i <= totalPages; i++) { + $('#image-container').append('
        '); + for(var j = 0; j < 12; j++) { + + data.collection.items[i*j].links ? $('#page' + i).append('') : $('#page' + i).append('
        BLANK
        '); + } } + } 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..e69de29 From 9b5842b31be7c93fa22d977f6834dc4223aeddca Mon Sep 17 00:00:00 2001 From: yanesh Date: Tue, 27 Nov 2018 17:18:35 -0500 Subject: [PATCH 6/7] filter data --- index.html | 4 ++-- script.js | 31 +++++++++++++++++++++---------- styles.css | 6 ++++++ 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 8a86dad..9059c90 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ crossorigin="anonymous"> - + @@ -17,7 +17,7 @@ Enter your search query:
        -

         

        +
          diff --git a/script.js b/script.js index 5984c78..cadaeec 100644 --- a/script.js +++ b/script.js @@ -10,11 +10,29 @@ $(document).ready(function(e) { 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 = data.collection.items.length; + 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++) { + + $('#page' + i).append('') + } + } // Pagination struct $('#pagination').twbsPagination({ @@ -23,7 +41,7 @@ $(document).ready(function(e) { startPage: 1, // maximum visible pages - visiblePages: totalPages, + visiblePages: 5, initiateStartPageClick: true, @@ -60,14 +78,7 @@ $(document).ready(function(e) { }); - // Build DOM - for(var i = 1; i <= totalPages; i++) { - $('#image-container').append('
          '); - for(var j = 0; j < 12; j++) { - - data.collection.items[i*j].links ? $('#page' + i).append('') : $('#page' + i).append('
          BLANK
          '); - } - } + } else { alert("Error retreiving images from NASA. Status", status); diff --git a/styles.css b/styles.css index e69de29..aef6fa7 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,6 @@ +.page { + display: none; +} +.page-active { + display: block; +} From fbf183d0ebe51b42e769dd48ba5d4e552a8828cd Mon Sep 17 00:00:00 2001 From: yanesh Date: Tue, 27 Nov 2018 17:54:39 -0500 Subject: [PATCH 7/7] ui --- index.html | 6 ++++-- script.js | 6 ++++-- styles.css | 19 +++++++++++++++++++ 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9059c90..3520d9c 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,11 @@ + - Enter your search query:
          - +
          diff --git a/script.js b/script.js index cadaeec..451d87d 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,8 @@ $(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) { @@ -29,8 +31,8 @@ $(document).ready(function(e) { for(var i = 1; i <= totalPages; i++) { $('#image-container').append('
          '); for(var j = 0; j < 12; j++) { - - $('#page' + i).append('') + if (i*j >= validData.length) { break; }; + $('#page' + i).append('') } } diff --git a/styles.css b/styles.css index aef6fa7..7d97d09 100644 --- a/styles.css +++ b/styles.css @@ -4,3 +4,22 @@ .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