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 sign-up form - using Bouncer.

P
Daveβ€’ 5,245

@dwhenson

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


I'd never used a plugin before, and as I've done a few forms on other challenges I wanted to try Bouncer. It worked really well and was amazed by how painless it made form validation. Cheating?

As usual my screenshot looks terrible! But I think the live site looks mostly OK, and seems to work fine. Any feedback is most welcome.

Community feedback

Roman Filenkoβ€’ 3,335

@rfilenko

Posted

Hey Dave, good work on this one. You can improve further by optimizing you js code - define variable only once on the top, use one function with if statement inside to not dublicate your code. Also you can wrap the whole code inside self executing functionπŸ˜‰

And work on feedback about styles.

Cheers, Roman

1

P
Daveβ€’ 5,245

@dwhenson

Posted

@rfilenko Thanks - all clear on the JS issues. Can you clarify what you mean by 'And work on feedback about styles'? I'm not quite getting you. Thanks!

0
Roman Filenkoβ€’ 3,335

@rfilenko

Posted

@dwhenson Hi, what I meant - work on small details of your submission, to make it as close as possible to the design file. Read through previous comments also πŸ˜‰

Have a good one, Roman

0
P
Daveβ€’ 5,245

@dwhenson

Posted

@rfilenko Thanks Roman. Appreciate the clarification. I'm not sure I can use an if statement in this case as two different events are being emitted? I'll look into this a bit more though. Thanks for the advice!

0
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, nice job, Dave! πŸ‘

Your solution looks good and is responsive! Your form validation works well, too! πŸ™Œ

I think you should also add some padding to the top and bottom of the page in the desktop layout of the site. It looks like you've vertically centered the content of your page (which is great), but on smaller desktop screens, there isn't any space between the sign-up form and the edges of the screen.

Keep coding (and happy coding, too)! 😁

1

P
Daveβ€’ 5,245

@dwhenson

Posted

@ApplePieGiraffe Thanks! Padding added - feedback much appreciated.

0
P
Graceβ€’ 27,790

@grace-snow

Posted

Looks really nice on mobile

Only things to change i think are add some padding around your content - it's hitting the very top and bottom of my viewport on mobile.

And if you reduce line height on your heading I think you'll like the look a lot more.

Good job, and I like the validation, even if it is a plugin, that's fine if it all works how you want it to

1

P
Daveβ€’ 5,245

@dwhenson

Posted

@grace-snow Thanks I did both and it has improved things!

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