Skip to content
Submitted 9 months ago

Responsive contact form using css flexbox property

Odoh Onyedika Johnpaul•30
@Jptech18
A solution to the Contact form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I can now write css custom properties with confidence
  • I made the page responsive to different screen sizes
  • I saw some use cases of JavaScript as a beginner in learning the programming language
What challenges did you encounter, and how did you overcome them?

  • I had problems in the query section of my page. But all thanks to ChatGPT as it gave me insight on the accent-color Property. So rather than using JavaScript to change the checkbox icon when clicked, I decided to keep it Simple with css accent-color property

  • I also had problem with writing out the code for form validation but I sort that out by declaring a variable and setting its value to true let isValid = true. so when the conditions for a valid input is not met I set the variable isValid = false and so I return the value of isValid at the end of the code return isValid. This checks whether all the inputs have been validated

What specific areas of your project would you like help with?
  • Naming conventions for writing css custom property
  • A better code refactoring or a better version of a form validation code
Code

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Odoh Onyedika Johnpaul's solution.

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