Time tracking dashboard using Grid

Community feedback

• 

  Naser Y Abdulkadir•190

  @naser23Posted about 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

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted about 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.

  0
• 

  Mark Teekman•365

  @markteekmanPosted about 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

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted about 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!

  1
• 

  Rafal•1,395

  @grizhlieCodesPosted about 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

  0
• 

  Rafal•1,395

  @grizhlieCodesPosted about 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.

  0