Skip to content
Submitted 5 months ago

TimeTrackingDashBoard

CasperTheChild•420
@CasperTheChild
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 finally understood how the code of data.json works with the help of AI assistance. Next time, I want to try writing the JS files myself without their help.

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

As I mentioned, I had trouble understanding how working with data works. AI assistance helped a lot.

What specific areas of your project would you like help with?

In the last addEventListener at the end of main.js, I couldn't resolve the issue. The problem was that the images didn't change their brightness when hovered over. Additionally, it seems that the .BlackBackground and its parent elements don't have the same width. There are also minor issues in the index.html, style.css, and main.js files."

Community feedback

  • Facundo Andrés De Los Rios•360
    @FacundoDLRPosted 5 months ago

    Hello!! I was looking at your solution for this challenge and have some comments. I hope they are helpful to you:

    • First of all, I will give you the codes with some tests that I carried out to improve the views of the cards.
    .BlackBackground {
margin-top: -9rem; /* you can change the value that best fits */
position: relative;
}
.ColorfulBackground /* here card class */ {
background-color: /* color */
}
    • for the class .TimeIntervals (navigation list) I would suggest you use unordered/ordered lists, etc.
    • For the hover effects that change the color of the cards, it is NOT necessary to use Javascript in this challenge. It can be solved with simple CSS. You can search for information about selectors, combinators and pseudoclasses. For example:
    .BlackBackground:hover {
background-color: /* color you want */;
cursor: pointer;
}

    Happy coding! =)

    Marked as helpful
    1

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