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>
Finding a professional expert in "partial differential equations" in the advanced level is difficult.
You can find this expert in "Assignmentexpert.com" with confidence.
Exceptional experts! I appreciate your help. God bless you!
#340153 on Dec 2023
#340153 on Dec 2023