Skip to content
Submitted 5 months ago

Newsletter-sign-up form with sucsess message with react

Ruan Gomes•100
@rug19
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'm proud that I learned several processes during this project.

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

I'm still learning JavaScript and programming logic, so I had the opportunity to use this ability that I'm still developing through this project.

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

I'd like to have feedback about the structure that I used to make this project, I'm still learning JavaScript and I decided to use React, I appreciate it if someone sees my code and gives feedback about it.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    Hi!

    Your code is quite valid =) You are using controlled components for keep inputs value updated and using states to handle errors and change windows. That's enough for such simple project =)

    I can give a couple semantic suggestions. At first - the label element should contain text Email address. You can put the error message there as well, or wrap them with flex.

    And you can use picture tag to dynamically switch images on the different versions.

    <picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

    It checks the conditions of source tags and choose one relevant or img there are no matches.

    Hope that helps. Good luck =)

    Marked as helpful
    0
    Ruan Gomes•100
    @rug19Posted 5 months ago

    Thank you so much for the feedback, in this project the image changes in the mobile version, even so, can I use a picture tag? @Alex-Archer-I

    1
    Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    @rug19

    Yeah, that its main purpose =) Now you change image inside the media query, so you can write this media condition on the source inside picture.

    <source srcset="/public/illustration-sign-up-mobile.svg" media="(max-width: 700px)">

    I guess that way you can use env variable path you are using for image src in the component.

    Marked as helpful
    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