Advice Generator - HTML/JS/Tailwind

Community feedback

• 

  Thibaut Lefevre•120

  @malboyooPosted over 2 years ago

  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 👍

  Marked as helpful

  0

  ---

  

  Jack Tubbenhauer•170

  @jtubbenhauerPosted over 2 years ago

  @malboyoo Perfect, that solution looks great. Cheers!

  1
• 

  Rolando Parada Puig•200

  @RolandoParadaPuigPosted over 2 years ago

  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

  Marked as helpful

  0

  ---

  

  Jack Tubbenhauer•170

  @jtubbenhauerPosted over 2 years ago

  @RolandoParadaPuig Thanks Rolando!

  1