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>
<head></head>
<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