Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro component with signup form

@AymaneOnline

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The most difficult part on this project was the Javascript code, but it was good to learn. There is one problem (I think) on my screen when I press submit without filling any of the inputs some elements go outside of the screen and cannot be visible. If you got any solution for that, or any other things that you found not correct in my code I would like to give me some feedback. 👍

Community feedback

@huanfs

Posted

to solve the problem, you can turn ".error-text" in a positioned element, using "position:relative" and fixing it in a fixed position under the form, and finaly turns it invisible in two ways, or using "display:none" and making it a "display:inline", or making it invisible using "opacity:0" and turning it visible using "opacity:1". in that way, the error message will exists invisible fixed in a position declared and the layout not change while they apears

Marked as helpful

0

@AymaneOnline

Posted

@HuanFs I've got your idea, it should actually work, besides using only "display:none" and switching it with "display:inline" which not only hides the element but also delete the space that it should take when it's visible (At least that's what happened to me, i don't know if it could work in another way 🤔), but the only thing that would happen then is that it will not match the actual design that we were giving, because there is some space out there between the error-text and the input. Thank you for your solution, it could possibly help me in another project.👍

0

@AymaneOnline

Posted

@HuanFs I've just updated my style.css file as you said (by switching the opacity from 0 to 1), it works properly.👍 Thanks.👌

0

Please log in to post a comment

Log in with GitHub
Discord logo

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