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

Contact form with vanilla js and css

@Holgermueller

Desktop design screenshot for the Contact form 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?

That I was able to figure out all of the form validation functions, particularly how to remove the error messages from the DOM when the user resumes filling out the form. I think next time I'd probably use something like grid or bootstrap for the formatting and spacing of the form.

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

I had trouble getting all of the functions for the form, the validation and the subsequent error message removal, to all work together. I originally had one large function that handled everything, and figured all the actions in that function were interfering with each other. So I figured out a way to separate my concerns, by refactoring my code and giving each of the error messages their own function, and attached these functions to the individual inputs elements on the form. This not only eliminated the problems my function was having, it made my code easier to read, and ultimately maintain.

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

Any constructive criticism, tips, and/or tricks are welcome!

Community feedback

@Gilbert-Koom

Posted

You were close to the design but i recommend you read more on form validation at MDN

Marked as helpful

1

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