initial files created

aayush-makwana · Nov 6, 2023 · 168a375 · 168a375
1 parent db41273
commit 168a375
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Image Search Engine</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <h1>Image Search Engine</h1>
+
+  <form id="search-form" autocomplete="off">
+    <input type="text" id="search-box" placeholder="Search anything here..." />
+    <button>Search</button>
+  </form>
+  <div id="search-result"></div>
+  <button id="show-more-btn">Show more</button>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js 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();
+})
diff --git a/style.css 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;
+}