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

Base Apparel coming soon page | Flexbox + Grid

Eduardo 910

@KTrick01

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! In this one at the start of my project I made the "warning" icon as a ::before pseudo-element, but I couldn't figure out a way to modify it through JS so I had to re-make it, my question is if there is a way of modifying a pseudo-class element from within JS?

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Eduardo, about your question, I suggest you check out this article on using JS to style pseudo elements. I saw that you ended up using an element with position:absolute and I think that works fine as well!

By the way, I like the use of a green checkmark icon to show the email is valid. I do notice that the active state of the input outline is in the same color as the invalid state; maybe you can consider having a different color instead so that it won't seem like there's something invalid when the user is typing.

Marked as helpful

0

Eduardo 910

@KTrick01

Posted

@elaineleung Thanks for answering! So there's no really a simple way of doing it then, about the outline color you're right, I'll change it, thank you!

1
Elaine 11,400

@elaineleung

Posted

@KTrick01 I guess it depends on what you want to do with the icon; are you trying to change its color or just animate it, or are you hoping to add a class for error and get it animated? If so, can you add the class to the parent and then write a CSS rule for that?

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