Skip to content
Submitted 7 months ago

Tailwind CSS Time Tracking Dashboard

Rebeka•170
@BekiaD
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?

The layout and the animations. Little details like hover states.

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

The refactoring of the JS into for loops was a bit mind boggling. I find it difficult to think through the process so I use mindmaps for this. Deploying the tailwind project to netlify also took quite some time to figure out

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

Any feedback is welcome.

  • on mobile view the top part of the card is cut off because of the h-screen, but if i change it to sm:h-screen it looks fine on mobile, but not aligned on desktop view
  • There is a part commented out in my code that would pop up a share button when hovered over the ellipses (...) at each card. I found here difficult to work with the cards individually with a lot of repetition.
  • Also the bigger issue is that after the mouseover event the popup stays there.

Community feedback

  • Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    🎉Congratulation on completion of your project🎉

    1.Card Overflow and Layout: -To prevent card overflow issues, consider using min-h-screen. Browsers naturally try to preserve content, and issues often arise from unnecessary CSS. Your layout breaks at the small break-point because the required columns were not specified to fit all the cards. Ensure that your grid system accommodates all elements at different breakpoints.

    2.Netlify Deployment: -Great job attempting to deploy on Netlify! However, I couldn't view your website. When deploying with frameworks or libraries, make sure to specify the base directory and build command. This extra step is crucial for successful deployment.

    3.JavaScript Improvements: -Your JavaScript is currently not working. Here are a few suggestions: Use querySelectorAll for selecting multiple elements and adding event listeners. Break down large functions into smaller, reusable, and manageable functions.

    4.Design Focus: -Being creative is fantastic, but make sure to focus on basic design principles first. This will ensure a solid foundation before adding more creative elements.

    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