Skip to content
Submitted 2 months ago

Newsletter sign-up form with JS and JQuery

#jquery
Mehrine•230
@YarAllyMehrine
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?

It is my first project using JQuery since i have learnt it and it really helps with DOM Manipulation.

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

I had some issues with the styling since i didn't want to seperate the success message and the sign-up form, therefore the styling was hard to do.

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

I was able to style the success msg but unable to put the relevant spacing on the button in the mobile layout and move the image on the desktop layout. I have tried using position relative, without success.

Community feedback

  • Marzia Jalili•4,250
    @MarziaJaliliPosted 2 months ago

    Hi there!

    Hope you're having a great day.

    Some changes you can make:

    • First, buttons by default don't receive the font from there parents.

    Set the code below to make it inhert the font from above:

    button {
  font: inhert;
}
    • Second, for a smoother color change use the transition property;
    button {
  transition: background-color 0.4s; /* or .4s for short */
}

    This ensures that the color will change after 400 milliseconds. Which makes it look even better.

    • Also, when the user tries again to write another email, the error state doesn't disappear.

    You can use the onChange with the inputs and get rid of the it when the input's value changes.

    I hope I convied my ideas properly 😁

    Marked as helpful
    1
    Mehrine•230
    @YarAllyMehrinePosted 2 months ago

    @MarziaJalili Hi, thank you for the input, it was really helpful.

    0

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