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

Responsive age calculator app

@FlackoCodes

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Getting my hands dirty with useSate hook in React for updating the errors.

What specific areas of your project would you like help with?

Got stuck with updating the form inputs color to red when the are erros.

Community feedback

P
Rupali 780

@rupali317

Posted

Hello @FlackoCodes

For updating the inputs to red color border, you need to inject a class to it like .error-input when the error occurs. When the input is fine, then the .error-input class should be removed. Then in your css apply the respective css property to that .error-input class.

I have also worked on a similar project where I need to validate my inputs and display the errors accordingly for the inputs. I used React and Styled components for the project. Refer to my Input.jsx.

Hope it helps you in solving your issue.

Marked as helpful

1

@AlanLopRey

Posted

You have several problems, like:

  • you allow users to put negative numbers
  • you need to separate the code into smaller and more handle functions, you can do this by using custom hooks

I will make you a PR to solve those problems. Have a good day

0

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