Submitted over 1 year ago

Intro Component with Sign-up Form using Vanilla HTML, CSS & JS

LVL 1

Kamal Redzwan•210

@kmlrdzwn

A solution to the Intro component with sign-up form challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Adding svg icon inside input by adding wrapper with position: relative and the icon with position: absolute
Use regex email pattern
Learn to select element inside wrapper with closest method.
Show error state and remove error state logic
Validate individual input with email pattern or if the input is empty input.value.trim() === '' - this is the hardest logic pattern for me :(
Learn check Regex pattern with test() method.
Add error with blur event listener (this fires when the input has lost focus)
Remove error with focus event listener (this fires when the input is in focus)
Add form submission logic by using the validateInput() function

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

Strengthen up my js logic pattern with a lot of googling and try-error.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Kamal Redzwan’s solution.

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