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

Sass, js(vanilla), BEM

@FelixCriollo

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


  • how to make dots work?
  • how improve with manipulate JSON data?
  • any advice is very welcome :3

thanks for see my challenge.

pd: if you see undefined restart the page :: 'c

Community feedback

Amon 2,560

@A-amon

Posted

Hello! It's an amazing work, really! 😲

But here are some suggestions:

  • Place your .container inside a main landmark tag.
  • Instead of so many arrays (dailyCurrent, dailyPrevious, weeklyCurrent, ...), you can use array to store objects. For example:
const dailyData = [
  {
    current: 0,
    previous:0
  },
  ...
]
  • You can try using template for elements such as those cards 😉. (So the JS wouldn't be cluttered with createElement). Although you will still need to querySelector each class inside to set the values. 😂
  • Instead of card0, card1, ..., why not use an array to store them? 🤔 This way, your displayCards() and removeCards() lines of code will be much lesser and less repetition.
2

@bramuccci

Posted

Wow, this is really incredible! The design is indistinguible from the original and the responsive is magnificent, you use the grid layout so well. I really like this so much, please keep going 💖. And for the dots... maybe you can put a mini menu who cover the card with fake options? You can use addEvenListener click and mouseover.

1

@FelixCriollo

Posted

@Liltanie Thank you. I used PixelParallel, it is a google extension, to make the design as similar as possible

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