Skip to content
Submitted 5 months ago

Time Tracking Dashboard

Kamran Kiani•1,280
@kaamiik
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?

I encountered many problems in both CSS and JS, which I was able to solve a lot of them by searching, and I have to ask about some others. Overall, Poly was beneficial and helped me a lot.

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

Well,

  • one of the challenges was that I had never created a tab list before. I used a very good resource here, the link of which I have provided, and it helped me a lot.
  • Another challenge was that there were some cards on this page that had to act like a link. That is, when the mouse hover on it or when it was focused, it had to be clickable like a link. I also read this link about this, which helped me a lot.
  • To observe the points related to accessibility, I also used this link.
What specific areas of your project would you like help with?

Please take a look at the different parts of my code and if you see any issues, give me feedback so I can improve. Thank you.

Community feedback

  • Zakhar Polikarpov•260
    @ZPolikarpovPosted 4 months ago

    Hello there! Good job on completing the challenge. Your solution looks very good, there are only some small point and ideas that I think would make your project a bit cleaner:

    Instead of using a ::before on your li you could just use your li as the background by setting it's background-color and background-image. This way you have less elements in your document and don't need to play with position:absolute as much.

    I suggest using buttons instead of links for the timeframe selection. By using links the whole document reloads on click, which looks weird because the images on the color stripes are flashing. For bigger projects and documents that would also impact performace, since you'd need to load everything again.

    There's a weird cursor visual, where you color stripe on your card displays a cursor:pointer; but doesn't show any visual cue because it doesn't have a :hover state. As a user I would be unsure if clicking on the stripe would open the card itself as if I'd be clicking into the content below or an entirely different window. If you don't want it to be clickable you should remove the cursor:pointer on it. If you want it to do the same as clicking inside of the card content you should display the :hover effect of the card. If you want it to do something different, then you'd need a :hover effect on the color stripe to indicate a different function.

    0
    Kamran Kiani•1,280
    @kaamiikPosted 4 months ago

    Thanks for your feedback @ZPolikarpov For the timeframes I think It should be links. I added some references on the Solution retrospective and this page is like a tabbed interface and when you click on a link it's like you go to another page.

    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