Interactive Rating Component

Community feedback

• 

  P

  Nishanth Venkatesan•1,030

  @nishanth1596

  Posted 5 months ago

  Hi Adnan! Great work!

  Just a couple of suggestions;

  1.        {ratings.map((rating) => {
              return (
                <button
                  onClick={() => handleclick(rating)}
                  className={`${
                    activeButton === rating &&
                    "bg-neutral-white text-neutral-very-dark-blue"
                  } bg-gray-700 hover:bg-primary-orange   hover:text-neutral-very-dark-blue p-4 sm:p-6 rounded-full size-12 sm:size-14 flex items-center justify-center`}
                  key={rating}
                >
                  {rating}
                </button>
              );
            })}
     

  You can simplify it a bit by using an implicit return, like this:

  {ratings.map((rating) => (
    <button
      onClick={() => handleClick(rating)}
      className={`${
        activeButton === rating &&
        "bg-neutral-white text-neutral-very-dark-blue"
      } bg-gray-700 hover:bg-primary-orange hover:text-neutral-very-dark-blue p-4 sm:p-6 rounded-full size-12 sm:size-14 flex items-center justify-center`}
      key={rating}
    >
      {rating}
    </button>
  

  It's just a personal preference to make the code a little cleaner! We coders tend to be a bit lazy, after all. 😊 :P

  2. For the heading “How did we do?”, I would suggest using an <h2> or <h3> tag since this is a small component, it might be better to use a different heading level for accessibility and SEO. You could consider adding a hidden <h1> tag like “Interactive Rating Project” (with the sr-only Tailwind class) to keep the semantic structure intact.

  3. If you are practising react router, then its okay else you can dynamically change the component from Rating to thankyou component based on the few conditions which might improve the user experience a bit more. Also there's a bug, when reloading the page after rating, i am getting page not found error. its related to the path.You can add a go back button page if rating is not given. This happens only when reload the thank you page.

  <h3 className="bg-gray-700 text-primary-orange text-xs sm:text-sm px-3 py-2 font-semibold w-fit mx-auto rounded-full mt-2">You selected {rating} out of 5</h3>
       <h1 className="text-neutral-white text-2xl sm:text-3xl font-medium mt-2">Thank you!</h1>
  

  Typically, it's best to use only one <h1> per page, as it helps with both accessibility and SEO. Headings within the page should follow a logical structure, which ensures the content is well-organized and easily understood by screen readers and search engines.

  In your case, using both <h1> and <h3> together could potentially create issues in terms of HTML structure and accessibility, as it jumps over an expected <h2> and might disrupt the logical flow of headings.

  Instead of using an <h3> here, it would be more appropriate to use a <p> tag, since the text you’re displaying ("You selected {rating} out of 5") doesn’t need to be a heading. This will maintain the proper semantic structure and improve the overall accessibility of the page.

  Keep up the excellent work! You're doing great, and these small tweaks will help enhance both readability and accessibility. 😊

  00