📘 JavaScript Homework 12 — Async/Await Syntax & Pagination

This repository contains the implementation of Homework 12, which focuses on modern asynchronous JavaScript, pagination techniques, and advanced interaction with backend APIs. The project is a continuation of the previous image search application, now enhanced with async/await, Axios, and pagination.

---

🚀 Overview

Congratulations — you’ve reached the final stage of the JavaScript course! 💪
In Module 12, the goal is to consolidate everything learned so far and apply it in a real-world scenario.

This homework reinforces your understanding of:

• async/await syntax
• Error handling in asynchronous code
• Pagination fundamentals
• Query parameter configuration
• The “Load more” pagination pattern
• Working with HTTP requests using Axios

All these concepts are applied by extending an image search application powered by the Pixabay API.

---

📂 Project Structure

goit-js-hw-12/
├─ src/
│  ├─ js/
│  │  ├─ api.js
│  │  ├─ gallery.js
│  │  └─ scroll.js
│  ├─ css/
│  │  └─ styles.css
│  └─ main.js
├─ public/
├─ dist/
├─ index.html
├─ package.json
├─ vite.config.js
└─ README.md

The project is built using Vite and follows a modular, scalable architecture.

---

🔍 Main Goal — Image Search with Pagination

The application allows users to search images by keyword and view the results in a responsive gallery. Images are loaded incrementally using pagination instead of loading all results at once.

---

🔁 Refactoring & Async/Await

• The fetch API has been replaced with Axios
• All asynchronous logic is rewritten using async/await
• HTTP requests are extracted into reusable service functions

Example:

async function fetchImages(query, page) {
  const response = await axios.get(BASE_URL, {
    params: {
      key: API_KEY,
      q: query,
      image_type: "photo",
      orientation: "horizontal",
      safesearch: true,
      per_page: 20,
      page
    }
  });
  return response.data;
}

---

📄 Pagination Logic

• Pixabay API supports page and per_page parameters
• Each request returns a maximum of 20 images
• The initial page value starts at 1
• Each subsequent request increments the page number
• When a new search is performed, pagination resets

---

🔘 Load More Button

• The Load more button is hidden when no images are displayed
• It appears after the first successful search
• Clicking the button loads the next page of images
• The button hides again when the collection ends

---

🚫 End of Collection Handling

The Pixabay API returns a totalHits value, which indicates the total number of images available for the search query.

When the user reaches the last page:

• The Load more button is hidden
• A notification appears with the message:

"We're sorry, but you've reached the end of search results"

---

🖼️ Image Gallery & Lightbox

• Images are rendered as a gallery
• Each image is wrapped in a link element
• SimpleLightbox is used for modal image previews
• The refresh() method is called after new images are added

---

⬇️ Smooth Scrolling

After loading a new group of images, the page scrolls smoothly down by the height of two gallery cards. This is achieved using:

• getBoundingClientRect()
• window.scrollBy()

---

✅ Mentor Checklist

• Project built with Vite
• Axios used for all HTTP requests
• async/await syntax applied everywhere
• No console errors or warnings
• Pagination implemented correctly
• Load more button works as expected
• Previous results cleared on new search
• Images appended to DOM in a single operation
• SimpleLightbox refreshed after adding new images
• End-of-results message displayed correctly

---

🔗 Links

• GitHub Repository: https://github.com/USERNAME/goit-js-hw-12
• Live Demo (GitHub Pages): https://USERNAME.github.io/goit-js-hw-12/

---

Final Notes:
This homework demonstrates a professional JavaScript workflow using asynchronous programming, API-driven UI updates, and scalable pagination logic.