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.

1. Set product name to "Smartphone";
2. Set the initial price to "499.99";
3. Toggle Availability Status Using Attributes: When the button is clicked:
   • Check if the <button> has the attribute data-available;
   • If data-available is present, remove it and update the text content to "Unavailable".
   • If data-available is absent, add it with a value of "true" and update the text content to "Available".
4. Display the Availability Status:
   • Check if the data-available attribute is present on the button;
   • Display "In Stock" in availability-status if data-available is present, or "Out of Stock" if it's absent.

• Use textContent to set the product name to "Smartphone";
• Use value to set the initial price to "499.99".
• Use hasAttribute to check if the <button> has the attribute data-available;
• If data-available is present, use removeAttribute to remove it and update textContent to "Unavailable";
• If data-available is absent, use setAttribute to add it with a value of "true" and update textContent to "Available".
• Use getAttribute to check if the data-available attribute is present on the button.