Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Modifying Element Styles | DOM Manipulation
Advanced JavaScript Mastery
course content

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
Welcome to the CourseClass DeclarationChallenge: Building a Class Class MethodsChallenge: Adding Methods to a ClassParameter ObjectPrivate PropertiesChallenge: Implementing Private Properties in a ClassGetters and SettersChallenge: Managing Properties with Getters and SettersStatic PropertiesStatic MethodsChallenge: Using Static Properties and Methods in a ClassInheritance with extends and Using super()Challenge: Class Inheritance with Extends and Using Super
2. DOM Manipulation
What is the DOM?Querying the DOMChallenge: Querying the DOMUnderstanding the DOM HierarchyChallenge: DOM HierarchyDOM PropertiesWorking with Element AttributesChallenge: Working with Element Properties and AttributesAdding ElementsRemoving ElementsChallenge: Adding and Removing ElementsModifying Element StylesChallenge: Modifying Element Styles
3. Events and Event Handling
Introduction to Events and Event ListenersThe Event ObjectChallenge: Events and Event ListenersEvent Propagation and DelegationChallenge: Event Propagation and DelegationKeyboard and Mouse EventsManaging Event Listeners
4. Asynchronous JavaScript and APIs
Introduction to Asynchronous JavaScriptCallbacksPromisesAsync/AwaitWorking with APIsPractical API IntegrationChallenge: Working with APIWorking with Third-Party LibrariesChallenge: Working with Third-Party LibrariesHandling Multiple Asynchronous Requests

bookChallenge: Modifying Element Styles

Task

You're building an interactive card that can change its appearance based on user actions. Users can change the background color of the card, resize it, and toggle a "highlighted" state for additional styling.

  1. Change Inline Styles: When the button is clicked:
    • Change the background color of the <div> with ID card to "lightblue";
    • Set the width of the card to "300px";
    • Add a 2px solid #333 border around the card.
  2. Toggle a Highlight Class: When the button is clicked:
    • Add or remove the highlight class on the <div> with ID card.
  3. Add a Dark Theme Class: When the button is clicked:
    • Add or remove the dark-theme class on the <body>, which should switch the page's theme.
html

index

css

index

js

index

copy
  • Use style.backgroundColor to change the background color of the <div> with ID card to "lightblue";
  • Use style.width to set the width of the card to "300px";
  • Use style.border to add a 2px solid #333 border around the card;
  • Use classList.toggle() to add or remove the highlight class on the <div> with ID card;
  • Use classList.toggle() to add or remove the dark-theme class on the <body>, which should switch the page's theme.
html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 13
some-alt