Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses chart component - vanilla JS

Goran 500

@GoranK89

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a fun one to explore async functions and work with JSON data. The columns are dynamically drawn based on the JSON file, and the active column is also based on the current day. Any suggestions are always very welcome. 🙂

Community feedback

P
Dave 5,245

@dwhenson

Posted

Hey Goran, lovely job here! The component looks great and renders really fast which is great. Here's some points you might like to consider:

  • Heading order: In HTML we shouldn't skip heading levels (which I don't think you have done) or use heading levels for presentation purposes (which I think you have done? Using a h2 to make the price font larger for example).

This is important as many people using assistive tech to access your pages will navigate the site based on the heading structure. At the moment this wouldn’t work with your HTML. The would probably need to skip to "my balance" for example, before the actual number.

I approach this by first laying out the page using only HTML and only thinking about the document structure, not design at all, and then once done, I return to the page and use CSS to make things look how they should.

We shouldn’t use headings to make text look BIG or bold. Use them only to set out your document's heading and show the document structure, and then change things up with CSS after that. It's an easy thing to do if you start out with this mindset, and can really help people.

  • getElementsByClassName is perfectly valid, but using class names to select elements has really bitten me a few times. They change so often, and get toggled on and off and all sorts of things. I'd suggest perhaps using an id or even a custom data- attribute to hook into the HTML. I do this just as standard now as using classes has given me too many headaches!

Here's a nice article on the approach: https://gomakethings.com/strategies-for-working-with-data-attributes-in-vanilla-javascript/

My only other small suggestions would be to include some error handling with a catch statement in your async functions, and maybe check response.ok is true before continuing. These will both just improve things when things don't work. This property is the best one to check when receiving data (as I understand it!)

I hope this helps and bit and keep up the good work!!

Cheers Dave

Marked as helpful

0

Goran 500

@GoranK89

Posted

@dwhenson Hello Dave, thank you for the detailed feedback and advice! I admit, with these smaller components I do the barebones HTML/CSS so I can play around in JS🙂. Will certainly implement your advice in the future.

Thank you for sharing your tips,

Cheers!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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