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

Завдання

Ви працюєте над сторінкою продукту, де потрібно відобразити інформацію про товар і дозволити користувачам перемикати статус доступності.

Встановіть назву продукту як "Smartphone";
Встановіть початкову ціну як "499.99";
Перемикання статусу доступності за допомогою атрибутів: Коли кнопка натиснута:
- Перевірте, чи має <button> атрибут data-available;
- Якщо data-available присутній, видаліть його та оновіть текст на "Unavailable".
- Якщо data-available відсутній, додайте його зі значенням "true" та оновіть текст на "Available".
Відображення статусу доступності:
- Перевірте, чи присутній атрибут data-available на кнопці;
- Відобразіть "In Stock" у availability-status, якщо data-available присутній, або "Out of Stock", якщо його немає.

index.html

index.css

index.js

Використовуйте textContent, щоб встановити назву продукту як "Smartphone";
Використовуйте value, щоб встановити початкову ціну як "499.99".
Використовуйте hasAttribute, щоб перевірити, чи має <button> атрибут data-available;
Якщо data-available присутній, використовуйте removeAttribute, щоб видалити його та оновити textContent на "Unavailable";
Якщо data-available відсутній, використовуйте setAttribute, щоб додати його зі значенням "true" та оновити textContent на "Available".
Використовуйте getAttribute, щоб перевірити, чи присутній атрибут data-available на кнопці.

index.html

index.css

index.js

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

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

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

Запитати АІ

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

Completion rate improved to 2.22

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

Встановіть назву продукту як "Smartphone";
Встановіть початкову ціну як "499.99";
Перемикання статусу доступності за допомогою атрибутів: Коли кнопка натиснута:
- Перевірте, чи має <button> атрибут data-available;
- Якщо data-available присутній, видаліть його та оновіть текст на "Unavailable".
- Якщо data-available відсутній, додайте його зі значенням "true" та оновіть текст на "Available".
Відображення статусу доступності:
- Перевірте, чи присутній атрибут data-available на кнопці;
- Відобразіть "In Stock" у availability-status, якщо data-available присутній, або "Out of Stock", якщо його немає.

index.html

index.css

index.js

Використовуйте textContent, щоб встановити назву продукту як "Smartphone";
Використовуйте value, щоб встановити початкову ціну як "499.99".
Використовуйте hasAttribute, щоб перевірити, чи має <button> атрибут data-available;
Якщо data-available присутній, використовуйте removeAttribute, щоб видалити його та оновити textContent на "Unavailable";
Якщо data-available відсутній, використовуйте setAttribute, щоб додати його зі значенням "true" та оновити textContent на "Available".
Використовуйте getAttribute, щоб перевірити, чи присутній атрибут data-available на кнопці.

index.html

index.css

index.js

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

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

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