What are you most proud of, and what would you do differently next time?
I'm proud to have closed this project, since it was one of the first I did and the first FrontEndMentor project I was able to solve. At a certain point, I believe I wouldn't change anything, I would just add something from Js to give it an extra touch of whimsy.
What challenges did you encounter, and how did you overcome them?
To be honest, the biggest difficulties I found were in the issue of the border of the card, where I had put the same color as the background, then I wondered why the border was not appearing, I corrected it by changing the color of the border of the card and putting --neutral medium as specified in the code.
Another big problem I had was adding the hover when the mouse hovered over the card to create an opacity, I ended up solving it when I saw it in a class resolution of my course and with the help of some people from the programming community.
What specific areas of your project would you like help with?
I believe that at the moment, it is viable like this.
What are you most proud of, and what would you do differently next time?
I learnt quite a lot in terms of accessibility in relation to forms. I didn't know you could announce certain things via a screenreader.
The input validation and error handling for the different input fields were quite exhaustive. I get why people opt for certain libraries to manage more complex forms.
I can still improve in planning the app beforehand. This time I focused mainly on the markup and styling of the app and got that done quite quickly. But there were certain details I overlooked which is why I had to adapt the markup and styling over and over again. The same goes for implementing the calculating logic. Just taking more time and takingsthose things into consideration beforehand would probably end up saving a lot of time in the end.
What challenges did you encounter, and how did you overcome them?
Styling the focus states of the different input fields got a bit hairy at some point. I used different techniques (CSS only with the :has selector or the peer utility, JS with the help of additional React state) and got to know the advantages / disadvantages. In a real-world project I would probably opt for one coherent approach but I left it this way in this project.
I also got to know some limitations of using Tailwind when I needed to style the radio button. But I got it working with the help of some custom CSS.
What specific areas of your project would you like help with?
I ran into a bit of trouble formatting the user input (just like in the design file). Displaying 300,000 instead of 300000 is just not possible in an input field of type number. But it felt somewhat wrong to use an input field of type text for a number input. You would have to add a bit more of input validation to make sure the user doesn't put in any text. Additionally you'd have come up with additional state to separate between the value you are displaying (formatted) and the value you are calculating the result with. In the end I decided that it's not worth it to implement the formatting in such a small project. Maybe I'll revisist it later on or find another approach.
I also didn't know if I should give the user additional feedback that only numbers could be put into the form fields. There is no error message popping up, there user is simply unable to put anything other than numbers into those fields. I thought it was kind of self-explanatory in an app like this.
What are you most proud of, and what would you do differently next time?
I think I really got the design right without much issue and I did in a fast way.
What challenges did you encounter, and how did you overcome them?
The maximum sizes of the images and how to work with the picture component. But after I understood with the design what I was suppose to do everything went perfect.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
Used Flexbox a lot for this. Really like that it's forcing me to practice it more.
What challenges did you encounter, and how did you overcome them?
Spacing, font, and image sizing I had to eyeball since I don't have the pro version with the Figma specifications. It's not exactly right but I think it's close enough.
What specific areas of your project would you like help with?
Spacing/font sizing suggestions. Did I use Flexbox correctly? Or are there other ways I could have aligned things that are more elegant?
What are you most proud of, and what would you do differently next time?
I've managed to implement the drag and drop that I've discovered.
What challenges did you encounter, and how did you overcome them?
Apply drag and drop, use tailwind with @layer root classes to automatically manage light-dark mode.
I wanted to use react's useReducer to practise and not stick with the classic useState.
I also handled the context for todos, the theme and filters.
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!
