Submitted 2 months ago

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

Christina• 190

@codercreative

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

This is a solution for...

Newsletter sign-up form with success message

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?

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

@johnnygerard

Posted 2 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

Christina• 190

@codercreative

Posted 2 months ago

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

Mike• 180

@sanyomor-01

Posted 2 months ago

Nice work done

Christina• 190

@codercreative

Posted 2 months ago

Thank you so much, Mike!

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