advice-generator-app

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HEADINGS ⚠️:

  • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's <h1> element which is this <h1>Advice</h1>, you can preferably use <h2> instead of <h1>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">Advice Generator</h1>

  ---

  • If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00
• 

  Boots 😺•1,610

  @adityaphasu

  Posted almost 2 years ago

  Hello again! @AbieroAlvin

  To answer your question, to add those quotation marks you can just add them like a text like this:

   <p className="py-4 md:text-3xl text-2xl text-[var(--LightCyan)]">
         "{advice}"
   </p>
  

  • Basically wrap the {advice} with " "
  • For the advice number, the API also returns an id for them so you would want to modify your code a bit like this:

  try {
        const response = await fetch(url);
        const data = await response.json();
        setAdvice(data.slip);   //here 
      } 
  

  In the try block instead of getting the advice from the slip object we just get the object as it is and then access the advice and id number from it using dot notation like this:

   <p className="py-4 md:text-3xl text-2xl text-[var(--LightCyan)]">
         "{advice.advice}"
   </p>
  

  and in your your h1 access the id for the advice like this:

    <h1 className="md:text-2xl text-xl text-[var(--NeonGreen)] uppercase">
          Advice  #{advice.id}
     </h1>
  

  This should work.

  • An alternative way for the above solution would be to make another state (say id and setId) and set the id like this in the try block:

  try {
        const response = await fetch(url);
        const data = await response.json();
        setAdvice(data.slip.advice);
        setId(data.slip.id);    // This line
      } 
  

  and then in h1 like this:

  <h1 className="md:text-2xl text-xl text-[var(--NeonGreen)] uppercase">
          Advice  #{id}
     </h1>
  

  This should also work but in my opinion, the 1st one is better since you do not have to manage 2 states and just use one to handle the whole object but 2nd is one is also fine as it's more readable I guess hahaha

  Good luck and happy coding!🙌🏻

  00