Skip to content
Submitted over 4 years ago

Intro component with Vanilla CSS and Javascript

Dheyson Alves•220
@dheysonalves
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    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!

    2

Please log in to post a comment

Log in with GitHub

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