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 - ViteJS / React, Styled Components

#react#vite#styled-components
JibbyCodes 290

@Kijimai

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


I wanted to make this project using ViteJS and with styled components to get a feel for how both work. ViteJS is a faster alternative to create-react-app which now I believe is my go to for building smaller scale projects to avoid those long development downtime. Styled components allow me to encapsulate css in each particular component making it that much easier to debug and edit the css for that component. The challenge came in how I would have created the logic for the floating amount display, and I ended up utilizing both javascript and css targeting to allow it to display on hover and in clicking the selected day.

Community feedback

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