Responsive Expenses Chart

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your Expenses Chart Component project! It's great to see you putting your web development skills into practice. Here are a few suggestions to enhance your project:

  1. Improving Accessibility:

     • Consider adding aria-label attributes to your interactive elements, like the .day-bar divs, for better accessibility. These labels help screen reader users understand the purpose of each element. Explore more about ARIA labels on MDN Web Docs.

  2. CSS Best Practices:

     • You've done a great job with your CSS, especially with the responsive design. To further improve, consider using CSS variables for frequently used values like colors, border-radius, etc. This makes your CSS more maintainable and easier to update. Check out CSS Variables for more information.

  3. JavaScript Code Optimization:

     • In your JavaScript file, you could optimize the code by using more descriptive variable names. For example, maxAmt could be renamed to maxAmount for better readability. Clear and descriptive names make your code easier to understand and maintain. Learn more about JavaScript best practices on JavaScript Info.

  Keep up the excellent work! Remember that each project you build is a step forward in your journey as a developer. Your progress is commendable and I encourage you to keep experimenting and tackling new challenges. The sky's the limit! 🚀🌟

  Marked as helpful

  1

  ---

  

  salmonkarp•260

  @salmonkarpPosted 10 months ago

  @petritnuredini thanks for the feedback, i'm aware i'm often lazy with variable names and accessibility features, i'll make sure to implement them more often in my next challenge.

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  Hello there 👋 @salmonkarp.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  Consider adding a min-height of 100vh to the body element so as to centralize your project.

  body { 
    min-height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  1

  ---

  

  salmonkarp•260

  @salmonkarpPosted 10 months ago

  @Ezekiel225 thanks for the feedback, the extension is actually really helpful.

  0