Remove and Add Class Names The goal of this coding exam is to quickly get you off the ground with Adding and Removing Classnames Dynamically. Use the below reference linkimage. HTTPS://ASSETS.CCBP.IN/FRONTEND/CONTENT/DYNAMIC-WEBAPPS/ADDING-AND-REMOVING-CLASSNAMES-DYNAMICALLY-OP.GIF HTML h1 Element Remove old styles and add new styles CSS .heading-old-styles { color: #00ff00; background-color: #000000; } .button { color: #ffffff; background-color: #0967d2; font-size: 14px; border-width: 0; border-radius: 4px; padding: 10px; } .heading-new-styles { color: #ff0000; background-color: #ffffff; }

.heading-old-styles { color: #00ff00; background-color: #000000; } .button { color: #ffffff; background-color: #0967d2; font-size: 14px; border-width: 0; border-radius: 4px; padding: 10px; } .heading-new-styles { color: #ff0000; background-color: #ffffff; } h1 Element Remove old styles and add new styles const heading = document.querySelector(#heading), btn = document.querySelector(#btnEl); btn.addEventListener(click, () => { heading.classList.toggle(heading-old-styles) heading.classList.toggle(heading-new-styles) })

Answer in Web Application for chethan #302686

Question #302686

Remove and Add Class Names

The goal of this coding exam is to quickly get you off the ground with Adding and Removing Classnames Dynamically.

Use the below reference linkimage.

https://assets.ccbp.in/frontend/content/dynamic-webapps/adding-and-removing-classnames-dynamically-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

<h1 class="heading-old-styles" id="heading">h1 Element</h1>

<button id="btnEl" class="button">Remove old styles and add new styles</button>

</body>

</html>

CSS

.heading-old-styles {

color: #00ff00;

background-color: #000000;

}

.button {

color: #ffffff;

background-color: #0967d2;

font-size: 14px;

border-width: 0;

border-radius: 4px;

padding: 10px;

}

.heading-new-styles {

color: #ff0000;

background-color: #ffffff;

}

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .heading-old-styles {
        color: #00ff00;
        background-color: #000000;
        }
        .button {
            color: #ffffff;
            background-color: #0967d2;
            font-size: 14px;
            border-width: 0;
            border-radius: 4px;
            padding: 10px;
        }
        .heading-new-styles {
            color: #ff0000;
            background-color: #ffffff;
        }
    </style>
    <h1 class="heading-old-styles" id="heading">h1 Element</h1>
    <button id="btnEl" class="button">Remove old styles and add new styles</button>
    <script>
        const heading = document.querySelector('#heading'),
              btn = document.querySelector('#btnEl');

        btn.addEventListener('click', () => {
            heading.classList.toggle('heading-old-styles')
            heading.classList.toggle('heading-new-styles')
        })
    </script>
</body>
</html>