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 Tracking Dashboard

@acha-jr

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Devmor 470

@devmor-j

Posted

Hey! This looks identical and you did a great job 🎉.

If this helps and you like other's opinions then there's one little tip that makes this project more maintainable and that basicly is to use data-[...] on html elements that are accessed in your javascript.

For example in this project you used <li> tags with no other specifications and later on if someone adds another <li> tag then this code might break:

...
const interval = document.querySelectorAll("li");

interval[1].classList.add("current");
interval.forEach((e) => {
  e.addEventListener("click", () => {
  ...

If we apply the practice we discussed above then in index.html we could write like so:

<ul>
  <li data-interval>Daily</li>
  <li data-interval>Weekly</li>
  <li data-interval>Monthly</li>
 </ul>

therefore js would become:

const interval = document.querySelectorAll("[data-interval]");

You get the idea and this was just my opinion, As I said overall this is a really good and minimal solution. Cheers 😃

Marked as helpful

1

@acha-jr

Posted

@devmor-j Thanks for the feedback, that's correct and I understand completely. I actually used the <li> only because they were the only ones so as to not fatten the html.

Thanks for the commendation too 😊 👍🏾

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