Skip to content
Submitted about 2 months ago

Time Tracking Dashboard

sass/scss
P
Emmanuel Lopez•480
@EmLopezDev
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I am most proud of pushing through it, there were times where I couldn't figure out how to solve a part of the solution but rather than give up I tried and tried until I figure it out.
  • Getting a better understanding of some of the core concepts of JavaScript like event delegation , the .reduce() method and Promises.
  • Taking in the extra time to create a loading state
What challenges did you encounter, and how did you overcome them?
  • Buttons not working after fetching data. I forgot that fetching data re-renders the HTML causing any event listeners to be removed, therefore I had to use event delegation to get it to work. I figured it out by using stack overflow and reading up on the fetch() method.
What specific areas of your project would you like help with?

I would like some feedback on the main.js file was there a better or more efficient way of writing the js.

Code

Please log in to post a comment

Log in

Community feedback

  • Alperen Aksoy•150
    @aksoyalpi

    Your HTML and CSS look very good (your solution is also very accurate), but your js is not that performant, because you add and remove a lot of elements. Try to use more css to change the data (for example with data attributes, that helped me a lot; see this: https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes).

    My Solution is also not perfect, but you can check it out, if you want to see how to use the data attributes and minimal js :)

    Marked as helpful

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