GBCBlockchain · dylanbaker21 · Nov 28, 2018 · Nov 28, 2018
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="favicon.ico"/>
+    <title>Nasa Image Viewer</title>
+</head>
+<body>
+    <div id="topContent">
+        <h1>NASA Image Searcher</h1>
+        <h6>Hover over images to see their title</h6>
+
+        <div class="input">
+            <input id="searchBar" type="text" placeholder="Search Term">
+            <button id="searchButton">Search</button>
+            <p id="hitCounter"></p>
+        </div>
+    </div>
+
+    <br>
+
+    <!-- div which holds all the pics-->
+    <div id="image">
+    </div>
+
+    <!-- # of images displayed and # total results -->
+    <div id="bottomContent">
+        <h6 id="hitsOnPage"></h6> <h6 id="totalResults"></h6>
+    </div>
+
+    <!-- button to show more pics -->
+    <div class="wrapper"><button id="showMore">Show More</button></div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+    <script src="underscore-min.js"></script>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,128 @@
+/* On document ready, apply tooltip to elements with the 
+data toggle */
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+})
+
+// Global array/variable declarations
+goodTitles = []
+cleanImgArray = []
+choppedImgs = []
+choppedTitles = []
+
+/* variables used to paginate. morePressed is incremented when user requests
+more images, x will then satisfy a while condition and display more images.
+they start at 1 because the first page is already displayed after searching */
+var morePressed = 1
+var x = 1 
+
+/* when search button is clicked, capture search bar user input
+and pass to the API call function */
+$("#searchButton").on('click', function(){
+    let searchTerm = $("#searchBar").val()
+    getImages(searchTerm)
+})
+
+/* this function queries NASA's database, filters the result
+and creates populates arrays with the data */
+function getImages(searchTerm) {
+
+    $.get("https://images-api.nasa.gov/search?q="+searchTerm+"&media_type=image", function(data){
+
+        // display total number of database hits in a text element
+       totalHits = data.collection.metadata.total_hits
+       $('#hitCounter').text(`Total database matches: ${totalHits}`)
+
+        _.filter(data.collection.items, function(item){
+            roughImgArrays = item.links
+
+            _.filter(roughImgArrays, function(href){
+                cleanImgArray.push(href.href)
+            })
+        })
+
+        _.filter(data.collection.items, function(item){
+            titles = item.data
+
+            _.filter(titles, function(title){
+                goodTitles.push(title.title)
+            })
+        })
+    })
+    setTimeout(setImages, 500)
+}
+
+/* iterate through the data arrays, creating new image elements
+and appending first 12 to a div. also execute functions tracking info */ 
+function setImages() {
+    for(i=0; (i<goodTitles.length) && (i<12); i++) {
+        var title = goodTitles[i]
+        var link = cleanImgArray[i]
+        let myImage = new Image(400,400)
+        myImage.src = link
+        myImage.title = title
+        $('#image').append(myImage)
+        $("img").attr("data-toggle", "tooltip")
+        resultsCount(cleanImgArray.length)
+        imageCount()
+    }
+    if (goodTitles.length > 12){
+        $('#showMore').css('visibility', 'visible')
+    }
+}
+
+/* when a user presses the show more button, splice the data
+arrays into 12 item arrays. iterate through these to display mores pages */
+$("#showMore").on('click', function(){
+    splice()
+    morePressed++ // tracks how many extra pages have been shown
+
+    try {
+        while (x<morePressed) { //pages only get displayed if show more is pressed
+            for(i=0; (i<choppedImgs[x].length); i++) {
+                var title = choppedTitles[x][i]
+                var link = choppedImgs[x][i]
+                let myImage = new Image(400,400)
+                myImage.src = link
+                myImage.title = title   //if condition ensures no dead links get displayed
+                if (myImage.title !== undefined && myImage.src !== undefined) {
+                    $('#image').append(myImage)
+                    $("img").attr("data-toggle", "tooltip")
+                } else {
+                    console.log("Failed to display: "+ myImage.src)
+                }
+            }
+            x++ //new content displayed so increase x
+        }
+    }
+    catch(error) { //catches the error when there's no images left display
+        $('#showMore').css('visibility', 'hidden')
+        console.log("No more images to display... "+error)
+    }
+    imageCount()
+})  
+
+// splice original arrays into 12 item pages
+function splice(){
+    var a = cleanImgArray
+    while(a.length) {
+        b = a.splice(0,12)
+        choppedImgs.push(b)
+    }
+    var c = goodTitles
+    while(c.length) {
+        d = c.splice(0,12)
+        choppedTitles.push(d)
+    }
+}
+
+// counts image elements and displays # of pics shown
+function imageCount() {
+    var o = document.getElementById('image').childElementCount
+    $('#hitsOnPage').text(`${o} of `)
+}
+
+// display total # of results
+function resultsCount(totalResults) {
+    $('#totalResults').text(`${totalResults} results`)
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,46 @@
+
+h1,h5,h6 {
+    text-align: center;
+}
+
+.input {
+    text-align: center;
+}
+
+#showMore {
+    visibility: hidden;
+    vertical-align: 50%;
+}
+
+html {
+    background-color: #83a4d4;
+    background: linear-gradient(to right, #83a4d4, #b6fbff);
+}
+
+#image {
+    text-align: center;
+    background-color: #83a4d4;
+    background: linear-gradient(to right, #83a4d4, #b6fbff);
+}
+
+body {
+    background-color: #83a4d4;
+    background: linear-gradient(to right, #83a4d4, #b6fbff);
+}
+
+#topContent {
+    background-color: white;
+}
+
+#hitsOnPage, #totalResults {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#bottomContent {
+    text-align: center;
+}
+
+.wrapper {
+    text-align: center;
+}