This is a solution to the Expenses chart component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the bar chart and hover over the individual bars to see the correct amounts for each day
- See the current day’s bar highlighted in a different colour to the other bars
- View the optimal layout for the content depending on their device’s screen size
- See hover states for all interactive elements on the page
- Bonus: Use the JSON data file provided to dynamically size the bars on the chart
Mobile Screenshot
Desktop Screenshot
- Solution URL: Github Link
- Live Site URL: Live Link
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I feel like i can work on making my css less verbose and adopt more CSS3 syntax.
- ChartJS Tutorial Youtube Channel - The ChartJS tutorial youtube channel was very useful when it came to styling the chart.
- ChartJS Documentation - The ChartJS documentation also came in handy.
- Website - Ian Mugenya
- Frontend Mentor - @IanMcbull
- Twitter - @Mcbooll
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.