@khatri2002Submitted 3 months ago
Animated Time Tracker Dashboard | React ⚛️ + Tailwind 🎨 + Sass 🚀
#react#tailwind-css#typescript#sass/scss
Michael Wilson
@mikewil245All comments
- @mikewil245Posted about 2 months ago
Nice project , I like how the card stack as you stroll down.
1 - P@wcyin9Submitted 2 months agoWhat 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
@mikewil245Posted 2 months agoProblem 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 helpful0 - @BasselfathySubmitted 4 months agoWhat 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 :)
- @KristinaHorbenkoSubmitted 5 months agoWhat 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.
- @Roman-oryolSubmitted 5 months ago
- P@rafaeldgeoSubmitted 6 months agoWhat 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!
- @hl-wongSubmitted 7 months ago@mikewil245Posted 6 months ago
Some reason when viewing on my deskstop , the solution is not matching
0 - P@wonderlust101Submitted 8 months ago@mikewil245Posted 8 months ago
I new to sass and i like how organized you have your files, could you give me some tips to how to better organize my project. and nice work on the project ! it spot on
0 - @luqmanx1998Submitted 8 months ago@mikewil245Posted 8 months ago
It was an error when trying to open up the preview site ,
0 - @konradbaczykSubmitted 8 months agoWhat challenges did you encounter, and how did you overcome them?
The biggest challenge in this project was to change style of markers in lists. MDN and Stack Overflow were helpful.
@mikewil245Posted 8 months agoNice project looks just like the design ! Btw any reason you didn't use the provided fonts ? you can use
@font-faceto import them but besides that nice work !Marked as helpful1 - @ravikant717Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I have integrated CSS variables and started using better alternatives to px.
What specific areas of your project would you like help with?When I use Tab to navigate, the glow effect is different from what I had thought. When I loaded the file for the first time, it showed me a different font, and then I switched to my font. Can the website load the font first before showing up?
@mikewil245Posted 8 months agoYou should follow semantic HTML, for example you have
<div class = "links"><a href = "#" class = "links-text">Github</a></div> <div class = "links"><a href = "#" class = "links-text">Frontend Mentor</a></div> <div class = "links"><a href = "#" class = "links-text">Linkedin</a></div> <div class = "links"><a href = "#" class = "links-text">Twitter</a></div> <div class = "links"><a href = "#" class = "links-text">Instagram</a></div>you could've did
<ul><li><a></a></li></ul>since you have a list of itemsAnother thing to note is to look into rems and ems instead of using px when using them for setting
font-size,widthsetc..but besides good job !
Marked as helpful0 - @WallacyDevSubmitted 8 months ago@mikewil245Posted 8 months ago
Nice project, I learned a nice feature in css called
text-wrap: balance;and it would help balance the text you have and for better readability . Also i would decrease the thickness around the border of your card just by a little bit. But besides that good job !0 - @yujinyuzSubmitted 8 months agoWhat challenges did you encounter, and how did you overcome them?
- You need to provide the width: 100% to the image so that it only takes up the available width of the parent container.
- I made a rookie mistake where I was applying the padding to the
imginstead of the parent container.
@mikewil245Posted 8 months agoMaybe increase the padding around your
<section class="card-text"></div>as well , and add somemargin-topbetween yourimg,h1,p0
