diff --git a/app.js b/app.js new file mode 100644 index 0000000..7e287b8 --- /dev/null +++ b/app.js @@ -0,0 +1,102 @@ +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 { + // call to api to 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 = $("#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") + // 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..ec049da --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + Document + + + + + +

Nasa Image Previewer

+ + + +
+
+ +
+ +
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5f77ddc --- /dev/null +++ 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