Skip to content
Submitted about 5 years ago

Intro component with Vanilla CSS and Javascript

Dheyson Alves•220
@dheysonalves
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there!

This is my new submission. I got some struggle with the icon in the input field. I could set it properly. And in the border color validation, I don't know why it could apply the styles to the classList from the input. But could totally with the span. If anyone could give me a light on that. I would really appreciated!

Thank you! : B

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Nice work on this challenge, Dheyson!

    For the icon, I'd use a pseudo-element (like ::before) on the .group class, set a background-image on it and use position: absolute; to get it into the right place.

    A simple way to trigger this with your code would be to add a class like has-error to the correct .group element which then shows the error icon and adds a border to the input that's nested inside. You could then remove it when the value is valid and the icon and input border would go away.

    Let me know if you have any questions!

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