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-tracker with vanilla JS

Michaellaā€¢ 80

@michaella23

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


I googled up a storm trying to figure out how to pull data from JSON file in vanilla JS. planning to rebuild with React, and I know how to do it there. hopefully code will be DRYer in that version. I'm a little embarrassed of this one!

Community feedback

Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey good job completing this challenge.

Keep up the good work

Your solution looks good however I think the first column needs to have less width and each of the individual cards needs some minor changes to the height and the width.

In terms of your accessibility issues simply wrap all your content between main tags.

Also no need to feel embarrassed, we are all beginners in this journey of frontend development however the most important thing is never giving up and always have the urge to learn more and explore more

I hope this helps

Cheers Happy coding šŸ‘

Marked as helpful

0

Michaellaā€¢ 80

@michaella23

Posted

@TheCoderGuru thank you for your comment! when I go live with the solution, the first column is the same width as the rest. I am not totally sure why the width is changing at larger screen size. I made the person's last name an inline-block element so it wouldn't effect the width. If you have any further insight, I will be grateful!

0
Ali Ahmedā€¢ 680

@Dany-GitHub

Posted

You did an awesome work , just a small tip u can set height: 100vh; to the body to center all the elements , Happy coding

Marked as helpful

0

Michaellaā€¢ 80

@michaella23

Posted

@Wa7dany thank you, I did change that and it looks a little better.

1

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