DOM Selection and Manipulation Solutions

Understanding the Problem

We need to write JavaScript code that accomplishes five tasks involving DOM selection and manipulation:

1. Add a button to the first square

2. Style the second square

3. Modify "plus" squares

4. Change the fourth box's classes

5. Remove boxes 5-7

Devising a Plan

For each task, we'll follow these steps:

1. Select the target element using appropriate DOM selection methods

2. Manipulate the element using DOM manipulation methods

3. Test the changes in the browser

Solution Implementation

    // Wait for DOM to load before running our code
    window.addEventListener("DOMContentLoaded", () => {
        // Problem 1: Add button to first square
        // Select element by ID and create new button element
        const square1 = document.getElementById('problem-one');
        const button = document.createElement('button');
        square1.innerHTML = "";
        button.textContent = '1';
        square1.appendChild(button);

        // Problem 2: Style second square with class selector
        // Find element with class 'two' and modify its styles
        const square2 = document.querySelector('.two');
        square2.style.backgroundColor = 'orange';
        square2.style.color = 'white';
        square2.style.border = '5px dashed black';

        // Problem 3: Modify "plus" squares
        // Select all elements with class 'plus' and double their dimensions
        const plusSquares = document.querySelectorAll('.plus');
        plusSquares.forEach(square => {
            square.style.width = '100px';  // Double from original 50px
            square.style.fontSize = '60px'; // Double from original 30px
        });

        // Problem 4: Change fourth box attributes
        // Select the fourth square and modify its classes
        const square4 = document.querySelector('.four');
        square4.id = 'problem-four';
        square4.classList.remove('square');
        square4.classList.add('round');

        // Problem 5: Remove boxes 5-7 (Multiple approaches)
        
        // Approach 1: Using nextElementSibling
        const box5 = document.querySelector('.square:not(.two):not(.plus):not(.four)');
        if (box5) {
            box5.remove();
            if (box5.nextElementSibling) {
                box5.nextElementSibling.remove();
                if (box5.nextElementSibling.nextElementSibling) {
                    box5.nextElementSibling.nextElementSibling.remove();
                }
            }
        }

        // Approach 2: Using a common selector
        document.querySelectorAll('.square:not(.two):not(.plus):not(.four)')
            .forEach(box => box.remove());

        // Approach 3: Using specific targeting
        const boxesToRemove = document.querySelectorAll('.square:not(#problem-one):not(.two):not(.plus):not(.four)');
        boxesToRemove.forEach(box => box.remove());
    });
    

Code Explanation

Problem 1: Adding a Button

We use getElementById() to select the first square since it has a unique ID. Then we create a new button element using createElement() and set its text content. Finally, we append the button to the square using appendChild().

Problem 2: Styling the Second Square

We use querySelector() with the class selector '.two' to find the second square. Then we modify its style properties directly using the style object. This demonstrates both element selection and style manipulation.

Problem 3: Modifying Plus Squares

querySelectorAll() helps us select all elements with the 'plus' class. We use forEach() to iterate through the collection and modify each square's width and font size. This shows how to work with multiple elements at once.

Problem 4: Class Manipulation

We demonstrate class manipulation using classList.remove() and classList.add(). This is often preferable to directly manipulating the className property as it's more precise and less error-prone.

Problem 5: Element Removal

We show three different approaches to removing elements:

1. Using nextElementSibling to chain through elements

2. Using a complex selector to find and remove elements in one operation

3. Using specific exclusion selectors for precise targeting

Real-World Applications

These DOM manipulation techniques are commonly used in:

- Interactive web applications

- Dynamic form validation

- Content management systems

- Single-page applications

- Dynamic data visualization

Testing the Solution

To verify your solution:

1. Open the HTML file in a browser

2. Check that each modification matches the target image

3. Use browser developer tools to inspect the changes

4. Run the provided Cypress tests

Learning Points

This exercise teaches several important concepts:

1. Different methods of selecting DOM elements

2. Manipulating element styles and attributes

3. Working with classes and IDs

4. Creating and removing elements

5. Handling multiple elements at once