Time tracking dashboard using Grid

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

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!

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

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.