From b105dbddb495743e02db7cad906ba075ab1bf2b6 Mon Sep 17 00:00:00 2001 From: mattsaeeda Date: Mon, 26 Nov 2018 11:46:29 -0500 Subject: [PATCH 1/2] Files and Codes adde --- app.js | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 37 +++++++++++++++++++++++ styles.css | 0 3 files changed, 125 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..89f0e99 --- /dev/null +++ b/app.js @@ -0,0 +1,88 @@ +var nasaData = {}; +var renderData; +var page = 0; +const setSearchTerm = function () { + var searchTerm = "" + searchTerm = $("input[name='searchterm']").val() + console.log(searchTerm) + if (searchTerm === "") { + // display a message + alert("You need to input a search term") + } else { + // API Call Get Data + let requestParams = { + q: searchTerm, + media_type: 'image' + } + getData(requestParams) + } +} +const getData = function(params) { + $.ajax({ + url: "https://images-api.nasa.gov/search", + type: 'GET', + data: params, + dataType: 'json' + }) + .done(function (data) { + nasaData = data["collection"]["items"] + // [{ data:[{title: '', description: ''}], links: [{href: '''}]] + + 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 (data) { + alert("Request Failed", data) + }) +} +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) { + var div = $('
').addClass('imgHolder') + var img = $(''); + img.attr('src', item['href']); + var caption = $('
').addClass('title') + img.appendTo(div); + img.css("width","25%") + caption.text(item['title']) + caption.appendTo(div) + var descrip = $('
').addClass('desc hide') + descrip.text(item['desc']) + descrip.appendTo(div) + div.appendTo(imgContainer) + descrip.hide() + }) + if ((page + 1) < numpages) { + // render link - add click event + var linkContainer = $('#seemore') + linkContainer.empty() + var link = $('') + link.text('See More') + link.appendTo(linkContainer) + $(linkContainer).on('click', function() { + console.log("see ,,,") + page = page + 1 + renderImages(renderData, page) + }) + } +} +const nasaPreview = function () { + console.log("Beginning of Preview Code") + // On button click + // Grab the search term + $('#btn').on('click', setSearchTerm) + // Call the API a) Get Data or b) Get Error + // Store Data + // Parse 1st 12 Data Items & Insert into View + // If more than 12 render a `see more` link +} +$(document).ready(nasaPreview); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4ae9425 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + Document + + + + + +

Nasa Image Previewer

+ + + +
+ + +
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e69de29 From 4d8bb4971f8732315c479bb2935e556f32d75692 Mon Sep 17 00:00:00 2001 From: mattsaeeda Date: Tue, 27 Nov 2018 12:45:53 -0500 Subject: [PATCH 2/2] some changes --- app.js | 150 +++++++++++++++++++++++++++++------------------------ index.html | 13 ++--- styles.css | 25 +++++++++ 3 files changed, 114 insertions(+), 74 deletions(-) diff --git a/app.js b/app.js index 89f0e99..7e287b8 100644 --- a/app.js +++ b/app.js @@ -1,82 +1,94 @@ var nasaData = {}; var renderData; var page = 0; + const setSearchTerm = function () { - var searchTerm = "" - searchTerm = $("input[name='searchterm']").val() - console.log(searchTerm) - if (searchTerm === "") { - // display a message - alert("You need to input a search term") - } else { - // API Call Get Data - let requestParams = { - q: searchTerm, - media_type: 'image' + var searchTerm = "" + searchTerm = $("input[name='searchterm']").val() + console.log(searchTerm) + if (searchTerm === "") { + // display a message + alert("You need to input a search term") + } else { + // call to api to get data + let requestParams = { + q: searchTerm, + media_type: 'image' + } + getData(requestParams) } - getData(requestParams) - } } -const getData = function(params) { - $.ajax({ - url: "https://images-api.nasa.gov/search", - type: 'GET', - data: params, - dataType: 'json' - }) - .done(function (data) { - nasaData = data["collection"]["items"] - // [{ data:[{title: '', description: ''}], links: [{href: '''}]] - - renderData = nasaData.map(function (item) { - return { - title: item['data'][0]['title'], - desc: item['data'][0]['description'], - href: item['links'][0]['href'] - } + + +const getData = function (params) { + $.ajax({ + url: "https://images-api.nasa.gov/search", + type: 'GET', + data: params, + dataType: 'json' }) - renderImages(renderData, page) - }) - .fail(function (data) { - alert("Request Failed", data) - }) + .done(function (data) { + nasaData = data["collection"]["items"] + // [{ data:[{title: '', description: ''}], links: [{href: '''}]] + + 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 (data) { + alert("Request Failed", data) + }) } -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) { - var div = $('
').addClass('imgHolder') - var img = $(''); - img.attr('src', item['href']); - var caption = $('
').addClass('title') - img.appendTo(div); - img.css("width","25%") - caption.text(item['title']) - caption.appendTo(div) - var descrip = $('
').addClass('desc hide') - descrip.text(item['desc']) - descrip.appendTo(div) - div.appendTo(imgContainer) - descrip.hide() - }) - if ((page + 1) < numpages) { - // render link - add click event - var linkContainer = $('#seemore') - linkContainer.empty() - var link = $('') - link.text('See More') - link.appendTo(linkContainer) - $(linkContainer).on('click', function() { - console.log("see ,,,") - page = page + 1 - renderImages(renderData, page) + + +const renderImages = function (imgdata, page) { + var pageData = imgdata.slice((page * 12), (page * 12 + 11)); + var numpages = Math.ceil(imgdata.length / 12); + let imgContainer = $("#photoHolder") + imgContainer.empty(); + pageData.forEach(function (item) { + var div = $('
').addClass('imgHolder') + var img //= $(''); + var caption = $('
').addClass('title'); + var descrip = $('
').addClass('descHide'); + img.attr('src', item['href']); + img.css("width", "25%"); + img.css("height", "25%"); + img.appendTo(div); + // img.css("display" , "inline") + caption.text(item['title']); + caption.appendTo(div); + descrip.text(item['desc']); + descrip.appendTo(div); + div.appendTo(imgContainer); + //descrip.hide() + $('images').on('click' , function() { + $('desc').show() + }) }) - } + if ((page + 1) < numpages) { + // render link - add click event + var linkContainer = $('#seemore') + linkContainer.empty() + var link = $('') + link.text('See More') + link.appendTo(linkContainer) + $(linkContainer).on('click', function () { + console.log("see ,,,") + page = page + 1 + renderImages(renderData, page) + }) + } } + + const nasaPreview = function () { - console.log("Beginning of Preview Code") + console.log("Beginning of Preview Code") // On button click // Grab the search term $('#btn').on('click', setSearchTerm) @@ -85,4 +97,6 @@ const nasaPreview = function () { // Parse 1st 12 Data Items & Insert into View // If more than 12 render a `see more` link } + + $(document).ready(nasaPreview); \ No newline at end of file diff --git a/index.html b/index.html index 4ae9425..ec049da 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@ Document - + -

Nasa Image Previewer

+

Nasa Image Previewer

-
- - +
+
+
+
+
- diff --git a/styles.css b/styles.css index e69de29..5f77ddc 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,25 @@ +#head1 { + text-align: center; + color: rgb(17, 0, 255); +} + +#search { + background-color: lightgrey; + width: 300px; + border: 10px solid rgb(17, 0, 255); + padding: 25px; + margin: 25px; +} + +.imgHolder { + /* display: inline-flex; + flex-direction: row; + flex-wrap: wrap; */ + background-color: rgb(30, 255, 255); + } + + .descHide { + display: none; + visibility: hidden; + + } \ No newline at end of file