Challenge: 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.
- Change Inline Styles: When the button is clicked:
- Change the background color of the
<div>
with IDcard
to"lightblue"
; - Set the width of the card to
"300px"
; - Add a
2px solid #333
border around the card.
- Change the background color of the
- Toggle a Highlight Class: When the button is clicked:
- Add or remove the
highlight
class on the<div>
with IDcard
.
- Add or remove the
- 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.
- Add or remove the
index.html
index.css
index.js
- Use
style.backgroundColor
to change the background color of the<div>
with IDcard
to"lightblue"
; - Use
style.width
to set the width of the card to"300px"
; - Use
style.border
to add a2px solid #333
border around the card; - Use
classList.toggle()
to add or remove thehighlight
class on the<div>
with IDcard
; - Use
classList.toggle()
to add or remove thedark-theme
class on the<body>
, which should switch the page's theme.
index.html
index.css
index.js
Var alt klart?
Tak for dine kommentarer!
Sektion 2. Kapitel 13
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.22
Challenge: Apply Dynamic Styles to DOM Elements
Stryg for at vise menuen
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.
- Change Inline Styles: When the button is clicked:
- Change the background color of the
<div>
with IDcard
to"lightblue"
; - Set the width of the card to
"300px"
; - Add a
2px solid #333
border around the card.
- Change the background color of the
- Toggle a Highlight Class: When the button is clicked:
- Add or remove the
highlight
class on the<div>
with IDcard
.
- Add or remove the
- 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.
- Add or remove the
index.html
index.css
index.js
- Use
style.backgroundColor
to change the background color of the<div>
with IDcard
to"lightblue"
; - Use
style.width
to set the width of the card to"300px"
; - Use
style.border
to add a2px solid #333
border around the card; - Use
classList.toggle()
to add or remove thehighlight
class on the<div>
with IDcard
; - Use
classList.toggle()
to add or remove thedark-theme
class on the<body>
, which should switch the page's theme.
index.html
index.css
index.js
Var alt klart?
Tak for dine kommentarer!
Sektion 2. Kapitel 13