Skip to content
Submitted 3 months ago

Time Tracking dashboard using data.json with javascript async await

João Xavier•230
@joaoxavier-profissional
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I would build the desktop style first and then move directly to the javascript

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

in my development i was using local server and it didn't need async and await, so when i deployed it with github pages, my javascript was returning null to the data.json. So i needed to rewrite my own script with async await to make it work.

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

javascript, working with json, grid layout.

Community feedback

  • Dylan•290
    @dquinn089Posted 3 months ago

    You're doing a great job with the project! The structure is clear, and you've got a good handle on fetching and updating the data. One tip for improvement would be to ensure that the fetchData() function returns the data only after it's been used to update the cards. This way, the updateCards function will only run after the data is fully loaded and available. Here's a small adjustment:

    const data = await request.json();

// Initial update of the cards
updateCards('weekly'); // Set default timeframe to 'weekly'

return data;

    This ensures that the cards are updated immediately after the data is fetched, and the default timeframe (weekly) is set right away. Happy Coding!

    0

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