Skip to main content

Build Your Own Image Search Engine Using JavaScript & Unsplash API

Have you ever wanted to create your own image search engine? Maybe a tool that lets users type a keyword and instantly fetches high-quality images from the internet? Well, you’re in the right place!

In this blog, I’ll guide you step by step to build an Image Search Engine using HTML, CSS, JavaScript, and the Unsplash API. The best part? It’s super simple, fully responsive, and requires no backend!

Let’s dive in! 🚀

What Are We Building?

We are creating a web app where users can:

✅ Search for images by typing a keyword.
✅ View high-quality images fetched from Unsplash API.
✅ Click on images to open them in full size on Unsplash.
✅ Load more results with a "Show More" button.
✅ Enjoy a responsive and modern design.


Technologies Used

  • HTML → To structure the webpage
  • CSS → To style the webpage
  • JavaScript → To fetch data from Unsplash API
  • Unsplash API → To retrieve high-quality images

Step 1: Setting Up the Project

First, create a project folder and add the following files:

📂 image-search-engine/
├── 📄 index.html (Main HTML file)
├── 🎨 style.css (Stylesheet)
├── ⚡ script.js (JavaScript functionality)


Step 2: Writing the HTML

Create an index.html file and add the following code:



<!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>
    <main>
        <div class="container">
            <div class="hero">
                <h1>Find the Perfect Image for Your Project</h1>
                <p>Search millions of high-quality images powered by Unsplash. Just type a keyword and explore!</p>
                <form>
                    <input type="text" placeholder="Search for images...">
                    <img src="search-icon.svg" alt="Search Icon">
                </form>
                <p class="discover">Discover stunning images for free. Start searching now!</p>
            </div>
            <div class="search-result">
                <div id="loader" class="loader"></div>
            </div>
            <div class="show-more">
                <button class="show-more-btn">Show More</button>
            </div>
        </div>
    </main>
    <footer>
        <p>Powered by Unsplash API | Developed by Muhammad Kashif Pathan</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

📝 Explanation:

  • The search bar allows users to enter a keyword.
  • The search results are displayed inside .search-result.
  • A "Show More" button appears when there are more images to load.
  • The footer credits the developer and Unsplash API.


🎨 Step 3: Styling with CSS

Create a style.css file and add the following styles:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
    Unicode', Geneva, Verdana, sans-serif;
}
body {
    color: white;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(9, 9, 9);
}
main {
    width: 100%;
    height: calc(100vh - 52px);
    overflow: hidden auto;
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.986), rgba(0, 0, 0, 0.936)),
        url("bg-img.jpeg");
    background-size: cover;
}
main::-webkit-scrollbar {
    width: 0;
}
.container .hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.968), rgba(0, 0, 0, 0.635)),
        url("coding.jpg");
    background-size: cover;
    padding: 20px;
    background-position: center;
    background-size: cover;
}
.hero h1 {
    margin-bottom: 20px;
    background-color: rgba(10, 198, 60, 0.1);
    border: 2px solid rgb(10, 198, 60);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 16px;
    display: inline-flex;
}
.hero p:nth-child(2) {
    margin: 20px auto;
}
.hero form {
    display: flex;
    border-radius: 5px;
    width: 100%;
    justify-content: center;
}
.hero form input {
    border: none;
    outline: none;
    border-radius: 10px 15px 15px 10px;
    padding: 10px;
    background-color: black;
    color: white;
    max-width: 500px;
    width: 100%;
    position: relative;
    left: 20px;
    font-size: 16px;
}
.hero form img {
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgb(10, 198, 60);
    border: 5px solid rgb(24, 24, 24);
    position: relative;
    left: -20px;
    transition: all 0.8s linear;
}
.hero form img:hover {
    border: 5px solid rgb(10, 198, 60);
}
.hero .discover {
    margin: 20px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}
.show-more button {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    background-color: rgb(10, 198, 60);
    color: white;
    font-weight: 700;
    transition: background-color 0.3s ease;
}
.hero form button:hover,
.show-more button:hover {
    background-color: rgb(5, 158, 28);
}
.search-result {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding: 20px;
}
.search-result a {
    width: calc(33.333% - 20px);
    max-width: 300px;
    background-color: transparent;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.search-result a img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.search-result a:hover {
    transform: scale(1.05);
}
.hide {
    display: none;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
    transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: #888;
}
::-webkit-scrollbar-thumb:active {
    background: #aaa;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #555 #1e1e1e;
}
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
    background-color: transparent;
    display: none;
}
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.show-more {
    display: flex;
    justify-content: center;
}
.show-more-btn {
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    display: none;
}
footer p {
    font-size: 10px;
    color: gray;
    font-weight: 700;
    padding: 20px;
    height: 52px;
}
@media (max-width: 768px) {
    .search-result a {
        width: calc(50% - 10px);
    }
}
@media (max-width: 550px) {
    main {
        padding: 20px 0;
    }
    .container .hero {
        padding: 20px 10px;
    }
    .hero, .hero h1 {
        font-size: 12px;
    }
    .search-result {
        padding: 10px;
    }
    .search-result a {
        min-width: 100%;
    }
    .search-result a img {
        height: 250px;
    }
}


📝 Explanation:

  • A dark theme with a stylish look.
  • The search input is centered and responsive.
  • The images appear in a grid format with hover effects.
  • The "Show More" button is hidden by default until results are loaded.

Your web page will look like this.

image-search-engine-project-by-muhammad-kashif-pathan

⚡ Step 4: JavaScript for Functionality

Create a script.js file and add the following code:

const accessKey = "YOUR_UNSPLASH_API_KEY";
const form = document.querySelector("form");
const searchInp = document.querySelector("input");
const searchResult = document.querySelector(".search-result");
const showMoreBtn = document.querySelector(".show-more-btn");
const loader = document.getElementById("loader");
const discoverText = document.querySelector(".discover");
    
let keyword = "";
let page = 1;
    
async function searchImages() {
    keyword = searchInp.value.trim();
    if (!keyword) return;
   
    if (page === 1) {
        searchResult.innerHTML = "";
        discoverText.textContent = "";
        discoverText.style.display = "block";
    }
    
    loader.style.display = "block";
    
    const url = `https://api.unsplash.com/search/photos?page=${page}&query=${keyword}&client_id=${accessKey}&per_page=12`;
    
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Failed to fetch images");
        
        const data = await response.json();
        const results = data.results;
        
        if (results.length === 0) {
            discoverText.textContent = `No images found for "${keyword}". Try a different keyword.`;
            showMoreBtn.style.display = "none";
            loader.style.display = "none";
            return;
        }
        
        // Append new images
        results.forEach((result) => {
            const image = document.createElement("img");
            image.src = result.urls.small;
            image.alt = result.alt_description || "Search result image";
            
            const imageLink = document.createElement("a");
            imageLink.href = result.links.html;
            imageLink.target = "_blank";
            
            imageLink.appendChild(image);
            searchResult.appendChild(imageLink);
        });
        
        discoverText.style.display = "none";
        
        showMoreBtn.style.display = results.length > 0 ? "block" : "none";
    } catch (error) {
        console.error("Error fetching images:", error);
        searchResult.innerHTML = `<p class="error-message">Something went wrong. Please try again later.</p>`;
    } finally {
        // Hide loader after fetching is complete
        setTimeout(() => {
            loader.style.display = "none";
        }, 500);
    }
}
 
form.addEventListener("submit", (e) => {
    e.preventDefault();
    page = 1;
    searchImages();
});
showMoreBtn.addEventListener("click", () => {
    page++;
    searchImages();
});


📝 Explanation:

  • Fetches images from Unsplash API.
  • Displays results dynamically on the webpage.
  • Shows a "Show More" button for additional images.

🎉 Conclusion

Congratulations! 🎉 You’ve successfully built your own Image Search Engine! This is a great beginner-friendly project that teaches API integration, dynamic content rendering, and responsive design.

🔗 Try the live demo: GitHub Link

👉 What will you build next? Let me know in the comments! 🚀


Comments

Post a Comment

Popular posts from this blog

Most Important MCQs for Junior Clerk Test – Computer, General Knowledge, Islamiat & More - MKPathanDev

Introduction Briefly explain that this blog includes high-chance MCQs for the Junior Clerk test (BPS-11). Mention that it covers all important subjects based on past papers and expected syllabus. 📚 Subjects Covered in This Blog General Knowledge Pakistan Current Affairs World Current Affairs Pakistan Studies Islamiat Computer Knowledge Category 1: General Knowledge (Questions 1–42) Q1: What is the largest continent by area? A) Africa B) Asia C) Europe D) Antarctica Q2: What is the highest mountain in the world? A) K2 B) Kangchenjunga C) Mount Everest D) Lhotse Q3: Which ocean is the largest? A) Atlantic B) Indian C) Pacific D) Arctic Q4: Who invented the telephone? A) Thomas Edison B) Alexander Graham Bell C) Nikola Tesla D) Guglielmo Marconi Q5: What is the chemical symbol for water? A) H₂O B) CO₂ C) O₂ D) NaCl Q6: Which planet is known as the Red Planet? A) Venus B) Mars C) Jupiter D) Mercury Q7: What is the capital city of Australia? A) Sydney...
Post a Comment
Read more

Muhammad Kashif Pathan – The Self-Taught Web Developer and Tech Enthusiast

  Introduction Hello! I'm Muhammad Kashif Pathan, a self-taught full-stack web developer and ethical hacking enthusiast from Swat (KPK, Pakistan). My journey in tech started from curiosity and transformed into a full-time passion for building powerful web applications. At just  20 years old (born on March 8, 2004) ,  I have worked on multiple real-world projects, ranging from chat applications to social media clones, e-commerce platforms, and productivity tools. My expertise includes HTML, CSS, Tailwind CSS, JavaScript, React.js, Node.js, MongoDB, Express.js, and cybersecurity knowledge. Early Life & Education Growing up in Swat, Pakistan, I always had a deep interest in technology. After completing my  FSc (12th grade) , I chose to pursue self-learning, using YouTube, Google, ChatGPT, AI tools, and tech articles as my primary sources of knowledge. Without access to local tech communities or software companies, I took full advantage of online resources, develo...
Post a Comment
Read more

A Roadmap to Becoming a Successful Coder: Tips and Strategies

  Introduction In today's digital age, coding has become an invaluable skill. Whether you're interested in building websites, developing mobile apps, or working on cutting-edge software, the path to becoming a successful coder requires dedication, learning, and practice. In this article, we'll explore the key steps and strategies to help you embark on your journey toward coding success. What Defines a Successful Coder? Before delving into the tips and tricks, let's define what makes a coder successful. A successful coder possesses several key attributes: Efficiency:  They can write code that accomplishes its intended purpose while minimizing resource usage. Reliability:  Their code is robust, resilient, and resistant to errors and bugs. Clarity : Successful coders create code that is easy to understand, both for themselves and for others. Debugging Skills:  They are adept at identifying and rectifying errors in their code. Strategies to Become a Successful Coder Now ...
Post a Comment
Read more