Skip to content
Submitted almost 3 years ago

Time tracking dashboard | HTML,CSS,Javascript | Anime.js | Webpack

bunee•2,020
@buneeIsSlo
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

Hey! guys, I completed another challenge. What seemed to be a fairly simple challenge at first, had some really head scratching elements to it. Took me a while to complete, but in the end I got there.

Some not so necessary features

  1. Added a "loading" screen.
  2. Added some mildly satisfying hover effects.

Questions

I have no particular questions for this one, but would love the read your thoughts on it. Personally I feel like the code could have been much more efficient and accessible.

Acknowledgement

I want to thank @FlorianJourde and @beslerpatryk. Initially I wasn't so sure of how I'd approach this challenge, but looking through both of their solutions I picked up some really useful things.

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Community feedback

  • Igor Ostojic•300
    @igor-ostojicPosted almost 3 years ago

    WHAT THE HELL !

    This is insanely well done....

    I am seriously speechless...

    Do you maybe have any tutorials / guides on how to achieve that loading animation and the initial dashboard animation ?

    Everything is so smooth i can't stop replaying it....

    And one more question , since i have just done this challenge, is there any way to animate the changing of content when it is fetched from the JSON file and rendered to the HTML ?

    Thank you in advance ! Amazing amazing work once again.

    0
    bunee•2,020
    @buneeIsSloPosted almost 3 years ago

    @igor-ostojic

    Thank you for the kind words, I'm glad you like it.

    1. The loading animation is actually quite simple to create. It's an absolutely positioned div that covers the entire webpage, and after a delay of 3 seconds, the height of the div is changed from 100% to 0%. and the elements inside it have an opacity animation from 1 to 0. The Dashboard animation follows more or less the same idea, I'm just animating the opacity and scale of the elements from 0 to 1.

    2. These effects can be created with plain CSS, however handling the delays and synchronizing gets quite tricky. So using animation libraries like Anime.js or GSAP can be much more helpful. Both libraries have well written and visual documentation.

    3. Yes that's totally possible. It's just that I was a bit lazy to implement it. This person's solution has a really interesting to way to achieve it.

    Hope this helps :)

    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