Merge pull request #89 from haard18/changed_unsplash

Changed unsplash folder into the existingAPI Folder
dishamodi0910 · May 15, 2024 · 3e64adc · 3e64adc
2 parents ce16bf5 + fdf2af6
commit 3e64adc
Show file tree

Hide file tree

Showing 12 changed files with 1,066 additions and 0 deletions.
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -14,4 +14,5 @@
 |[Giphy API](./GiphyAPI)|This API allows developers to integrate Giphy's vast library of GIFs into their own applications, websites, and services.|
 |[PokeAPI](./PokeAPI/)| This API provides data regarding Pokemon and others related. |
 |[Product Store API](./ProductStoreAPI/)| A Product Store API using NodeJS, ExpressJS, MongoDB and Mongoose |
+|[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images |
 
diff --git a/Existing_API_Collection/unsplashApi/.env.example b/Existing_API_Collection/unsplashApi/.env.example
@@ -0,0 +1 @@
+UNSPLASH_ACCESS="YOUR_ACCESS"
diff --git a/Existing_API_Collection/unsplashApi/.gitignore b/Existing_API_Collection/unsplashApi/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
diff --git a/Existing_API_Collection/unsplashApi/Keywords.png b/Existing_API_Collection/unsplashApi/Keywords.png
diff --git a/Existing_API_Collection/unsplashApi/index.html b/Existing_API_Collection/unsplashApi/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Gallery</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Image Gallery</h1>
+
+    <form id="searchForm">
+        <input type="text" id="keywordInput" placeholder="Enter keyword">
+        <button type="submit">Search</button>
+    </form>
+
+    <button id="randomImageButton">
+        Get Me a Random Image
+    </button>
+
+    <div id="imageContainer"></div>
+
+    <script>
+        document.getElementById('searchForm').addEventListener('submit', async function(event) {
+            event.preventDefault();
+            const keyword = document.getElementById('keywordInput').value.trim();
+            if (keyword !== '') {
+                const response = await fetch(`http://localhost:3000/images/keywordImage?query=${encodeURIComponent(keyword)}`);
+                const images = await response.json();
+                displayImages(images);
+            }
+        });
+
+        document.getElementById('randomImageButton').addEventListener('click', async function() {
+            const response = await fetch('http://localhost:3000/images/randomImage');
+            const images = await response.json();
+            displayImages(images);
+        });
+
+        async function displayImages(images) {
+            const imageContainer = document.getElementById('imageContainer');
+            imageContainer.innerHTML = '';
+
+            images.forEach(imageUrl => {
+                const img = document.createElement('img');
+                img.src = imageUrl;
+                img.alt = 'Image';
+                imageContainer.appendChild(img);
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/Existing_API_Collection/unsplashApi/index.js b/Existing_API_Collection/unsplashApi/index.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const axios = require('axios');
+const cors = require('cors');
+const imageRouter = require('./routes/image')
+const app = express();
+app.use(cors());
+app.use(express.json());
+app.use('/images', imageRouter);
+app.listen(3000, () => {
+    console.log('Server is running on port 3000');
+});