Skip to content

Add dog photo gallery web app - #319

Open
FullMOtion1987 wants to merge 1 commit into
Anil-matcha:mainfrom
FullMOtion1987:fullmotion1987-dog-photo-gallery
Open

Add dog photo gallery web app#319
FullMOtion1987 wants to merge 1 commit into
Anil-matcha:mainfrom
FullMOtion1987:fullmotion1987-dog-photo-gallery

Conversation

@FullMOtion1987

Copy link
Copy Markdown

Overview

This PR adds a delightful dog photo gallery application built with vanilla HTML, CSS, and JavaScript. The app fetches adorable dog photos from the free Dog.ceo API, providing an interactive and responsive browsing experience.

Features

  • Breed Filtering: Browse photos by specific dog breed or view a random selection from all breeds
  • Dynamic Loading: Load more photos on demand with pagination support
  • Fullscreen Modal: Click any photo to view it in an expanded modal with smooth animations
  • Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
  • No Dependencies: Built entirely with vanilla JavaScript—no frameworks or build tools required

Technical Details

  • Single HTML file (dog-photo-gallery.html) with embedded CSS and JavaScript
  • Uses the free Dog.ceo API (https://dog.ceo/api)
  • Fetches all available dog breeds on load for the breed selector
  • Implements lazy-loading for images
  • Smooth transitions and animations for enhanced UX
  • Keyboard navigation support (ESC to close modal)

How to Use

  1. Open dog-photo-gallery.html directly in any modern web browser
  2. Select a breed from the dropdown or leave it blank for random photos
  3. Click "Load More Photos" to fetch additional images
  4. Click any photo to view it in fullscreen

The application is self-contained and requires no installation or server setup.

- Display adorable dog photos from Dog.ceo API
- Filter photos by breed or view random selection
- Load more photos dynamically
- Fullscreen modal view for each photo
- Responsive design for mobile and desktop
- Built with vanilla HTML/CSS/JavaScript

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant