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

Interactive Card Details using Svelte, TypeScript, and Tailwind

Fred Campo 330

@fredcamp

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

Solution retrospective


How important and powerful RegEx can do when it comes to client side validations. And how amazing ES7 String Padding when displaying output and placeholders.

Community feedback

@AlbertooMunozz

Posted

Hi, Fred Campo 😄

Congratulations on your contribution to this platform and for being able to share your solution to this challenge. Your solution was incredible, and the implementation of your animations and responsiveness are excellent.

Here are a few things I noticed:

  • input number : You should use padEnd(16, value) instead of padStart()`. This way, the generated numbers will appear at the end and not at the beginning, so the animation of your card on the screen will be from left to right. Control the input to only 16 characters to prevent the card from breaking

  • input expiration mm: Control that the input consists of numbers between 1 and 12 to ensure it is a valid date.

Marked as helpful

1

Fred Campo 330

@fredcamp

Posted

Hello @AlbertooMunozz,

Good day!

With regards to the ES7 String padding. I actually intended to use the padStart instead of padEnd 😆 but I appreciate your thoughts about it.. about the Expiration MM, yeah that's actually a really great suggestion.. I didn't think about that when I created the project. Thank you very much for the feedback. 🥰

1

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