Advice Generator - HTML/JS/Tailwind

Hi,

I used this method to set a CD on the button:

in your event listener of your button, when the user click change the style with a new class, then after 1800ms(use setTimeout()) you can set class to the original value. I personally set the opacity to 0.6 and removed the hover effect When the button is disable. I also disabled the button during this time.

You can check my solution for more details.

good luck and keep working 👍

if you whant to handle the delay between calls you could add some kind of loading icon For example: on the begining of the call you could display=none for the text and display=block for the icon with some animation, this way you will have some kind of "interactive" way of showing your public that something is happening using your code here =>

const handleClick = () => { (dismount the text here) (mount the icon with some animation here) fetch("https://api.adviceslip.com/advice") .then((res) => res.json()) .then((data) => { quoteText.innerHTML = data.slip.advice) (dismount the icon with some animation here) (mount the text here) }; };

this is an example and i think it will work if you tri it like this