Skip to content
Submitted 6 months ago

Newsletter sign-up form with success message

yoyov51234•240
@yoyov51234
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

Proud: Kept going

Next time:

  1. Draw the design first and go through the structure before implementing anything.
  2. Break the huge issue into small pieces, analyze goes first then try
What challenges did you encounter, and how did you overcome them?
  1. Get to know built in validation, type, required, min-length , max-length and so on.
  2. Get to know the JS validation
  3. Toggle class when display hide the div
  4. 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-IPosted 6 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
    1
    yoyov51234•240
    @yoyov51234Posted 6 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~

    1

Please log in to post a comment

Log in with GitHub

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