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.