Вивчайте Завдання: Застосування Динамічних Стилів до Елементів DOM | Маніпулювання DOM для Інтерактивної Веб-Розробки

Завдання

Створення інтерактивної картки, яка змінює свій вигляд залежно від дій користувача. Користувачі можуть змінювати колір фону картки, змінювати її розмір і перемикати стан "виділено" для додаткового стилювання.

Зміна вбудованих стилів: При натисканні кнопки:
- Змінити колір фону <div> з ID card на "lightblue";
- Встановити ширину картки на "300px";
- Додати рамку 2px solid #333 навколо картки.
Перемикання класу виділення: При натисканні кнопки:
- Додати або видалити клас highlight у <div> з ID card.
Додавання класу темної теми: При натисканні кнопки:
- Додати або видалити клас dark-theme у <body>, що повинно перемикати тему сторінки.

index.html

index.css

index.js

Використовуйте style.backgroundColor для зміни кольору фону <div> з ID card на "lightblue";
Використовуйте style.width для встановлення ширини картки на "300px";
Використовуйте style.border для додавання рамки 2px solid #333 навколо картки;
Використовуйте classList.toggle() для додавання або видалення класу highlight у <div> з ID card;
Використовуйте classList.toggle() для додавання або видалення класу dark-theme у <body>, що повинно перемикати тему сторінки.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 13

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню

Завдання

Зміна вбудованих стилів: При натисканні кнопки:
- Змінити колір фону <div> з ID card на "lightblue";
- Встановити ширину картки на "300px";
- Додати рамку 2px solid #333 навколо картки.
Перемикання класу виділення: При натисканні кнопки:
- Додати або видалити клас highlight у <div> з ID card.
Додавання класу темної теми: При натисканні кнопки:
- Додати або видалити клас dark-theme у <body>, що повинно перемикати тему сторінки.

index.html

index.css

index.js

Використовуйте style.backgroundColor для зміни кольору фону <div> з ID card на "lightblue";
Використовуйте style.width для встановлення ширини картки на "300px";
Використовуйте style.border для додавання рамки 2px solid #333 навколо картки;
Використовуйте classList.toggle() для додавання або видалення класу highlight у <div> з ID card;
Використовуйте classList.toggle() для додавання або видалення класу dark-theme у <body>, що повинно перемикати тему сторінки.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 13