Answer to Question #303827 in HTML/JavaScript Web Application for taufiq umar

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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #303827 in HTML/JavaScript Web Application for taufiq umar

Resources

Comments

Leave a comment

Related Questions