Skip to content
Submitted about 1 month ago

Animatable Time Tracking dashboard (with dark and light modes)

#gsap#tailwind-css#accessibility
P
David Pokrajac•500
@DavidPokrajac
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 used TailwindCSS for this project. I didn't personally like it and will try to go with another CSS solution next time. And I also used GSAP for a little bit of animation. I also incorporated light and dark mode so that the user can toggle between those by checking an input checkbox.

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

I would like to seek help in three things in particular.

1.) When turning the dark mode on by checking the input checkbox, the dark mode will appear on screen, and it will persist on page refresh, as I set localStorage for it. However, input checkbox will go back to its unchecked state on page refresh, and the result is dark mode appearing although input checkbox is not checked (on page refresh). I tried to use localStorage so that on page refresh input checkbox stays toggled on based on the the value of the checked attribute but I still have not found any solution for that.

2.) Second major problem I had is with gsap animation. I wanted to animate on each button click, that card component hides its content inside and then shrinks down to height of zero, and then wait 0.75 seconds to rise to its normal height, and then display its content again by making it visible. However, it seems that contentVisibility is not animatable (or atleast that is what i think). How could I successfully animate content inside parent to hide and reappear?

3.) I used ref.current.clientHeight to calculate height of a card, when making gsap animation explained in second problem, but as I shrink the window the height is a bit different for mobile and laptop devices and it gets a little distorted. Is there a way that height would readjust dynamically when resizing? Is this something resize event listener would help?

Community feedback

  • Jay Khatri•4,250
    @khatri2002Posted about 1 month ago

    Hi @DavidPokrajac!

    The developed solution looks fantastic! The animation and dark theme are really well executed! Amazing creativity!

    Suggestions for Improvement:

    1) Checkbox Not Checked on Page Refresh

    The dark mode state is correctly stored in localStorage and applied on page load. However, the checkbox input itself is not being checked on refresh. The logic to check the input based on the stored theme is missing, so the checkbox always appears unchecked, even if dark mode is active.

    After updating the darkMode state, also update the checkbox's checked state.

    2) Layout Shift When Switching Themes

    When switching to light mode, a 2px border is added to the card. In dark mode, the border is removed entirely. This causes a slight text movement, making the layout unstable.

    Why is this an issue?

    • Theme switches should only affect colors, not cause layout shifts.
    • The border is taking up space, and removing it shrinks the card, shifting its contents.

    Instead of adding/removing the border, use a transparent border in dark mode:

    .card {
  border: 2px solid transparent; /* Border always exists but is invisible */
}

.dark-mode .card {
  border-color: white; /* Just change border color instead of removing it */
}

    This way, the card size remains the same, preventing layout shifts.

    The rest of the solution is fantastic! Keep up the great work! 🚀

    Marked as helpful
    1
    P
    David Pokrajac•500
    @DavidPokrajacPosted about 1 month ago

    @khatri2002 thanks a lot for your very insightful and detailed comment! I will try to fix those errors as soon as possible.

    1
  • Quyt•180
    @220100dungvanPosted about 1 month ago

    That’s amazing! 🌟 You’re really creative. 🎨 I noticed you’re using libraries and frameworks, but I haven’t learned any frameworks yet. Do you think I can achieve these things using just plain HTML, CSS, and JavaScript? 💻✨

    1
    P
    David Pokrajac•500
    @DavidPokrajacPosted about 1 month ago

    @220100dungvan Hi, thank you very much for your kind words, although I am far from being creative :). As for achieveing this using HTML, CSS and JS, you most definitely can. For this small project, you can absolutely do it as there is practically no JS, if you exclude some parts of my solution, like switching between light and dark modes for example. However I prefer using some of the frameworks like React as it is used by everyone and it get the job done far, far quicker.

    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