Skip to content
Submitted over 2 years ago

Base Apparel coming soon page with CSS and JS for email validation

Mario Lisbona•150
@MarioLisbona
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found this project quite easy as i had just completed the 'intro component with sign-up form' with multiple input field validations.

I wanted to improve it so i create a function with all the logic for the two different error messages for empty input or invalid input. This worked really well so i updated the previous project with a similar function which cleaned up the code.

One issue i have is that i have used preventDefault() to that the form from being submited while the inputs are invalid. However, the form is still not submitting when all the inputs are valid

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 2 years ago

    Hi Mario, page is looking really nice on desktop but something is off on mobile - on some screens the image looks to be covering up the heading. I think it would be a lot simpler if you didn't try to position it absolutely - have you tried just adding it with an img tag instead?

    The background image also is repeating which I'm not sure is the case in the original design.

    Nice work with form validation - I think you could maybe try to add validation as person starts correcting the email address? could be an extra challenge :) and as for preventDefault, it just prevents form from submitting to the page specified in the action attribute via the method specified in the method attribute. If you use this, you would need to provide an alternative way of handling the submission but don't worry about that for now. You can just set the input value to "" and display a success message to give it some pizzaz :)

    Marked as helpful
    0
    Mario Lisbona•150
    @MarioLisbonaPosted over 2 years ago

    @AgataLiberska

    Thanks so much for your tips Agata.

    I just updated my project using the image tag in the HTML. I actually used the <picture> container to display either the desktop or mobile hero image depending on the resolution.

    I also added a success message when a valid email is entered. Any other criticism of these updates would be appreciated :)

    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