P
@niuguy
What are you most proud of, and what would you do differently next time?
Compared to my last submission, I breaked the app.tsx into several testable components and practiced using vitest to do unittest
Latest solutions
REact tip-calculator
#react#tailwind-css#jestSubmitted 23 days agoI've had issues with Tailwind CSS v4 and the hover: utility — there was no visual feedback when hovering. I tested the same code with Tailwind v3 and it worked as expected, but I didn’t want to go through a full migration. I'm wondering if there's a solution for this in v4. I suspect the problem might be related to all my monitors being touchscreens, which could be affecting how hover states behave.
Mortgage calculator using React and tailwind with svg as componenent
#reactSubmitted about 2 months ago
Latest comments
- @ClaudiaRamirezD
Great job! Your current test checks that the BillInput component renders and updates the value correctly, which is great. However, it doesn't account for edge cases like negative numbers. Right now, users can enter negative values, which likely shouldn't be allowed.
To improve this, I suggest:
Updating the component logic to prevent or sanitize negative values (e.g., by rejecting them or converting them to zero).
Adding a new test case to ensure that negative inputs are either ignored or handled gracefully.
Optionally, you could provide visual feedback to the user if they try to enter an invalid value.
Adding these checks will help improve both the reliability and the user experience of your calculator.
- @CoolNight99What are you most proud of, and what would you do differently next time?
I think I got the design and functionality close to the requirements (though the design is a bit off).
What challenges did you encounter, and how did you overcome them?For some reason, the theme changes for things like the input and filter didn't work with Vue so I had to use CSS. Not sure how to fix it.
What specific areas of your project would you like help with?How can I dynamically change the theme of the elements in dark mode using Vue instead of CSS?
@ClaudiaRamirezDI think you haven’t finished yet — the flags still need to be given a uniform size and the styles from the guide need to be applied.
- @cassiopeia001@ClaudiaRamirezD
Great job breaking up the UI into components! The code looks good, and it functions well on all different screen sizes.
However, there are a few areas for improvement:
- Consider adding a hover effect to the input fields.
- The mortgage amount input remains blue by default, which could be adjusted.
- The checked radio should be --lime as well
Marked as helpful - @samuel-aduWhat are you most proud of, and what would you do differently next time?
I'm proud that I was able to complete this without reaching for a state management library like Redux or Zustand.
What challenges did you encounter, and how did you overcome them?My choice of implementing this was not something I had done before but with the help of these articles by Kent C Dodds, i was able to complete it and developed a better understanding of state management.
What specific areas of your project would you like help with?I would really appreciate every feedback and suggestions on how I can improve.
@ClaudiaRamirezDGreat job! I didn't find anything wrong. Keep up the hard work!
- @guillemfrasquetWhat are you most proud of, and what would you do differently next time?
I used this challenge to refresh the basics of React and I think I've done it pretty good, but it would be so nice to discover things that I could improve, as that's the point of all this
What challenges did you encounter, and how did you overcome them?I've had some issues with CSS to adapt to mobile version due to some conflicts with the desktop CSS, but I managed to solve most of them. Anyway, I guess there's always room for improvement.
What specific areas of your project would you like help with?It would be nice to check:
- The basic structure of components created with React, in case there is something wrong.
- I couldn't use the font using local file. Which should be the route to indicate in @font-face - src? The file is in public/assets/fonts
@ClaudiaRamirezDWell done! I couldn't find anything to add! Keep the hard work!
- @TrEv0rRrRr@ClaudiaRamirezD
Destination looks off from desktop upwards, reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
