Skip to content
Submitted 5 months ago

form validation js

tortaruga•450
@tortaruga
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 managed to finish it and that I didn't take as long as I thought I would, but I'm still not very good at judging sizes

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

i couldnt get the validation to work, because I had forgotten to add defer in the script tag; also the linear-gradient acts different on firefox and chrome: on firefox it's vertical instead of horizontal; i just changed the direction from 90deg to 180 and now it works fine on firefox too, but I'm not sure why

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

I used the flex property to style the form and the image, by giving both flex: 2, and I like the result, but I don't really understand how the property works. I just tried random values until it looked good

Community feedback

  • Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    the flex property is short for flex-grow, flex-shrink and flex-basis:

    • flex-grow: Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. A value of 0 prevents the item from growing, while a value of 1 allows the item to grow and fill the container proportionally.

    • flex-shrink: Defines the ability for a flex item to shrink if necessary. It also accepts a unitless value that serves as a proportion. A value of 0 prevents the item from shrinking, while a value of 1 allows the item to shrink proportionally when necessary.

    • flex-basis: Defines the default size of an element before the remaining space is distributed according to the flex-grow and flex-shrink properties. It can be a length or auto.

    applying one value to flex will modify only the flex-grow property, the second will modify flex-shink, and the third is for flex-basis.

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    1
    tortaruga•450
    @tortarugaPosted 5 months ago

    Ooh it's a proportion 😅 Thank you @kodan96!

    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