Answer to Question #302710 in HTML/JavaScript Web Application for chethan

Question #302710

DOM Manipulations - 2

The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.

Use the below reference image.

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

HTML

<!DOCTYPE html>

<html>

<body>

</body>

</html>

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 #302710 in HTML/JavaScript Web Application for chethan

Resources

Comments

Leave a comment

Related Questions