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
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?
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