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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: github
- Live Site URL: github page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JavaScript
I learned a lot about manipulating CSS styles with JavaScript. I also learned how to simulatue mouse hover events with the JavaScript DOM event listener.
I have found it difficult loading json data from a file because of the async await I had to use. This has confused me a lot and I need to research more on it. I also need to learn how to create graphs with JavaScript. Finally, I need to get conversant with all the Javascript event listeners.
The final area to work on is positioning elements. I struggled with this so much that I couldn't add it to the solution as the challenge required. I need to learn more about this
- Website - Louis Marie Atoluko Ayariga
- Frontend Mentor - @almamarie
My greatest thanks goes to Jonas Schmedtmann for his great tutorial that has taught me everything I need to know as a beginner. What I learned from his HTML and CSS course is what has helped me to complete this challenge.