<title>JavaScript Homework 8 — Events & Libraries</title>

📘 JavaScript Homework 8 — Events & Libraries

This repository contains a complete step-by-step solution for Homework 8. The project is designed as a full guide that demonstrates critical concepts from JavaScript Module 8, including event delegation, DOM manipulation, and working with external libraries.

🚀 Overview

Two-thirds of the JavaScript course are now complete — great progress! 💪 In this homework, the goal is to apply both theoretical knowledge and practical skills by building a fully functional image gallery with a modal window.

This homework reinforces your understanding of:

• The event lifecycle and event termination
• Event delegation patterns
• Dynamic DOM creation and manipulation
• Connecting and using third-party libraries via CDN
• Object and array destructuring
• Optimized event handling and keyboard interactions

📂 Project Structure

• index.html — Application skeleton and library connections
• gallery.js — Gallery logic, event handling, and modal control
• styles.css — Layout and visual styling

---

🧩 Step-by-Step Implementation Guide

The project was built from scratch following modern web development standards. Below is a detailed explanation of what each file does and why certain decisions were made.

1️⃣ HTML Structure (index.html)

This file acts as the backbone of the project. It defines where the gallery will appear and connects all required external resources.

Key decisions:

• An empty <ul class="gallery"> element is used as a placeholder for dynamically generated content.
• The basicLightbox library is connected via CDN to avoid building a modal system from scratch.
• Scripts are loaded at the bottom of the body to ensure the DOM is ready.

2️⃣ Visual Design (styles.css)

CSS is used to center the gallery on the page and present images in a clean, modern grid layout.

Styling highlights:

• display: grid creates a 3-column gallery layout.
• object-fit: cover ensures all images maintain consistent proportions.
• Hover effects provide visual feedback and improve user experience.
• Flexbox is used on the body element to center the gallery vertically and horizontally.

3️⃣ JavaScript Logic (gallery.js)

This file contains the core logic of the application. It handles data, generates markup, and manages user interactions.

📌 Dynamic Gallery Creation

The gallery is generated from an array of image objects. Each object contains preview, original, and description properties.

• map() + join() are used to efficiently generate HTML markup.
• All gallery items are injected into the DOM in a single operation.

📌 Event Delegation

Instead of attaching individual click handlers to each image, a single event listener is attached to the gallery container.

• Improves performance by reducing the number of event listeners.
• Ensures scalability if more images are added later.
• Clicks are filtered to respond only when an image is clicked.

📌 Modal Window & Keyboard Control

When an image is clicked, a modal window opens using basicLightbox.

• The full-size image URL is stored in a data-source attribute.
• The modal listens for the Escape key only while it is open.
• Keyboard listeners are removed immediately after the modal is closed, preventing unnecessary background processing.

---

✅ Mentor Checklist

• Gallery is generated dynamically from JavaScript data
• Layout matches the provided design
• Event delegation is correctly implemented
• basicLightbox library is connected via CDN
• Modal opens with the correct full-size image
• Modal closes when the Escape key is pressed
• No console errors or warnings

📌 Final Notes

As a result, this project demonstrates a clean, optimized, and modern approach to building interactive web interfaces using JavaScript. It combines theory and practice into a single, maintainable solution.

🔗 Links

• GitHub Repository: [add link here](https://github.com/kutluhangil/goit-js-hw-08)
• Live Demo (GitHub Pages): kutluhangil.github.io/goit-js-hw-08/