Expenses Chart Component Solution using TypeScript & CSS Grid

For this challenge, I decided that I didn't want to pick up any new tools, but simple hone the tools I was already a little familiar with. I decided to mess around a little more with CSS grid as I only have very basic knowledge of it at this point. I decided to "future-proof" my CSS by arranging the CSS variables in such a way that I could add a dark mode theme in the future with ease buy simply altering the color variables. I also made liberal use of the clamp function in CSS for when screen sizes shift.

The challenge didn't call for any animation, but since the basic design wasn't too difficult I decided to add intro animations both to the bar graphs as well as the various numbers displayed. I also made sure to respect users who prefer reduced motion by respecting the prefers-reduced-motion setting in the browser. The data is pulled into the page from a JSON file using the browser's native fetch functionality.

If you have any feedback/comments on areas I could improve, that would be great too!