Skip to content
Submitted over 2 years ago

Expenses chart with HTML, CSS, JS and Chart.js

CSamu7•50
@CSamu7
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

The most difficult thing about the practice was making the chart, at first, I tried doing it with Canvas but it was so difficult for me, so I started to search for a library that helps me make the chart.

I'm not really sure about the HTML code and some parts of the CSS code. So I would like if someone could recommend me better practices.

Community feedback

  • Maksim Baravy•220
    @maximkatutPosted over 2 years ago

    Hi Samu!

    This is a very good job! Looks very good!

    I found couple of issues with accessibility:

    • Don't forget to put lang="en" in your html tag
    • And you have to have the header in each section, so you can add tag h2 for example and hide it like so:

    <h2 class="visually-hidden">Some title</h2>

    .visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord