This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Fill in the form and see the card details update in real-time
- Receive error messages when the form is submitted if:
- Any input field is empty
- The card number, expiry date, or CVC fields are in the wrong format
- View the optimal layout depending on their device's screen size
- See hover, active, and focus states for interactive elements on the page
- Solution URL: mySolution
- Live Site URL: liveSite
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- SCSS - For styles
.card-wrapper {
background-image: url(../../images/bg-main-mobile.png);
height: 64vw;
background-repeat: no-repeat;
background-position-y: 0vw;
background-size: cover;
margin-bottom: 5rem;
img.img-tarjeta {
width: 100%;
}
.card {
position: relative;
}
& .back-card {
width: 76%;
right: -21%;
top: 8vw;
Position Absolute it nos always the best way to position "floating" elements.
const NormaliceNumber = (value, length) => {
const newValue = value?.replace(/[^\dA-Z]/g, '').substr(0, length).trim().padStart(length, '0') || '';
return newValue;
};
.padStart() new adition yo my knowledge
I need to go deep in form validations and how to control input values.
- normalizeCardNumber - This helped me for normalizing tha card number with the pattern #### #### #### ####
- Website - Cintia Jimena Martinez
- Frontend Mentor - @KatuGT
- Linkedin - Cintia Jimena Martinez