📘 JavaScript Homework 7 — DOM & Events

This repository contains solutions for 6 tasks focused on working with the Document Object Model (DOM) and browser events in JavaScript. The homework reinforces practical skills for interacting with HTML elements, handling user input, and responding to events in real time.

Each task is implemented in a separate file: task-1.js – task-6.js.

---

🚀 Overview

Congratulations — you are now in the second half of the JavaScript course! 💪
After learning core language syntax, this module introduces you to how JavaScript works inside the browser.

This homework helps you practice:

• Understanding the DOM structure and element hierarchy
• Reading and modifying DOM elements
• Creating and removing elements dynamically
• Handling browser events and user interactions
• Working with forms and form validation

---

🔹 Task 1: Categories List (task-1.js)

Work with an existing HTML structure to analyze a list of categories.

Main goals:

• Count the total number of categories
• For each category, get its title (<h2>)
• Count the number of elements inside each category

What was practiced:

• DOM element selection
• Traversing the DOM tree
• Using loops and forEach() with DOM collections

---

🔹 Task 2: Image Gallery (task-2.js)

Create an image gallery dynamically based on a data array.

Main goals:

• Generate <li> and <img> elements from data
• Insert all gallery items into the DOM in a single operation
• Style the gallery using Flexbox

What was practiced:

• Creating DOM elements programmatically
• Using insertAdjacentHTML() or append()
• Efficient DOM updates

---

🔹 Task 3: Live Name Input (task-3.js)

Update text content dynamically based on user input.

Main goals:

• Listen to the input event
• Display user input in real time
• Trim whitespace and handle empty input

What was practiced:

• Working with input events
• Using textContent
• Basic input validation

---

🔹 Task 4: Login Form Handling (task-4.js)

Implement custom form submission logic without page reload.

Main goals:

• Handle the submit event
• Prevent default browser behavior
• Validate form fields using JavaScript
• Collect form data into an object

What was practiced:

• Form events
• event.preventDefault()
• Using the elements property
• Resetting form values

---

🔹 Task 5: Background Color Changer (task-5.js)

Change the page background color using a button click.

Main goals:

• Generate a random color
• Apply the color to the <body>
• Display the selected color value

What was practiced:

• Click events
• Working with inline styles
• Using utility functions

---

🔹 Task 6: Boxes Generator (task-6.js)

Dynamically create and destroy a collection of elements based on user input.

Main goals:

• Validate numeric input (1–100)
• Create multiple elements dynamically
• Apply incremental sizing and random colors
• Clear the DOM on demand

What was practiced:

• Dynamic DOM manipulation
• Event handling for multiple buttons
• Efficient element cleanup

---

📌 Summary & Reflection

With this homework, you practiced essential browser-side JavaScript skills:

• Understanding and navigating the DOM
• Creating, updating, and removing elements dynamically
• Handling user events and form interactions
• Writing clean, readable, and efficient DOM-related code

These tasks build a strong foundation for creating interactive and dynamic web applications using JavaScript 🚀

---

🔗 Links

• GitHub Repository:
• Live Demo (GitHub Pages):