Challenge: Manage Element Properties and Attributes
Task
You're working on a product page where you'll display product information and allow users to toggle the availability status.
- Set product name to
"Smartphone"; - Set the initial price to
"499.99"; - Toggle Availability Status Using Attributes: When the button is clicked:
- Check if the
<button>has the attributedata-available; - If
data-availableis present, remove it and update the text content to"Unavailable". - If
data-availableis absent, add it with a value of"true"and update the text content to"Available".
- Check if the
- Display the Availability Status:
- Check if the
data-availableattribute is present on the button; - Display
"In Stock"inavailability-statusifdata-availableis present, or"Out of Stock"if it's absent.
- Check if the
index.html
index.css
index.js
- Use
textContentto set the product name to"Smartphone"; - Use
valueto set the initial price to"499.99". - Use
hasAttributeto check if the<button>has the attributedata-available; - If
data-availableis present, useremoveAttributeto remove it and updatetextContentto"Unavailable"; - If
data-availableis absent, usesetAttributeto add it with a value of"true"and updatetextContentto"Available". - Use
getAttributeto check if thedata-availableattribute is present on the button.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 8
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.22
Challenge: Manage Element Properties and Attributes
Swipe to show menu
Task
You're working on a product page where you'll display product information and allow users to toggle the availability status.
- Set product name to
"Smartphone"; - Set the initial price to
"499.99"; - Toggle Availability Status Using Attributes: When the button is clicked:
- Check if the
<button>has the attributedata-available; - If
data-availableis present, remove it and update the text content to"Unavailable". - If
data-availableis absent, add it with a value of"true"and update the text content to"Available".
- Check if the
- Display the Availability Status:
- Check if the
data-availableattribute is present on the button; - Display
"In Stock"inavailability-statusifdata-availableis present, or"Out of Stock"if it's absent.
- Check if the
index.html
index.css
index.js
- Use
textContentto set the product name to"Smartphone"; - Use
valueto set the initial price to"499.99". - Use
hasAttributeto check if the<button>has the attributedata-available; - If
data-availableis present, useremoveAttributeto remove it and updatetextContentto"Unavailable"; - If
data-availableis absent, usesetAttributeto add it with a value of"true"and updatetextContentto"Available". - Use
getAttributeto check if thedata-availableattribute is present on the button.
index.html
index.css
index.js
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 8