Submitted almost 3 years ago

Time tracking dashboard using Grid

Duyen Nguyen• 950

@Duyen-codes

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Naser Y Abdulkadir• 190

@naser23

Posted almost 3 years ago

(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

Duyen Nguyen• 950

@Duyen-codes

Posted almost 3 years ago

@naser23 Thanks for sharing! I think displaying each piece of data to html elements remains the block for me. Maybe I'll come back to this challenge later. I really appreciate your help.

Mark Teekman• 365

@markteekman

Posted almost 3 years ago

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

Duyen Nguyen• 950

@Duyen-codes

Posted almost 3 years ago

@markteekman Hey Mark! Thanks very much for the feedback and sharing those resources! Greatly appreciate it! I'll try to solve the unsolved by using them. Thanks a lot! Same to you! Keep up the great work!

Rafal• 1,395

@grizhlieCodes

Posted almost 3 years ago

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

Rafal• 1,395

@grizhlieCodes

Posted almost 3 years ago

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.

Please log in to post a comment

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