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

Time Tracking dashboard using data.json with javascript async await

@joaoxavier-profissional

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@dquinn089

Posted

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
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