Image Search App

A simple, responsive JavaScript application that lets users search for images using the Unsplash API, displaying results in a dynamic gallery. Built as a hands-on tutorial project.

Features

  • Image Search via API
    Utilizes the Unsplash API to fetch and display images based on user queries.
  • Responsive Design
    Uses the CSS columns property for a visually appealing, adaptive grid layout.
  • Dynamic DOM Manipulation
    Dynamically creates and appends image elements with JavaScript for smooth, real-time updates.
  • Clean UI/UX
    Minimalistic, fast-loading interface — excellent for showcasing modern vanilla JS skills.

Live Demo

How It Works

  1. User enters a search term in the input box.
  2. JavaScript fetches images related to the term from Unsplash using their API.
  3. Images are displayed in columns, leveraging CSS for a Pinterest-style layout.
  4. All DOM elements (images, containers) are generated dynamically and injected into the page.

Tech Stack

  • HTML, CSS, JavaScript (Vanilla)
  • Unsplash API

Languages Breakdown:

  • HTML: 37%
  • CSS: 35%
  • JavaScript: 28%

File Structure (excerpt)

  • index.html – main HTML structure
  • style.css – responsive gallery styles
  • script.js – all JavaScript logic (API calls, DOM manipulation)
  • /resources – image/assets folder

Credits

Created by following a tutorial by Tech2 etc (YouTube).
See the video tutorial.

Screenshots

Homepage Screenshot

Why Include This in My Portfolio?

  • Demonstrates practical API integration and handling of asynchronous JavaScript.
  • Showcases ability to build a clean, modern frontend from scratch.
  • Highlights responsive web design and DOM manipulation best practices.

Repository:
github.com/anishBudha/image_search_app