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

Svelte, RegExp

Danny Fong 410

@dannyfongdev

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@MasonBoom

Posted

Hi danny!

for input::focus, you may still have to redefine the border radius like you did for input. Sure it may be repetitive, but that's the only way I know how to prevent square corners

For the form validation part, all I did was create an if statement that checks if all of the field's requirements are met and throw an alert if not

Hope this helps!

0

Danny Fong 410

@dannyfongdev

Posted

@MasonBoom the style-guide.md called for:

  • Linear gradient (active input border): hsl(249, 99%, 64%) to hsl(278, 94%, 30%)
  • Red (input errors): hsl(0, 100%, 66%)

The Red (input errors) was easy. The solution that I am looking for is how to handle the "linear gradient (active input border)". I tried using an image border, which can do the gradient, but was not able to make the image border with rounded corners. The commented out attempt is in the source code.

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