@khatri2002
Animated Time Tracker Dashboard | React ⚛️ + Tailwind 🎨 + Sass 🚀
#react#tailwind-css#typescript#sass/scss
Latest solutions
Newsletter Signup | M/W
Submitted 9 months agoAs far as my javascript, what could I have improved on ?
Latest comments
- @mikewil245
Nice project , I like how the card stack as you stroll down.
- P@wcyin9What are you most proud of, and what would you do differently next time?
I made the most progress in my JS so I feel really happy that some JS logic and methods are coming to me faster.
I need to work more on refactoring my code and making it more DRY, as there seem to be some repetitions. Next time I tackle projects with forms, I should implement attribute selectors in CSS to select HTML elements more efficiently.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble with form manipulation in JS. Upon inputting numbers in the custom tip section, the numbers were coming out different and inaccurate compared to the tip buttons. Prior to hitting the enter key the numbers were the same, but after hitting enter key, the numbers were inaccurate. Turns out, I had to prevent default form submission in JS, and that solved the issue.
What specific areas of your project would you like help with?As an amateur front end developer, I have not had the chance to receive professional critiques that teach me about best practices in HTML, CSS, and JS. I would really appreciate for someone to point out any bad habits that I'm doing that could potentially break my code or cause future issues, or any mistakes in general.
I also don't know how to center the page to make it look exactly as the solution. The current solution I have is a bit off along the Y axis
@mikewil245Problem i encountered was after replacing the 0 in the number of people , the error message was still present. -might need to add an event listener with the 'input' , to catch it in real time
- When typing in the input for the bill, I was allowed to type in letters, might need to change the input type to number
-over good project, with some minors fixes that need to be done
Marked as helpful - @BasselfathyWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?Decreasing the screen size to tablet size made the cards shrink a lot and their text difficult to read, and instead of using
media queryto handle this situation.I used
What specific areas of your project would you like help with?grid-template-columns: repeat(auto-fill, minmax());to let the cards wrap smoothly without affecting their styles and keep their text readable.Every feedback and suggestion would be appreciated :)
@mikewil245Very nice
- @KristinaHorbenkoWhat are you most proud of, and what would you do differently next time?
Overall I am happy with the result
What challenges did you encounter, and how did you overcome them?Here is the slightly corrected text: It was difficult to write JavaScript code so that everything worked correctly.
@mikewil245Nice !
- @Roman-oryol@mikewil245
Very well done good job !
- P@rafaeldgeoWhat are you most proud of, and what would you do differently next time?
I'm proud because this is my frist challenge using SASS preprocessor. Next time I aim explore more resources available in SASS.
What challenges did you encounter, and how did you overcome them?I was complicated using pure SASS without plugins, as Gulp-Sass, Grunt-Sass and Webpack + Sass-loader. I searched the solution on internet, but there are few content about this
What specific areas of your project would you like help with?I would like help about SASS, if I used it correctly in my solution. Thanks!
@mikewil245Very nice project !
