Responsive Contact form w/JS & Animations

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

I'm really proud of creating a working & user-friendly Contact Form. This challenge serves as a refresher for working with form elements. As such, I learned how to style and target certain form elements using both CSS and JavaScript. Additionally, for this project, I started with a mobile-first design, which made creating the rest of the design easier as I worked my way up.

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

Since I was fresh when using form elements (outside of the basics), I had trouble checking the status of my form inputs. This also led to a major issue during development. Originally, I was coding the project's JavaScript using jQuery and ran into compatibility issues with JS functions like the checkValidity() method. This is because these JS functions couldn't read my jQuery code, so I had to rewrite some code in JavaScript. Looking back, I should have just stuck to using JavaScript from the start to save me the hassle. That way, I don't have to worry about certain methods and functions not working with my code.

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

I would love to gain feedback on my JavaScript code, in particular my checkFormInputs() function. I feel that I could have written my code more cleanly using a for loop instead of using a bunch of if...else statements. I probably wouldn't need to target all my input elements. I also like to hear your thoughts if my solution is user-friendly or accessible.