Skip to content
Submitted almost 4 years ago

Intro with sign up form using flexbox and vanilla JS

Chloe•240
@cguttweb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm reasonably happy with the final result but there is definitely room for improvement particularly in the JS I feel and form styling is always awkward to get it consistent. Any suggestions welcome.

I had some issues with the error icons managed to add the icon to the input fields, but it doesn't seem to appear on the password field for some reason? Anyone have any idea why?

Community feedback

  • Chloe•240
    @cguttwebPosted almost 4 years ago

    Hey, thanks for the feedback. The ::after pseudo element is a good idea (I always forget about these) but that seems a lot of markup to add simply to show an svg. It also appears my images aren't working...

    0
    isimeri•250
    @isimeriPosted almost 4 years ago

    @cguttweb can't do anything about it. The <input> element doesn't support the ::after and ::before pseudo-elements. That's why the wrapper div.

    0
    Chloe•240
    @cguttwebPosted almost 4 years ago

    @isimeri Ah ok yeah that makes sense :)

    0
  • isimeri•250
    @isimeriPosted almost 4 years ago

    Hey there. The error icon thing doesn't appear anywhere at all on my side. I would wrap each input element in a <div class="wrapper"> and use the .wrapper::after pseudo-element to handle this. Cheers!

    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