Time tracking dashboard using Grid
Solution retrospective
I hardcoded the data since I got stuck at injecting data from JSON file. Would really appreciate if you can give some tips on this problem. Thanks a lot.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @naser23
(https://github.com/naser23/time-tracking-dashboard/blob/main/main.js) around line 23 of the js file above I used a fetch request to get data converted to json text. after that point you should see an array of 6 objects. the second chain (.then) that you see is me looping through that array so I can get the info inside of each point. after that I just took the data and used it to update the textContent of certain elements.
Marked as helpful - @markteekman
Hi Duyen,
Great solution! Love how you combined Grid en Flex to build this one out :) Be sure to also check Frontend Mentors report, it has some great tips to improve accessibility! For example, adding an empty
alt=""tag to all your images should solve all the issues in this case.You could also improve the design a little by making 'daily', 'weekly' and 'monthly' into anchor links with an active and hover state :)
As for the data, I'll reference it here again so others might read it too: the JavaScript Fetch API can be very useful in this case. You'll need some JS to interact with the data, there are plenty of ways to do it, this is how I solved it.
Keep up the great work!
Marked as helpful - @grizhlieCodes
Just built and uploaded my solution for this. Video will probably be made by tomorrow's end, will do most of it today evening. Sunday latest..?
Marked as helpful - @grizhlieCodes
Done. Link
I was editing on a new computer and new software so took longer than expected and is far from perfect imo - kept on hitting my head against sound issues 😒.
I think I covered the main gists you were looking for. I kept the JS very minimal and avoided some refactoring, for example fetching the data like Naser suggested. I did that initially then realised I'd be getting into the world of fetch and promises and thought otherwise to keep this beginner friendly.
I'd love any feedback/critique within YouTube if you end up watching it. You can find the JS bit within the video chapters.
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