Intro component signup form with client-side validation

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

I am happy with how the client-side data validation ultimately turned out. As per the design, users are made aware of invalid data using colour changes, error messages, and error icons. But, when correcting invalid data (i.e., when the offending input regains focus), these various error indicators are turned off.

There was several event listeners that I needed to add. Next time, I might use something like JQuery to reduce the amount of JavaScript needed to do so.

What challenges did you encounter, and how did you overcome them?

On this project, I got a little bogged down with client-side data validation when the submit button is clicked. I wasn't 100% sure what to do with all of the error indicators when the user went back to fix things. In the end, I decided that, once an input regains focus, all of the error indicators should be turned off. I think it works well, but perhaps someone with mode UX/UI knowledge than me would have better ideas.

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

To implement client-side data validation, I attached an event listener to the submit button whose first line was

event.preventDefault();

Then, I checked all four inputs for valid data. If all data was valid, I logged a message to the console. But, in a real web app, I'm guessing that, after validating the data, I would submit a post request to the intended server using axios (or something else). Does this sound right?