Skip to content
Submitted 5 months ago

Newsletter sign-up with success message built with HTML/CSS/JavaScript

Christina•240
@codercreative
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?

I am happy with the solution. Had to do a few workarounds - but overall it was a fun challenge.

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

I had a strange issue where I could not hide my main wrapper with JS. I had to hide the img and form wrapper separately. Also, in order to handle validation of email inputs purely through my custom JavaScript logic, I had to remove required and type="email attributes from my input element. These attributes triggered the browser's automated validation messages.

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

ANY and all help very much appreciated!

Community feedback

  • Johnny Gérard•640
    @johnnygerardPosted 5 months ago

    Hello Christina,

    To improve the picture element, use this code:

    <picture>
  <!-- Desktop hero image -->
  <source
    media="(min-width:768px)"
    srcset="assets/images/illustration-sign-up-desktop.svg"
  />
  <!-- Mobile hero image -->
  <img
    src="assets/images/illustration-sign-up-mobile.svg"
    class="hero-img"
    id="hero-img"
    alt="Orange/red color hero image with tech images"
  />
</picture>

    The fallback is already ensured by the nested img tag and does not need any extra steps.

    Marked as helpful
    0
    Christina•240
    @codercreativePosted 4 months ago

    Hi Johnny, Ah yes, that makes total sense. Thank you for pointing that out to me! Best, Christina

    1
  • Mike•180
    @sanyomor-01Posted 5 months ago

    Nice work done

    0
    Christina•240
    @codercreativePosted 5 months ago

    Thank you so much, Mike!

    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