Skip to content
Submitted 7 months ago

Responsive Time Tracking Dashboard Using HTML,CSS,JS along with JSON

KrishnaPoddar1•400
@KrishnaPoddar1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Utlizing the JSON file to get data for the first time.

What challenges did you encounter, and how did you overcome them?

Using JSON was really difficult and took a lot of research to get through

What specific areas of your project would you like help with?

As you can see in the JavaScript Code I have some comments in nextFunc() which were not giving the proper output like:

const val = timeframes.${clickedId}.current; const value = element[val];

This is giving me undefined output and due to that I had to use a brute force method. I would love to know what was wrong in this and any other advice /suggestion will be helpful

This was my first time using JSON so I don't know whether it is correct or not.

Community feedback

  • Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Just finished this challenge, so I was very curious to see another implementation. Your unit selection is fantastic. Refreshing to see no inappropriate uses of pixels. I also like how your solution does not use excessive chaining.

    You ask about this line of code: const val = timeframes.${clickedId}.current; const value = element[val];

    I can tell you are trying to use clickedId to select the appropriate data. But you cannot use the ${..} outside of a backtick delimited string. You found the correction to use the [] brackets instead and used that in your code, that's great. On the second statement, I think maybe it should change to const value = element[clickedId].current; I might be missing something.

    Great job getting this working. It's challenging!

    Hope this helps. Happy coding!

    0

Please log in to post a comment

Log in with GitHub

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