Add files via upload

devsujay19 · Jan 29, 2024 · 8f65fd5 · 8f65fd5
1 parent bdb2cbb
commit 8f65fd5
Showing 1 changed file with 107 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NASA Eye</title>
+    <link
+      rel="shortcut icon"
+      href="https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg"
+      type="image/x-icon"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+      .image-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+      }
+
+      .image-container img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      #creditText {
+        color: rgb(168 162 158);
+        font-style: italic;
+        position: relative;
+        margin-top: 25px;
+      }
+
+      #promotionURL {
+        color: rgb(59, 59, 255);
+      }
+    </style>
+  </head>
+  <body class="bg-gray-900">
+    <div class="container mx-auto p-4">
+      <h1 class="text-2xl font-bold text-white text-center mb-4">NASA Eye</h1>
+      <p class="text-center mb-8 text-white">
+        Search and see images from the Image Library and Database of NASA
+        through their API. Make sure you're searching the term in small letter
+        (capital letter are not allowed).
+      </p>
+      <input
+        id="searchInput"
+        type="text"
+        class="block mb-6 bg-gray-900 w-full p-4 ps-10 text-sm border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        placeholder="Search Cosmic Images from NASA..."
+      />
+      <div id="imageContainer" class="image-container"></div>
+      <p id="creditText" class="text-xs text-stone-300 text-center">
+        All credit for the images goes to
+        <a
+          id="promotionURL"
+          rel="noopener"
+          title="Visit official Twitter/X handle of NASA : https://twitter.com/NASA"
+          class="underline"
+          href="https://twitter.com/NASA"
+          target="_blank"
+          >@NASA</a
+        >.
+      </p>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+      $(document).ready(function () {
+        $("#searchInput").on("keyup", function () {
+          const searchQuery = $(this).val();
+          if (searchQuery.length > 0) {
+            fetchImages(searchQuery);
+          } else {
+            $("#imageContainer").empty();
+          }
+        });
+
+        function fetchImages(searchQuery) {
+          $.ajax({
+            url: "https://images-api.nasa.gov/search",
+            type: "GET",
+            dataType: "json",
+            data: { q: searchQuery },
+            success: function (data) {
+              $("#imageContainer").empty();
+              data.collection.items.forEach(function (item) {
+                const image = $("<img>").attr("src", item.links[0].href);
+                $("#imageContainer").append(image);
+              });
+            },
+            error: function (error) {
+              console.log("Error fetching images:", error);
+            },
+          });
+        }
+      });
+    </script>
+  </body>
+</html>