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.