Skip to content

PayamAnari/Api-image-finder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

16 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

image


πŸ’Ž Image Finder πŸ’Ž


Screenshot


Live Demo

Live Demo Link


Image Finder 🎬

The Image Search App is a user-friendly web application that allows you to explore a vast collection of stunning images using the Unsplash API. With a simple and intuitive interface, you can easily search for images on any topic of your interest, discover high-quality photographs, and explore the world through captivating visuals.


Features

  • Search Images: Effortlessly search for images using keywords, such as "nature," "animals," "architecture," and more. The app fetches relevant and stunning images to match your search query
  • Image Previews: Quickly glance through the search results with thumbnail previews of the images. Hover over an image to get a sneak peek before clicking for a larger view
  • Infinite Scroll: Explore an endless stream of images as you keep scrolling down. The app dynamically loads more images as you reach the bottom, ensuring you never run out of breathtaking visuals
  • Full-Size View: Click on any image to view it in full size with detailed information, including the photographer's name, location, and image dimensions. Images open in a new tab for your convenience
  • Responsive design: The application is designed to be mobile-friendly and adapts to different screen sizes, allowing users to access and use it on various devices.

Technologies Used

  • HTML: Structure and layout of the web page.
  • CSS: Styling and visual appearance of the application.
  • JavaScript: Logic and functionality of the movie search and display.
  • Unsplash API: The app utilizes the Unsplash API to fetch high-quality images based on user search queries.

Getting Started

  • To run the Movie Finder project locally, follow these steps:
  1. Clone the repository: git clone https://github.com/PayamAnari/Api-image-finder
  2. Open the index.html file in a web browser.
  3. Start searching for movies and exploring their details.

Code structure


assets
public
  └── style.css
src
     └── app.js
     └── api.js
index.html
package-lock.json
package.json
README.md

Client structure

  • assets || images that were used in the app and also in README.md
  • public || css file for styling the whole page
  • src || This directory contains the JavaScript code for different modules used in the application
  • app.js || The main JavaScript file that initializes the application and handles user interactions
  • api.js || is a JavaScript file that handles communication with the Unsplash API for the Image Search App. This file contains the necessary functions to fetch image search results based on user input and returns the data in a structured format for the app to display
  • index.html || HTML file, main structure of the app.

Contributions

  • Contributions to the Movie Finder project are welcome! If you have any suggestions, bug fixes, or new feature implementations, feel free to submit a pull request.

About

πŸ“· The Image Search App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published