Advice slip api using HTML CSS JS

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hello Jared Silver ! Congo 👏 on completing this challenge

  Let's look at some of your issues, shall we:

  • Just one suggestion Always use h1 first and then h2, h3 and so on

  happy Coding😀

  Marked as helpful

  0
• 

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  hey @jsilver88 well done on this challenge! Looking good 🙌 !

  Here's a few points to think about:

  • HTML: You will notice the validtor is complaining about you having a h4 element without any headings of a higher level above it. What this means is that you should use the <h1> headings as main headings of your web page, followed by the <h2> headings, then the less important <h3> headings, and so on, without skipping a level.

  This is really important as many people using assistive tech to access your pages will navigate the site based on the heading structure. We shouldn’t use headings to make text look BIG or bold. Use them only for setting out the heading of your document and to show the document structure. In this case using a h1 and adding the styles from the h4 to it should solve this issue.

  • CSS: My only suggestion here is to remove the height setting on your container as it causes elements to overlap depending on the length of the returned text. Generally if you are setting a height on something you should have a good look at what you are doing as it often causes issues. In this case you could remove it completely or just change it to max-height which will allow elements to grow if needed.

  • JS: I would suggest you add a check to ensure the API has responded correctly, and render an error message if not. This isn't too tricky, and I would just change your data variable to be:

    response.ok ? response.json() : throw new Error("API Failed")
  

  If you then add a catch at the end of of your fetchAdvice function you can render some fallback text in case things don't work for any reason. It's not a big deal, but thinking about how things can go wrong is a good habit to get into.

  Hope this helps!

  Keep up the good work!!! 👍

  Cheers 👋

  Dave

  Marked as helpful

  0

  ---

  

  P

  Jared Silver•500

  @jsilver88Posted over 2 years ago

  @dwhenson Thanks for the useful suggestions on how to better improve this. I appreciate you.

  0

  

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  @jsilver88 Thanks. Just updated my comment as for CSS I should have said max-height

  0