From 168a3757e4fe6364231844d77337dadf4b977e64 Mon Sep 17 00:00:00 2001
From: Aayush Makwana <86557889+aayush-makwana@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:11:03 +0530
Subject: [PATCH] initial files created
---
index.html | 24 +++++++++++++++++
script.js | 46 +++++++++++++++++++++++++++++++++
style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 145 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a34627a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Image Search Engine
+
+
+
+
+ Image Search Engine
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2ff6a23
--- /dev/null
+++ b/script.js
@@ -0,0 +1,46 @@
+const accessKey = "HUrFieHL2s-UZ2juTRJc3rjRZZZXty-tCTJFpR4c8fw";
+
+const searchForm = document.getElementById("search-form");
+const searchBox = document.getElementById("search-box");
+const searchResult = document.getElementById("search-result");
+const showMoreBtn = document.getElementById("show-more-btn");
+
+let keyword = "";
+let page = 1;
+
+async function searchImages() {
+ keyword = searchBox.value;
+ const url = `https://api.unsplash.com/search/photos?page=${page}&query=${keyword}&client_id=${accessKey}&per_page=12`;
+
+ const response = await fetch(url);
+ const data = await response.json();
+
+ if (page === 1) {
+ searchResult.innerHTML = "";
+ }
+
+ const results = data.results;
+
+ results.map((result) => {
+ const image = document.createElement("img");
+ image.src = result.urls.small;
+ const imageLink = document.createElement("a");
+ imageLink.href = result.links.html;
+ imageLink.target = "_blank";
+
+ imageLink.appendChild(image);
+ searchResult.appendChild(imageLink);
+ })
+ showMoreBtn.style.display = "block";
+}
+
+searchForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ page = 1;
+ searchImages();
+})
+
+showMoreBtn.addEventListener("click", (e) => {
+ page++;
+ searchImages();
+})
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..52375c1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,75 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins', sans-serif;
+ box-sizing: border-box;
+}
+body {
+ background: #39297b;
+ color: #fff;
+}
+h1 {
+ text-align: center;
+ margin: 100px auto 50px;
+ font-weight: 600;
+}
+form {
+ width: 90%;
+ max-width: 600px;
+ margin: auto;
+ height: 80px;
+ background: #434989;
+ display: flex;
+ align-items: center;
+ border-radius: 8px;
+}
+form input {
+ flex: 1;
+ height: 100%;
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: #fff;
+ font-size: 18px;
+ padding: 0 30px;
+}
+form button {
+ padding: 0 40px;
+ height: 100%;
+ background: #ff3929;
+ color: #fff;
+ font-size: 18px;
+ border: 0;
+ outline: 0;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ cursor: pointer;
+}
+::placeholder {
+ color: #fff;
+ font-size: 18px;
+}
+#show-more-btn {
+ background: #ff3929;
+ color: #fff;
+ border: 0;
+ outline: 0;
+ padding: 10px 20px;
+ border-radius: 4px;
+ margin: 10px auto 100px;
+ cursor: pointer;
+ display: none;
+}
+#search-result {
+ width: 80%;
+ margin: 100px auto 50px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 40px;
+}
+#search-result img {
+ width: 100%;
+ height: 230px;
+ object-fit: cover;
+ border-radius: 5px;
+}
\ No newline at end of file