Submitted 4 months ago

Newsletter sign-up form with success message

yoyov51234• 240

@yoyov51234

Preview site(opens in new window)View code(opens in new window)

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?

Proud: Kept going

Next time:

Draw the design first and go through the structure before implementing anything.
Break the huge issue into small pieces, analyze goes first then try

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

Get to know built in validation, type, required, min-length , max-length and so on.
Get to know the JS validation
Toggle class when display hide the div
mail.style.borderColor = 'var(--Tomato)';, in js if the css property has dash, the just use the camel case.

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

We have a good layout on 375px and 1440px, but when resize , some weird things happen, the layout looks strange, for example: 754*601.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 4 months ago

Hi! It's quite a decent work =)

I can suggest you to get used to add name attribute to every input field of your form. It'll be very important in the future when you'll use forms to send data to the server.

Also learn about FormData object. This is a special object to collect data from the forms via JS. It makes sending data to the server more convenient and requires a name attribute too.

In my turn I learned from your code another way to check validation in the script. I used regular expression but maybe it is a bit overkill =)

Good luck and happy coding =)

Marked as helpful

yoyov51234• 240

@yoyov51234

Posted 4 months ago

@Alex-Archer-I Hi Alex,

Thank you very much for the feedback, I will look into the way you suggested and update the code, I will review your solution and feedback later~! Happy coding together~

Please log in to post a comment

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