Submitted about 2 years ago

Intro Component with Signup Form using Tailwind-css

Shiva•670

@shivaprakash-sudo

Preview site View code

This is a solution for...Intro component with sign-up form

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

At first, I had problems displaying the respective error messages for the inputs without having to manually hiding and displaying them. After playing a little bit, I figured an easier solution by looping through the inputs and accessing the children of the respective parent container.

Also, I'm struggling to update the input border colour to red, without having to drastically changing the current code. So if you guys have any input (😉) on making the code/design better and also making the input border red, please feel free to comment.

Community feedback

Kairat Kempirbaev•260
@kairat-kempirbaevPosted about 2 years ago
Hi Shiva,

Input field has many variations. Type can be email/password/text

There is a special pseudo class :invalid for this exact reason. If the typed text is not an Email this pseudo-class activates and you can put { border:red } for this pseudo-class

Hope it helps to solve a problem with the least amount of change to your existing code base.
Marked as helpful
0
Shiva•670
@shivaprakash-sudoPosted about 2 years ago
@kairat-kempirbaev

Hello,

Thank you for replying and providing useful suggestions, but unfortunately the :invalid pseudo class didn't work properly the way I wanted. I've added a little bit of JS code to update the border accordingly.
0

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