Submitted over 3 years ago

Base Apparel coming soon page CSS, JS, Flex! Form submit modal feature

Eric Salvi• 1,330

@ericsalvi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback is helpful and welcome.

I couldn't get working was because I had my modal set to -20px on the top and after the user submits the form, the top ends up being set back to 0. This way I could have the modal slide down slightly.

I ended up removing the code but I had it when the modal section had the class added from JS that says "modal-open" is when I was resetting the top. Why could I see the animation in the console but it was not triggering at all once the modal appeared?

Community feedback

maia• 300

@maiaflow

Posted about 2 years ago

The modal is such a nice touch, looks really good.

Testing your solution did make me realize a difference in our approaches, where you did validation with javascript on submit and I did it with the logic in the :invalid pseudoclass based on the input type email. I imagine these approaches could be combined so that the user could know the email was invalid before even hitting submit.

Marked as helpful

Eric Salvi• 1,330

@ericsalvi

Posted about 2 years ago

Thank you @maiaflow,

Recently I actually learned you can use Regex Patterns on a few different input types.

https://www.youtube.com/watch?v=g-Y31Iswr2M

I do wish I tried this newer-to-me approach on this one but I was very happy with the work I did with the JavaScript.

Yui• 50

@yterai

Posted about 2 years ago

Great work as always! I'd like to ask you a thing that I always have doubts about... How do you make line breaks responsive? I've added line breaks with <span> and ::before pseudo-element and it works fine. But this makes the HTML looks messy (too many <span>) and I just feel it's a bit hacky way? Your HTML/CSS doesn't look like mine at all and is very clean. I'd like to know what is your secret!

Eric Salvi• 1,330

@ericsalvi

Posted about 2 years ago

Hey @yterai,

Thank you for the feedback. One thing I have learned throughout these challenges is that you should never set a height on elements such as text and allow them to be adjusted depending on the content in that container.

So for linebreaks, it is sort of the same thing. I write the content with no width restrictions and then when incorporating my mobile responsive design, the container's width of that section will automatically flow into place. I never add specific linebreaks to my content and rely on the content to flow naturally given the device's and container's width.

I hope that makes sense but if I am misunderstanding you, please message me so we can work on it together.

Yui• 50

@yterai

Posted about 2 years ago

@ericsalvi That totally makes sense! I'll try that next time, let's see how it goes...!

Chidiebere Ernest• 260

@Ernest2026

Posted over 3 years ago

Pls how do you get the solution to be exactly the same as the design 😳??? Nice work you got there tho...

Eric Salvi• 1,330

@ericsalvi

Posted over 3 years ago

@Ernest2026 This one actually took me a few days to complete. It definitely made me have to think as it was very complex.

Typically I can do one in a few hour's time but with this one, I needed a break from it. Did that a few times to finally get it completed.

When I start these challenges, I take it just one section at a time and I have the preview of the end results open in another program. From there I go back and forth with the 2 views on top of each other. I keep on doing that until I get my solution as close as possible.

Please log in to post a comment

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