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 using Tailwind-css

#tailwind-css
Shiva 670

@shivaprakash-sudo

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


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

Posted

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-sudo

Posted

@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

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