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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- JavaScript
- JQuery
- JQuery Inputmask
- Mobile-first workflow
I learnt about the JQuery JavaScript Library. It made writing javascript code very simple and easy.
I learnt about Javascript Input validation,Events and Event Handlers.
I used the JQuery Inputmask to create the input mask for the input fields. Paticularily for the card number input field.this code created the inputmask and then applied to the card number input field.
const cnum_im = new Inputmask({
mask:"**** **** **** ****",
placeholder:" ",
});
cnum_im.mask(cnum);
- Input validation - This helped me know about different methods to vaidate the input fields for corrent format.
- JQuery Inputmask Docs - Inputmask is an amazing JavaScript library that helped me create input mask for any input fields.
- Frontend Mentor - @anugcodes
- Github - @anugcodes
- Twitter - @anuragbswl