Submitted 12 months ago

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

Christina•240

@codercreative

A solution to the Newsletter sign-up form with success message challenge

Preview Code

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!

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Johnny Gérard•880

@johnnygerard

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

Mike•180
@sanyomor-01
Posted 12 months ago
Nice work done

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