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 main Solution(By HTML, CSS, JS)

Chinmay Agarwalโ€ข 235

@chinmayagarwal3007

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello ๐Ÿ‘‹!

Some problems I am facing are-:

  1. I am unable do that border thing in each card where the half of the card is given a border radius and the upper half colour is is below that border curve.๐Ÿ™„

  2. In the mobile interface, the person name card is bigger than the rest of the cards. How to fix that??๐Ÿค”

Please help me solve these problems(or any any other if you find it ๐Ÿ˜ฌ)

All the help is sincerely appreciated๐Ÿ˜Š

Community feedback

Thiago Santosโ€ข 295

@thiago-hds

Posted

Hi! Nice work so far!

1- You can do it by setting the background-color and border-radius on the parent div. It would be something like:

.work {
  background-color: hsl(15, 100%, 70%);
  border-radius: .83rem;
}

2- The person card is bigger because all the other cards have width: 90%. I'm not sure why you need to do it.

Here are some other suggestions:

  • You can set a max-width to the cards in the mobile layout so that they don't stretch all the way across
  • The card icons are only decorative so you can use background-image.
  • There is a lot of duplication in your script. You can try to come up with one function that receives the selected time period as argument and updates the UI. You can create an object to hold all the data and use it in your function.

Hope this is helpful!

Marked as helpful

2

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