Expense Chart Component (Chart-js + Tailwindcss)

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 1 year ago

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

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

  ---

  TAILWIND CLASSES 📐:

  • Your solution is well designed and matches the actual design image provided by FEM, Congrats for that. I'm here to address a small suggestion on min-h-[100vh] utility class.

  ---

  • You want min-height: 100vh right ? Then you need to use min-h-screen class instead of min-h-[100vh].

  ---

  • We don't need to create arbitrary tailwind utility class, because there's already a class for that.

  ---

  • Additionally, I want to mention the usage of h1 in your solution. It's not a good practice to use h1 for display balance.

  ---

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

  ---

  • So just replace the h1 with p or span, I would prefer to use span by nesting it's content with p and just style it like you need.

  ---

  • Example:

  <p class="text-sm">
     My balance
     <span class="font-[600] text-2xl block">$921.48</span>
  </p>
  

  ---

  • Now you want to add a level-one heading to improve accessibility, Don't worry you can add a visually hidden Heading adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  • Example: <h1 class="sr-only">Expenses chart component</h1>

  ---

  .

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

  Happy coding!

  01

  Marked as helpful
• 

  Korney Chervonenko•1,080

  @KorneyChervonenko

  Posted about 1 year ago

  Hello friend, There is a requirement in readme: “current day's bar highlighted in a different colour to the other bars”. How do you think “current day” is a some random day of week or it must be changed dynamically when page is loaded in browser? In other words “current day” is today ?

  11