Question #303827

DOM Manipulations

Use the below reference image link:.

https://res.cloudinary.com/dfxicv9iv/image/upload/v1619259911/dom-manipulations-2_ax38mg.gif

Dynamically add the elements in HTML container element with id

myContainer to achieve the design.

Note

Use the checked property and classList.toggle method to achieve the functionality.

Resources

CSS Colors used:

#7a0ecc

#f2ebfe


Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .active {
            color: #7a0ecc;
            background: #f2ebfe;
        }
    </style>
    <div id="myContainer"></div>
    <script>
        const container = document.querySelector('#myContainer');

        const check = document.createElement('input'),
              checkTitle = document.createElement('label'),
              heading = document.createElement('h1');

        check.type = 'checkbox';
        checkTitle.innerHTML = 'Color the heading element';
        heading.innerHTML = 'heading Element';

        container.append(check, checkTitle, heading)

        check.addEventListener('change', () => {
            if (check.checked == false)
                checkTitle.innerHTML = 'Color the heading element';
            else
                checkTitle.innerHTML = 'Uncolor the heading element';
            heading.classList.toggle('active')
        });
    </script>
</body>
</html>
Our fields of expertise
Submit Your Assignment. We Can Do It.
LATEST TUTORIALS
APPROVED BY CLIENTS
Finding a professional expert in "partial differential equations" in the advanced level is difficult. You can find this expert in "Assignmentexpert.com" with confidence. Exceptional experts! I appreciate your help. God bless you!
Canada #340153 on Dec 2023