Overview

Pixev is a web application designed for searching and displaying high-quality images using the Unsplash API. Users can search for images based on categories or specific keywords and view detailed results in a clean, user-friendly interface. This project demonstrates the use of the Unsplash API for fetching images and showcases the integration of various web technologies.

Features

API Used

Unsplash API

Example API Request

GET https://api.unsplash.com/search/photos?page=1&query=Nature&client_id=YOUR_ACCESS_KEY

Replace YOUR_ACCESS_KEY with your Unsplash API key.

How It Works

  1. User Input: Users enter a search term or select a category.
  2. API Call: The application makes a request to the Unsplash API with the search term.
  3. Display Results: Results are displayed in a grid layout with images and links.
  4. Pagination: Users can load more results by clicking the "Show more" button.

Code Snippets

HTML Structure

<nav class="navbar">
    <header class="header obj-width">
        <!-- Logo and Navigation Links -->
    </header>
    <h1>Search for the perfect image to match your needs.</h1>
    <form class="input-div">
        <input type="text" id="search-input" placeholder="Search for images">
        <button id="search-button">Search</button>
    </form>
</nav>
<div class="search-results">
    <!-- Search results will be dynamically inserted here -->
</div>
<button id="show-more-button">Show more</button>

JavaScript for Fetching Images

const accessKey = "YOUR_ACCESS_KEY";
const button = document.getElementById("search-button");
const inputEl = document.getElementById("search-input");
const searchResults = document.querySelector(".search-results");
const showMore = document.getElementById("show-more-button");

let inputData = "";
let page = 1;

async function searchImages(inputData) {
    const url = \`https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accessKey}\`;
    try {
        const response = await fetch(url);
        const data = await response.json();
        const results = data.results;

        if (page === 1) {
            searchResults.innerHTML = "";
        }

        results.map((result) => {
            const imageWrapper = document.createElement("div");
            imageWrapper.classList.add("search-result");

            const image = document.createElement("img");
            image.src = result.urls.small;
            image.alt = result.alt_description;

            const imageLink = document.createElement("a");
            imageLink.target = "_blank";
            imageLink.textContent = result.alt_description;

            imageWrapper.appendChild(image);
            imageWrapper.appendChild(imageLink);
            searchResults.appendChild(imageWrapper);
        });

        page++;
        if (page > 1) {
            showMore.style.display = "block";
        }
    } catch (error) {
        console.error("An error occurred:", error);
        searchResults.innerHTML = "
Sorry, something went wrong. Please try again later.
";
        showMore.style.display = "none";
    }
}

button.addEventListener("click", (event) => {
    event.preventDefault();
    inputData = inputEl.value.trim();
    if (inputData === "") {
        alert("Please enter something.");
        return;
    }
    page = 1;
    searchImages(inputData);
});

showMore.addEventListener("click", () => {
    if (inputData) {
        searchImages(inputData);
    } else {
        alert("Please enter something.");
    }
});

References

Developer Accounts