Skip to content
Submitted almost 3 years ago

Mobile-first Intro sign-up form

Karolis•100
@KarolisGaiv
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

  1. I was not sure how to add error icon into input field. I've done it through CSS by using "background-image" and "background-position" properties but was wondering how good this solution is? Is it a valid and common way to do such thing or is it just some spaghetti code?

  2. Even though this is quite simple form and it's validation should not be too complex but I didn't follow DRY principle. My other ideas of how to write a form validation seemed to complex (way too many lines of code, multiple functions). How important is code quantity? Is it better to have such solution as mine (where I keep repeating code over and over but it's quite simple to understand) or have multiple functions which are called maybe once or twice but the code is not so repetitive?

Thanks for the feedback.

Community feedback

  • darryncodes•6,390
    @darryncodesPosted almost 3 years ago

    Hi Karolis,

    Nice work on this one, it's a lot more complex than it first looks!

    • succinct DRY code is best practice, but when learning I think making it work first is the most important then review and refactor where you can
    • I found Florin's video really helpful for this project: JavaScript Client-side Form Validation
    • I think your <main> could do with a max-width to ensure it doesn't stretch too much. I had a play around with max-width: 500px; (as a guide) margin: 0 auto; - margin added to centre the form.

    Keep up the momentum!

    Marked as helpful
    1
    Karolis•100
    @KarolisGaivPosted almost 3 years ago

    @darryncodes Thanks a lot! Yeah, That's what I thought about DRY code, that as long as it works properly it's all good. But it's bare minimum and I would like to improve. I'll watch that video as it seems that it will be helpful for me. And same as @AgataLiberska has suggested, I haven't even though about max-width! This is really helpful to get insights like these

    0
  • Agata Liberska•3,995
    @AgataLiberskaPosted almost 3 years ago

    Hi Karolis! :)

    1. I would normally add the icon in the html and then position it absolutely within a form-control div that also has the input and related label in it.
    2. I don't think this is a massive issue here where you don't actually have that much code in general, but overall you could try to group things together. For example, instead of having checks for each field separately, check all inputs at once and pull out input name for the error message.
    3. it would also be great if the error disappeared as soon as the input field had correct value in it.
    4. And just visually - would be great if you added a max-width to your page content - on my screen things stretch out a bit too much :)
    Marked as helpful
    1
    Karolis•100
    @KarolisGaivPosted almost 3 years ago

    @AgataLiberska Thanks a lot! Will try to implement your suggestions. And I really like your recommendation about max-width on page content. I haven't thought about that at all!

    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