Вивчайте Завдання: Керування Властивостями та Атрибутами Елементів | Маніпулювання 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

Запитати АІ

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

Suggested prompts:

Can you show me the HTML structure for the product page?

How should the JavaScript function for toggling availability be implemented?

Where should the availability status be displayed on the page?

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