Time Tracking Dashboard (HTML, CSS, JS)

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout looks really good and it responds well, the mobile layout is great as well.

  Some suggestions would be:

  • The img for the person should have used their name as the value like alt="Jeremy Robson", always make the alt meaningful if the image adds content.
  • On this one, I wouldn't really use the h1 for the name of the person, I would make the h1 a screen-reader only text to give overview of the whole webpage.
  • Also, why place:

  <h1> Jeremy Robson</h1>
  <p>Report for </p>
  

  This makes the html in wrong order, it should be swapped, then just use `flex-direction: column-reverse" on the flex parent.

  • Those numbers like 5hrs 1hrs they shouldn't have been the heading, since they don't really give any extra information, the work play those are the ones that should be the heading, because if a user navigated on them, they would know that this section tells them about the work, tells them about the play.
  • The alt for the elipsis images should have been left empty like alt="", since those are just decorations.
  • Those button should not have role="button" since those are already button. Also an addition, since that part is a selection, using input type="radio" on those would be great, since you can only choose 1, and radio buttons are intended for those, using it would add extra accessibility on your website because unlike button there is no extra information if a user toggles it, unless you use other aria's or alert.
  • Those selections as well should have visual indicator, if you remove the outline make sure to add something to the :focus-visible state of the selector.

  Aside from those, great work.

  00

  Marked as helpful
• 

  P

  Karthik suryadevara•865

  @karthik2265

  Posted almost 4 years ago

  Looks nice There are 2 issues I found

  1. looks like there is border at the bottom of cards to handle this try putting margin to 0
  2. in javascript you forget to update text along with number of hours i.e for daily it should be yesterday and for monthly it should be last month

  00

  Marked as helpful