Skip to content
Submitted about 1 month ago

Expenses-Chart-Component

Eric Aguayo•945
@EAguayodev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of figuring out how to fetch the local JSON file and writing efficient javascript code with only 20 lines.

What challenges did you encounter, and how did you overcome them?

The struggles I encountered were coming up with the code needed to get the hover data displaying when hovering over the graph charts. I completed this by researching and getting ideas on how to go about fetching the data.

What specific areas of your project would you like help with?

Specific areas I would like others to look at will be if the code on the javascript end is efficient enough for the outcome I wanted on the challenge from smooth hover display and fetching of the local JSON data, and would be open to other techniques to grab the JSON file.

Community feedback

  • Adriano•38,190
    @AdrianoEscarabotePosted about 1 month ago

    Hi Eric Aguayo, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    I noticed that your content is not centralized. To resolve this, we can do the following:

    main {
    /* margin: 2rem auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
}

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

    Marked as helpful
    0
    Eric Aguayo•945
    @EAguayodevPosted about 1 month ago

    @AdrianoEscarabote, it is beneficial. You have a good eye, and thank you for the suggested change. It looks much better on my end now.

    1

Please log in to post a comment

Log in with GitHub

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