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 using HTML CSS and JS

@tejas11054

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

P

@SabaMarghania1

Posted

In design, you already know what you need to do, but make sure to include an easy feature for user experience. When a person types, automatically insert a space after every four digits. you can find it in my code, or on a stackoverflow

const input = document.getElementById("credit-card-input"); input.addEventListener("input", () => input.value = formatNumber(input.value.replaceAll(" ", "")));

use this, but make sure that you understand what you are doing here! const formatNumber = (number) => number.split("").reduce((seed, next, index) => { if (index !== 0 && !(index % 4)) seed += " "; return seed + next; }, "");

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