This repository is dedicated to exploring the Document Object Model (DOM) and handling events in JavaScript. The tasks and exercises within this repository emphasize the manipulation of HTML elements and event-driven programming.
In this task, an HTML structure containing a list of categories ul#categories is processed. A script has been provided to count the categories and display the results, including the header text and the number of elements for each category. The result can be found in the console.
Task 2 centers around an HTML structure with an empty ul#ingredients list. The JavaScript script creates list items, populates them with items from an array, and assigns a specific class. These items are then inserted into the ul#ingredients list.
In Task 3, a script is implemented to create an image gallery using an array of objects. The images are presented as part of a gallery with design features that utilize flexboxes or grids.
This task is about creating a basic counter with buttons that increment and decrement a value when clicked. The script maintains the current counter value and updates the interface accordingly.
Task 5 involves a script that updates a text span based on the input in a text field. When the input field is empty, the span displays "Anonymous."
In Task 6, the script checks the character count in an input field when focus is lost. Depending on whether the entered characters match the specified data-length attribute, the input's border is styled accordingly.
This task focuses on changing the font size of a text element based on the input from a range control element. The text size changes dynamically as the scrollbar is adjusted.
Task 8 involves managing a login form. The script handles form submission, prevents page reload, displays an alert for empty fields, collects and logs form data, and clears input fields upon submission.
A script in Task 9 changes the background color of the <body> element when a button is clicked. The color is generated randomly using the provided function, and the color value is displayed in a <span>.
Task 10 allows users to create and clear a collection of elements. Users can specify the number of elements to create, and these elements are added to a container. A "destroy" button removes all created elements.