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

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>

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

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions