Credit Card Form

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

ID ATTRIBUTE 🛑:

• The id attribute uniquely identifies elements on a page. It does not make sense to duplicate an id.

• Duplicate id's can break the accessibility of labels for forms, table header cells, etc.,

• To fix the problem, change an id value if it is used more than once to be sure each is unique. Unique id's differentiate each element from another and prevent invalid markup

• Ensures that each element on the page with an id attribute has a unique id attribute value.

. HEADINGS ⚠️:

• And, this solution has also generated accessibility error report due to lack of level-one heading <h1>

• Every site must want at least one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

You're off to a good start! Nice attempt on the this challenge. I did mine just a couple of days ago and I find it quite a challenge as well.

I reviewed the design images and it doesn't appear to require those. They appear to be just plain colored borders. However if you are curious border gradient requires several properties added in CSS to make that work, not just one.

input {
   border: 1px solid rgba(...);
   border-radius: var(--br);     // this stopped working when border-image was used on hover
}

input:focus-visible {
   border-image-source: linear-gradient(20deg,hsl(249,99%,64%),hsl(278,94%,30%));
    border-image-slice: 1;    // need to have some value
    border-image-repeat: round;
}

I noticed that border-radius stopped working when you used border-image, so I appears they are not compatible. Also, at 1px border the gradient on focus isn't too noticeable unless you increase the px size to maybe 15px so you can actually see the gradient colors. So I am convinced this is just a solid border in one color. On checking via inspect element, the border gradient has been rendered all right - it's just not obvious because it's just 1px - so need to stress yourself out here!

I noticed that the card doesn't update in real-time - it is only updated after submission, but as per listed in the requirements:

• Fill in the form and see the card details update in real-time

Which meant that the card details update as you type. Probably best add event listener "input" for every input and write a function to update the card details from there.

Other notable things to improve -

• It is cleaner to use the bg-front-card.png as a CSS background for the card, so you use lesser HTML code. Same is true with the backside of the card.

style.css

.card-front {
   background: url('/images/bg-front-card/png') no-repeat;
}

index.html

<div class="card card-front">
   // remove <img >
   <span>...</span>
</div>
...