Skip to content
Submitted almost 2 years ago

Interactive card details form solution

yishak abrham•2,150
@yishak621
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

the process to the card design seems seasy at first but challenging in the process. questions

1-- the layout design in the atm card pictures adding overlay div block element was pretty challenging specially the responsiveness part...so what type of method is optimal to use for these type of things?

2-- the input type='number' can not be limited the number of characters by maxlength and max attribute since it is not work for number type so i ended up using JS function for maxlength....so is there any other way?

3- i use border-image property for a border with a linear gradient*when the input focused ...but i can't apply the border-radius since it can't go along with border image so how to fix these? beside these the input validation process was fun and at the same time pretty challenging i created several functions to check for each of them according to there input types and design. i use moment js library to validate date and month also add my function .

Community feedback

  • Catalin Banici•260
    @CatalinBaniciPosted almost 2 years ago

    Use this for the input border on focus:

    input:focus {
  outline: none;
  padding: 15px;
  border: double 1px transparent;
  border-radius: 7px;
  background-image: linear-gradient(white, white),
    linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

    Not sure what it does or if everything is used in there.. but it works... for me at least. Try it

    Marked as helpful
    0
    yishak abrham•2,150
    @yishak621Posted almost 2 years ago

    @CatalinBanici i will try these ..i tried the border radius but the background image didn't go along with the border radius ...

    0

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