Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Challenge: Apply Dynamic Styles to DOM Elements | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery

bookChallenge: Apply Dynamic Styles to DOM Elements

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.
index.html

index.html

index.css

index.css

index.js

index.js

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.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 13

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Ställ mig frågor om detta ämne

Sammanfatta detta kapitel

Visa verkliga exempel

Awesome!

Completion rate improved to 2.22

bookChallenge: Apply Dynamic Styles to DOM Elements

Svep för att visa menyn

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.
index.html

index.html

index.css

index.css

index.js

index.js

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.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 13
some-alt