From e74650ff840af357b34700393df554e099b0b931 Mon Sep 17 00:00:00 2001 From: "Wayne.Xu" Date: Sun, 25 Nov 2018 21:22:50 -0500 Subject: [PATCH 1/3] file created --- app.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 43 +++++++++++++++++++++++++++ styles.css | 6 ++++ 3 files changed, 135 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 styles.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..36a2039 --- /dev/null +++ b/app.js @@ -0,0 +1,86 @@ +var nasaData; +var renderData; +var page = 0; + +const renderImages = function (imgdata, page) { + var pageData = imgdata.slice((page * 12), (page * 12 + 11)); + var numpages = Math.ceil(imgdata.length / 12); + let imgContainer = $("#images"); + imgContainer.empty(); + pageData.forEach(function (item) { + let div = $('
'); + let img = $(''); + img.attr('src', item['href']); + let caption = $('
'); + div.addClass("col-md-3 profile-card-1"); + img.addClass("img-fluid"); + img.appendTo(div); + caption.addClass("card-content"); + caption.text(item['title']); + caption.appendTo(div); + let descrip = $('
'); + descrip.text(item['desc']); + descrip.appendTo(div); + div.appendTo(imgContainer); + descrip.hide(); + img.mouseover(function () { + descrip.show(); + }); + img.mouseout(function () { + descrip.hide(); + }); + }) + if ((page + 1) < numpages) { + // render link - add click event + let linkContainer = $('#seemore'); + linkContainer.empty(); + let link = $(''); + link.text('See More'); + link.addClass("badge badge-primary"); + link.appendTo(linkContainer); + $(linkContainer).on('click', function () { + console.log("see more"); + page = page + 1; + renderImages(renderData, page); + }) + } +} + +$("#btn").on("click", function () { + let searchTerm = $("#sContent").val(); + + $.ajax({ + + url: "https://images-api.nasa.gov/search", + + data: { + q: searchTerm, + media_type: "image" + }, + + type: "GET", + + dataType: "json", + }) + .done(function (json) { + nasaData = json.collection.items; + renderData = nasaData.map(function (item) { + return { + title: item.data[0].title, + desc: item.data[0].description, + href: item.links[0].href + } + }) + renderImages(renderData, page); + }) + .fail(function (xhr, status, errorThrown) { + alert("Sorry, there was a problem!"); + console.log("Error: " + errorThrown); + console.log("Status: " + status); + console.dir(xhr); + }) + .always(function (xhr, status) { + console.log("The request is complete!"); + }) +}); + diff --git a/index.html b/index.html new file mode 100644 index 0000000..708f5e3 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + Nasa Image Previewer + + + + + +
+
+
+

Nasa Image Previewer

+
+
+ +
+ +
+ + +
+
+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..90b6f79 --- /dev/null +++ b/styles.css @@ -0,0 +1,6 @@ +.profile-card-1 { + position: relative; + float: left; + overflow: hidden; + border:none; + } \ No newline at end of file From e94ac2a0083ab6af7107e66c63747cfc70b82d77 Mon Sep 17 00:00:00 2001 From: "Wayne.Xu" Date: Tue, 27 Nov 2018 14:04:48 -0500 Subject: [PATCH 2/3] solve image display problem --- app.js | 30 +++++++++++++++++------------- index.html | 30 ++++++++++++++---------------- styles.css | 6 ------ 3 files changed, 31 insertions(+), 35 deletions(-) delete mode 100644 styles.css diff --git a/app.js b/app.js index 36a2039..51c8141 100644 --- a/app.js +++ b/app.js @@ -3,32 +3,36 @@ var renderData; var page = 0; const renderImages = function (imgdata, page) { - var pageData = imgdata.slice((page * 12), (page * 12 + 11)); + var pageData = imgdata.slice((page * 12), ((page + 1) * 12)); var numpages = Math.ceil(imgdata.length / 12); let imgContainer = $("#images"); imgContainer.empty(); pageData.forEach(function (item) { - let div = $('
'); + let divCol = $('
'); + divCol.addClass("col-md-3"); + let divTh = $('
'); + divTh.addClass("thumbnail") + let aHr = $(''); + aHr.attr('href', item['href']); let img = $(''); img.attr('src', item['href']); + img.attr('alt', item['title']); + img.css("width","100%") + img.appendTo(aHr); let caption = $('
'); - div.addClass("col-md-3 profile-card-1"); - img.addClass("img-fluid"); - img.appendTo(div); - caption.addClass("card-content"); + caption.addClass("caption"); caption.text(item['title']); - caption.appendTo(div); + caption.appendTo(aHr); let descrip = $('
'); descrip.text(item['desc']); - descrip.appendTo(div); - div.appendTo(imgContainer); + descrip.appendTo(aHr); + aHr.appendTo(divTh); + divTh.appendTo(divCol); + divCol.appendTo(imgContainer); descrip.hide(); - img.mouseover(function () { + img.hover(function () { descrip.show(); }); - img.mouseout(function () { - descrip.hide(); - }); }) if ((page + 1) < numpages) { // render link - add click event diff --git a/index.html b/index.html index 708f5e3..9cfa7cd 100644 --- a/index.html +++ b/index.html @@ -8,32 +8,30 @@ Nasa Image Previewer -
-
+

Nasa Image Previewer

-
- -
- -
- - -
+
+
+ Search Term +
+ +
+
-
-
- -
-
+
+ +
+
+
+
diff --git a/styles.css b/styles.css deleted file mode 100644 index 90b6f79..0000000 --- a/styles.css +++ /dev/null @@ -1,6 +0,0 @@ -.profile-card-1 { - position: relative; - float: left; - overflow: hidden; - border:none; - } \ No newline at end of file From 760d9f60efe9f7b2d88c881dde42fadc9fe710c7 Mon Sep 17 00:00:00 2001 From: "Wayne.Xu" Date: Tue, 27 Nov 2018 14:07:54 -0500 Subject: [PATCH 3/3] remove console.log --- app.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app.js b/app.js index 51c8141..ee629c2 100644 --- a/app.js +++ b/app.js @@ -35,7 +35,6 @@ const renderImages = function (imgdata, page) { }); }) if ((page + 1) < numpages) { - // render link - add click event let linkContainer = $('#seemore'); linkContainer.empty(); let link = $(''); @@ -43,7 +42,6 @@ const renderImages = function (imgdata, page) { link.addClass("badge badge-primary"); link.appendTo(linkContainer); $(linkContainer).on('click', function () { - console.log("see more"); page = page + 1; renderImages(renderData, page); })