Skip to content
Submitted over 2 years ago

Time Tracker Using VanillaJS (Custom Design - Dark Glassmorphism)

DarkDev56•330
@dotfivesix
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

I implemented my own design (inspired from some youtube tutorial) for this project. The hover effect and animation when data updates took most time. I was stuck on how to target ::before of an element using vanillaJS (used alternative solution). Also I got to know about .innerHtml property, because creating so many elements using vanillaJS then assigning attributes to each creates messy code, I don't think .innerHtml is the best practice out there, but as I wasn't using any framework/library, I had no issues. Overall, this project improved my understanding of MouseEvents a lot ! Any type of feedback or suggestion is welcome :)

Community feedback

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted over 2 years ago

    Hello DarkDev56!

    Great job, I like it 😍. About innerHTML, I would like to know why you say that it is not a good practice.

    Cheers!

    1
    DarkDev56•330
    @dotfivesixPosted over 2 years ago

    @Enmanuel-Otero-Montano Thanks for appreciating my project. In innerHtml, syntax wasn't highlighted (maybe I had to install some VSC extension), editing was hard. Second thing is, .innerHtml has security issues especially if data to be put in, is from the user (e.g user inputs malicious script, we take that and put in .innerHtml without sanitizing) but in this project, since data was authentic, I said I had no issue with .innerHtml, when working with vanillaJS, it's a good option in my opinion but not when you have a framework/library to work with.

    1
  • enochlee•600
    @iamenochleePosted over 2 years ago

    This is nice, great job done here.

    1
    DarkDev56•330
    @dotfivesixPosted over 2 years ago

    @iamenochlee Thanks for appreciating !

    1
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hey there,

    The design and effects look really cool! Great job 👍

    1
    DarkDev56•330
    @dotfivesixPosted over 2 years ago

    @DonUggioni Thanks a lot :)

    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