This project is a dynamic web application developed using the Pixabay API. It allows users to search for high-quality images using keywords and features a modern, responsive interface with real-time feedback.

The application demonstrates proficiency in:

• Asynchronous Programming: Handling HTTP requests using the Fetch API and Promises.
• API Integration: Managing query parameters and processing JSON data from a third-party REST API.
• UI/UX Enhancements: Implementing loading states, modal galleries, and customized notification systems.

• Bundler: Vite
• Libraries: - iziToast (Customized popup notifications for errors and warnings)
  • SimpleLightbox (Responsive touch-friendly image zooming and navigation)
• Styling: Custom CSS focusing on the "Montserrat" font family and a clean, modern grid layout.
• API: Pixabay API

├── index.html           # Main entry point and search form
├── src/
│   ├── main.js          # Core logic: API fetching, DOM manipulation, and library init
│   ├── style.css        # Custom styles for the gallery, loader, and iziToast overrides
│   └── img/             # Static assets including warning icons
├── package.json         # Project dependencies and scripts
└── vite.config.js       # Vite configuration

The application processes user input to fetch specific image types (photos) in a horizontal orientation with safe search enabled.

• Validation: If the input field is empty, a custom iziToast error is triggered.

• Loading State: A CSS-animated loader appears during the fetch process and is hidden once the promise is settled using the .finally() block.

• Error Handling: Specific alerts are displayed if no images match the query or if a network error occurs.

Results are rendered as a collection of informative cards showing:

• Metrics: Likes, Views, Comments, and Downloads for each image.

• Lightbox Integration: Clicking an image opens a full-screen preview. The gallery is updated via lightbox.refresh() after every new search to ensure smooth navigation.

• iziToast: Heavily customized in style.css to match specific design requirements, including border-bottom accents, white close buttons, and "Montserrat" typography.

• Grid Layout: A fluid grid-template-columns setup ensures the gallery looks great on all screen sizes.

To run this project locally, follow these steps:

1. Clone the repository:

git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)

2. Install Dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Halenur Gürel Homework Project - Asynchronous JavaScript & API Integration 🚀

Live Demo 📍

Tech Stack: HTML5 · CSS3 · JavaScript (ES6+) · Vite · Pixabay API · iziToast · SimpleLightbox

🔗 GitHub Profile

🎯 “This project demonstrates how to handle asynchronous data streams, manage UI states during network requests, and provide a polished user experience through integrated third-party libraries.”