Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS GRID, VITE BUNDLER, TYPESCRIPT, VANILLA JS, SASS, FETCH

Benjamin 130

@Benjoow

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone!

I wanted to make this project only in javascript vanilla. It was not the easiest way but it allowed me to review the basics of creating elements in js.

I had some difficulties with the types while manipulating object data and I had to change my html and css structure because of a bad implementation of the absolute position.

Please feel free to give me some ideas to improve my code, it would be a pleasure especially on typescript.

Thank you.

Community feedback

Devmor 470

@devmor-j

Posted

Beautiful 🥰 I went through your code and I have to admit that all those packages scare me 😁. Some might say this is an overkill solution but in my opinion this sure could be an enterprise structure that provides scaling and online fetching in mind. Just being honest and hope this does not offend you my dear.

One thing that I highly recommend is that in tsconfig file set your target to something like es2016 or es5. This will bring support to a broader range of browsers and almost all of them support es5 syntax:

"compilerOptions": {
    // try 'ES5' or 'ES2016'
    "target": "ESNext",
}

Currently ESNext is not safe and causes ambiguity (imagine 2025 in which esnext means 2026). I personally would only use esnext just for development and not production or final bundle.

Overall I enjoyed your well-organized repo and names make sense, Have fun 😀

Marked as helpful

1

Benjamin 130

@Benjoow

Posted

@devmor-j

Thanks for your feedback!

I agree with you, it's a complicated solution that could have been done much more easily. It seemed logical to me to create cards dynamically when I saw the json file. I also wanted to do a little more javascript and practice organizing my functions.

Next step ? Do not use switch case anymore :)

Since your comment, I changed some points in my code. First of all, I removed the function deleting the cards in favor of the update which seems more logical once all the cards have been created. This avoids the jumping effect and seems more logical.

I was also inspired by your code that I found very clean by implementing an interface file to replace the Array<any> type that I did not find very clean.

I changed the js version of my compiler, thanks a lot for the information !

1
Devmor 470

@devmor-j

Posted

@Benjoow You're welcome dear, there are always a lot of ways to achieve something and the final goal is to get the job done.

Sometimes I also try to experiment some new ideas and stuff, just for learning purposes.

switch case! yeaaaah :) they could be so tricky!

Cheers bro 🤩

1

Please log in to post a comment

Log in with GitHub
Discord logo

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