GBCBlockchain · MattSaeeda · Nov 26, 2018 · Nov 27, 2018
diff --git a/app.js 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 = $('<div>').addClass('imgHolder')
+        var img //= $('<img>');
+        var caption = $('<div>').addClass('title');
+        var descrip = $('<div>').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 = $('<a>')
+        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);
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
+<body>
+    <h1 id="head1">Nasa Image Previewer</h1>
+
+    <div id="search">
+        <label for="searchterm">Search Term</label>
+        <input type="text" name="searchterm">
+        <input type="submit" value="Search" id="btn">
+    </div>
+
+<div id="photoHolder">
+    <div id="images" >
+         <!-- holder for images  -->
+    </div>
+
+</div>
+
+    <div id="seemore">
+    </div>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+        crossorigin="anonymous"></script>
+
+    <script src="./app.js"></script>
+
+</body>
+
+</html>
diff --git 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;
+
+  }