FrontEnd mentor Challenge | HTML CSS JS API | Advice generator app

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 5 months ago

  Hi @Ramon-Alvez!

  The developed solution looks good, and the responsiveness is handled very well!

  ---

  I do have a few suggestions for improvement:

  1. Initial Text in the Card

  When the page loads, the card doesn't show any text. Instead of keeping it empty, I think it would be a good idea to call the API when the page loads and show the generated advice initially. You can then update it whenever the user clicks on the button.

  Alternatively, if you prefer not to call the API initially, you could consider providing some placeholder text in the place of advice, such as "Click on the button to generate the advice" or something similar. This will fill the void that appears initially and enhance the user experience.

  2. Preventing Multiple API Calls

  The get API is being called when the button is clicked, but currently, I can click the button multiple times simultaneously, which makes several API calls, even if the previous ones are still pending. This can lead to a flood of requests to the server and potentially cause inconsistencies in the UI (though not in our case right now).

  To prevent this, it’s a good practice to disable the button once it’s clicked and only enable it again once the previous API call is resolved. This way, the user won’t be able to click on it repeatedly.

  Additionally, you could consider using try and catch blocks when calling the API. You can’t always predict how the server will respond, so it's important to handle errors gracefully. Here’s an example:

  const diceButton = document.getElementById('diceButton');
  diceButton.addEventListener('click', () => printAdvice());
  
  async function printAdvice() {
      diceButton.disabled = true;
      try {
          // Call the API here
      }
      catch (error) {
          // Handle the error here
      }
      finally {
          diceButton.disabled = false;
      }
  }
  

  You can style the disabled button using the :disabled CSS selector:

  #card #diceButton:disabled {
      // Apply appropriate style for the disabled button
  }
  

  Also, take note that the hover effect selector #card #diceButton:hover should now be changed to #card #diceButton:enabled:hover. This will ensure the hover effect only applies when the button is enabled.

  ---

  The practices mentioned here become particularly useful in more complex projects, and adopting them early on will help keep your code more maintainable and robust.

  Great work so far, and keep going! 🚀

  12

  Marked as helpful