Time tracking dashboard

Community feedback

• 

  P

  Aydan•680

  @AydanKaraPosted about 1 month ago

  🔥 Great effort @bojanognjen!

  The project is well-structured, API integration is well-done, and the layout is responsive. A few tweaks to semantic HTML, accessibility, and JS code structure would make this even better. 🚀

  1. Semantic HTML & Accessibility

  • Consider using semantic elements like <section>, <article>, or <header> instead of generic <div> elements to improve readability and accessibility.
  • The <span> elements used for buttons (Daily, Weekly, Monthly) should be actual buttons (<button>) for better accessibility and keyboard navigation.

  2. Layout & Responsiveness

  • The CSS grid system is well-implemented for different screen sizes.
  • You set padding-top: 5rem in body by default. Instead you can try to set padding like this:

  @media (max-width: 768px) {
      body {
          padding-block: 5rem;
      }
  }
  

  This way the content will be centered better on desktop view.

  3. Code Quality & Readability

  • The color styling of active buttons (.span-first) should be handled using CSS classes instead of inline JavaScript changes to keep logic and styles separate.
  • Avoid deep DOM traversal:

  box.children[1].children[1].children[0].textContent = arrayObject.timeframes[key].current + 'hrs';
  

  This makes the code harder to maintain. Use querySelector with meaningful class names instead.

  I hope my feedbacks helps you. If you have any questions, don't hesitate to ask. I'd be happy if I can help you with anything.

  1

  ---

  

  P

  Bojan Lukic•230

  @bojanognjenPosted about 1 month ago

  @AydanKara Thank you a lot my friend, this is my first API project on Frontendmentor. Feel free to leave me a comment every time I post a project! Thank you.

  1

  

  P

  Aydan•680

  @AydanKaraPosted about 1 month ago

  @bojanognjen For your first API project in Frontend Mentor, you did an excellent job. If you found my comment useful, please mark it as helpful. Thank you.

  1