Submitted about 2 years ago

Time Tracker Using VanillaJS (Custom Design - Dark Glassmorphism)

DarkDev56• 330

@dotfivesix

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

HTML
CSS
JS

2junior

View challenge

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-Montano

Posted about 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!

DarkDev56• 330

@dotfivesix

Posted about 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.

enochlee• 600

@iamenochlee

Posted about 2 years ago

This is nice, great job done here.

DarkDev56• 330

@dotfivesix

Posted about 2 years ago

@iamenochlee Thanks for appreciating !

Renan Tiscoski• 1,240

@DonUggioni

Posted about 2 years ago

Hey there,

The design and effects look really cool! Great job 👍

DarkDev56• 330

@dotfivesix

Posted about 2 years ago

@DonUggioni Thanks a lot :)

Please log in to post a comment

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