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 using vanilla js and pure css with html tables

@Vishisht-Dwivedi

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?

im proud of using html tables for the markup of the challenge.. they were a little tough to deal with a very weird at times too.. im proud of using my full knowledge of js upto this point to make several checkpoints for the inputs and also manipulating the DOM

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

I would like help with my js. I think that it can be much shorter than it currently is.. I have tried using the event object on purpose to get some familiarity with it.

Community feedback

@rahulkumar215

Posted

Hello @Vishisht-Dwivedi👋

Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

first of all let me say this, your JavaScript knowledge and skills are really good, you have used a lot of DOM manipulation in your JS Codebase, that is very good.

however, you could have done it in a simpler way by just doing this

  • Create p warning tag and add it to all the input fields in the HTML, then keep that p tag hidden with opacity: 0;,

  • then write JS code to detect whether an input is invalid, and when that input is invalid, use JS to add a class that turn the opacity:0; to opacity:1, to the p that is present in that invalid input.

  • this will create an effect where the user will see the p warning when an input is invalid.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

If you need any feedback or suggestions, I am happy to help

Have Fun Coding!

1

@Vishisht-Dwivedi

Posted

Thanks a lot@rahulkumar215 !! The reason i used the append version for adding those elements was because i had justtt learnt about the event object in my course and i wished to use it to its fullest extent. I wanted to learn more how about how js can be used to create and make newer elements... i have used your version with the display setting set to none on the success message that pops up because i couldnt think of a way to create it using js. Thank you so much for the replyy!! Ill keep that in mind for my next projects!

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