From bc7fb5c5cfb84096a3356c723527b5a9c4f2c291 Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Sun, 25 Nov 2018 18:00:06 -0500 Subject: [PATCH 1/8] basic prototype --- addImages.js | 0 index.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 addImages.js create mode 100644 index.html diff --git a/addImages.js b/addImages.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..788abab --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + Mark's Image finder + + + + + +

Nasa Image Provider

+ +
+ + + Search term: + + + + + + + + \ No newline at end of file From 536608a90d779d386e87f38c575b5a70c549f92c Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Sun, 25 Nov 2018 19:39:20 -0500 Subject: [PATCH 2/8] need to change where new images go and what image to start on --- index.html | 49 +++++++++++++++++++++++++++++++------------------ 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 788abab..70b1a69 100644 --- a/index.html +++ b/index.html @@ -5,37 +5,45 @@ Mark's Image finder + + + + + + + + + +

Nasa Image Provider

-
- - Search term: - - +

+
Click here to load more images
 \ No newline at end of file From fb4c474ae4b6667123c6379680140cd51df0e097 Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Sun, 25 Nov 2018 23:54:39 -0500 Subject: [PATCH 5/8] # images left template --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index 9ea8eba..85e314d 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,9 @@

Nasa Image Provider

$("#showMore").text("Nothing more to show").css({ 'color': 'red', 'font-size': '150%' });; } } + //$("#showMore").append((imagesJSON.collection.items.length - itemID) + " more pics to show") + + } function appendImage(imageJSON){ From 6c028a9c616d967f50f4116486ff55b31156a2d5 Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Mon, 26 Nov 2018 00:03:56 -0500 Subject: [PATCH 6/8] finalized --- addImages.js | 65 ++++++++++++++++++++++++++++++++++++++++ index.html | 83 +++++++--------------------------------------------- 2 files changed, 75 insertions(+), 73 deletions(-) diff --git a/addImages.js b/addImages.js index e69de29..428fdbf 100644 --- a/addImages.js +++ b/addImages.js @@ -0,0 +1,65 @@ + + //track what point in NASA's DB we are searching for photos from + var itemID = 0; + const picturesPerClick = 12; + + //add images to browser through sub functions + function addImages(searchTerm){ + $.getJSON("https://images-api.nasa.gov/search?q="+searchTerm, function (imagesJSON){ + showNextX(imagesJSON,picturesPerClick) + }); + } + + //shows the next numImg files + //starts trying to add images from imagesJSON at location itemID + //uses recursion to deal with async loops when the image can't be displayed + //interacts with html when there are no images left to display + function showNextX(imagesJSON,numImg){ + let maxItemID = itemID + numImg; + for (; itemID < maxItemID;itemID++){ + if (imagesJSON.collection.items[itemID]){ + let image = imagesJSON.collection.items[itemID].href; + //get the image urls from the json collection of images + $.getJSON(image, function (imageJSON){ + //append a url in imageJSON if one exists, otherwise try again + if (!appendImage(imageJSON)){ + showNextX(imagesJSON,1) + } + }); + }else { + //let the user know there are no more images to display + console.log("ran out of items"); + $("#showMore").text("Nothing more to show").css({ 'color': 'red', 'font-size': '150%' });; + } + } + //$("#showMore").append((imagesJSON.collection.items.length - itemID) + " more pics to show") + } + + //called to append a specific version of an image from the JSON including many versions of that file + function appendImage(imageJSON){ + for (let i=0;i<20;i++){ + let url = imageJSON[i]; + if ( (typeof(url)=="string") && urlIsImg(url) ){ + appendFileLink(imageJSON[i]); + return true; + } + } + return false; + } + + + //Interacts with the html file + //function to append a single file to the html file + function appendFileLink(url){ + if (urlIsImg(url) ) + $("p").append("") + else + console.log("unsupported file type: " + url) + } + + //UTIL FUNCTION + //check if a given url is a displayable image + function urlIsImg(url){ + return ( url.endsWith('.png') || url.endsWith('.img') || url.endsWith('.jpg')) + } + diff --git a/index.html b/index.html index 85e314d..7e98fda 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ Mark's Image finder - + + + @@ -15,83 +17,18 @@ + + - -

Nasa Image Provider

-
+

Nasa Image Provider

+
Search term: - + +

+
Click here to load more images
 - - - - - \ No newline at end of file From 5fa6937801577f81825ec39c0b4314853ecebac8 Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Mon, 26 Nov 2018 19:55:57 -0500 Subject: [PATCH 7/8] description work in progress --- addImages.js | 48 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 11 deletions(-) diff --git a/addImages.js b/addImages.js index 428fdbf..fb1601e 100644 --- a/addImages.js +++ b/addImages.js @@ -14,18 +14,44 @@ //starts trying to add images from imagesJSON at location itemID //uses recursion to deal with async loops when the image can't be displayed //interacts with html when there are no images left to display + + + // for(var i = 0; i < length; i++){ + // var variable = variables[i]; + // (function(var){ //start wrapper code + // otherVariable.doSomething(var, function(err){ //callback for when doSomething ends + // do something else with var; //please note that i'm dealing with var here, not variable + // } + // })(variable);//passing in variable to var here + // } + + + + function showNextX(imagesJSON,numImg){ let maxItemID = itemID + numImg; for (; itemID < maxItemID;itemID++){ + //if we have not reached the end of the images if (imagesJSON.collection.items[itemID]){ let image = imagesJSON.collection.items[itemID].href; - //get the image urls from the json collection of images - $.getJSON(image, function (imageJSON){ - //append a url in imageJSON if one exists, otherwise try again - if (!appendImage(imageJSON)){ - showNextX(imagesJSON,1) - } - }); + //use IVF - immediately invoked function to pass variable to callback inside loop + let descrip = imagesJSON.collection.items[itemID].data[0].description; + (function(descr){ + //get the image urls from the json collection of images + $.getJSON(image, function (imageJSON){ + console.log(itemID) + //append a url in imageJSON if one exists, otherwise try again + console.log(descr) + if (!appendImage(imageJSON, descr)){ + showNextX(imagesJSON,1) + + } + //else + //$("p").append(imagesJSON.collection.items[itemID].data[0].description+"
") + }); + })(descrip)//end IVF + + }else { //let the user know there are no more images to display console.log("ran out of items"); @@ -36,11 +62,11 @@ } //called to append a specific version of an image from the JSON including many versions of that file - function appendImage(imageJSON){ + function appendImage(imageJSON, desc){ for (let i=0;i<20;i++){ let url = imageJSON[i]; if ( (typeof(url)=="string") && urlIsImg(url) ){ - appendFileLink(imageJSON[i]); + appendFileLink(imageJSON[i], desc); return true; } } @@ -50,9 +76,9 @@ //Interacts with the html file //function to append a single file to the html file - function appendFileLink(url){ + function appendFileLink(url, desc){ if (urlIsImg(url) ) - $("p").append("") + $("p").append("
"+desc) else console.log("unsupported file type: " + url) } From 312faad71ab86a283e7128899f25e37850f5f4af Mon Sep 17 00:00:00 2001 From: MarkCBall Date: Mon, 26 Nov 2018 21:48:35 -0500 Subject: [PATCH 8/8] finalized project - description pops up on mouseover --- addImages.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/addImages.js b/addImages.js index fb1601e..a018416 100644 --- a/addImages.js +++ b/addImages.js @@ -34,31 +34,23 @@ //if we have not reached the end of the images if (imagesJSON.collection.items[itemID]){ let image = imagesJSON.collection.items[itemID].href; - //use IVF - immediately invoked function to pass variable to callback inside loop + //use IVF - immediately invoked function - to pass variable to callback inside loop let descrip = imagesJSON.collection.items[itemID].data[0].description; (function(descr){ //get the image urls from the json collection of images $.getJSON(image, function (imageJSON){ - console.log(itemID) //append a url in imageJSON if one exists, otherwise try again - console.log(descr) if (!appendImage(imageJSON, descr)){ showNextX(imagesJSON,1) - } - //else - //$("p").append(imagesJSON.collection.items[itemID].data[0].description+"
") }); })(descrip)//end IVF - - }else { //let the user know there are no more images to display console.log("ran out of items"); $("#showMore").text("Nothing more to show").css({ 'color': 'red', 'font-size': '150%' });; } } - //$("#showMore").append((imagesJSON.collection.items.length - itemID) + " more pics to show") } //called to append a specific version of an image from the JSON including many versions of that file @@ -78,7 +70,7 @@ //function to append a single file to the html file function appendFileLink(url, desc){ if (urlIsImg(url) ) - $("p").append("
"+desc) + $("p").append("") else console.log("unsupported file type: " + url) }