📘 JavaScript Homework 11 — HTTP Requests & Backend Interaction

Learning is not always easy, but it is always rewarding 💪 This repository contains a complete implementation of Homework 11, focused on working with HTTP requests, backend APIs, and dynamic UI updates.

---

🚀 Overview

In Module 11, the focus shifts to understanding how frontend applications communicate with backend services using HTTP.

This homework helps reinforce your knowledge of:

• The difference between HTTP and HTTPS
• Basic HTTP methods (GET, POST, PUT, PATCH, DELETE)
• The concept of CRUD operations
• How frontend applications interact with backend APIs
• Handling asynchronous HTTP requests with JavaScript

It’s time to put this knowledge into practice by building an image search application that communicates with a real backend service.

---

📂 Project Structure

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

The project is bundled using Vite and follows a clean, scalable structure.

---

🧩 Main Task — Image Search Application

The goal of this task is to create an application that allows users to search for images by keyword and display the results in a gallery.

---

🔍 Search Form

The application includes a search form where the user enters a keyword. When the form is submitted, an HTTP request is sent to the backend using the entered term.

• User enters a search query
• Form submission triggers an HTTP request
• Previous search results are cleared before a new request

---

🌐 HTTP Requests

The backend service used in this project is the public Pixabay API. Each request includes required query parameters to ensure correct results.

Required Query Parameters

• key — personal API access key
• q — search keyword entered by the user
• image_type=photo
• orientation=horizontal
• safesearch=true

If the backend returns an empty array, a notification is shown informing the user that no matching images were found.

---

🖼️ Gallery & Image Cards

Search results are rendered inside a gallery container. Each image card is created dynamically based on the backend response.

Image Object Properties Used

• webformatURL — small image for gallery view
• largeImageURL — large image for modal view
• tags — image description (used as alt text)
• likes
• views
• comments
• downloads

Before starting a new search, the gallery is completely cleared to avoid mixing results.

---

🔍 SimpleLightbox Integration

To display large versions of images in a modal window, the SimpleLightbox library is used.

import SimpleLightbox from "simplelightbox";
import "simplelightbox/dist/simple-lightbox.min.css";

• Each image card is wrapped in a link element
• Clicking an image opens it in a modal
• After adding new images to the DOM, refresh() is called

---

⏳ Loading Indicator

A loading indicator is displayed while images are being fetched from the backend.

• Loader appears before the HTTP request starts
• Loader disappears after the response is received
• A CSS loader library is used for better UX

---

🔔 Notifications

User notifications are displayed using the iziToast library instead of alerts.

import iziToast from "izitoast";
import "izitoast/dist/css/iziToast.min.css";

Notifications are shown when:

• No images are found for the search query
• An error occurs during the HTTP request

---

🛡️ Error Handling

All HTTP requests are handled using Promise chains with then() and catch() to prevent application crashes.

• Errors are caught and handled gracefully
• The UI remains stable even if the request fails

---

✅ Mentor Checklist

• The homework submission includes GitHub repository and live page links
• The project is built using Vite
• No console errors, warnings, or logs are present
• iziToast, SimpleLightbox, and css-loader libraries are installed
• The UI matches the provided layout or custom styling
• A search form is available on the page
• Loader appears before the request and disappears after response
• Previous results are cleared before a new search
• HTTP requests include required query parameters
• Images are rendered based on backend response
• DOM updates are performed in a single operation
• SimpleLightbox refresh() is called after rendering
• Clicking an image opens it in a modal window
• Errors are handled using then() and catch()

---

📌 Final Notes

This project demonstrates practical skills in working with HTTP requests, backend APIs, and dynamic user interfaces.

It reflects a real-world frontend workflow using:

• Asynchronous JavaScript
• REST APIs
• Third-party libraries
• Modern build tools

---

🔗 Links

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