π³ Interactive Credit Card Form
This project is an interactive credit card form with live validation and dynamic display of card details. It's built using HTML, SCSS, and JavaScript.
This is πͺFront-End Challenge by https://www.frontendmentor.io/ & hand coded by π§ Aakash Peshavaria (Me)
β¨ Features
Live Preview: See the credit card details update in real-time as you type. π₯οΈ
Form Validation:
Validates cardholder name, card number, expiration date, and CVC with immediate feedback. β
Form will not submit if any field is empty or any field is not in the correct format. π«
Provides specific error messages for each field to guide users in correcting mistakes. π
Dynamic Display: Displays entered card details on a virtual credit card. π³
Lottie Animation: Plays an engaging animation upon successful form submission. π
πΊ Design Resolutions
This form is designed to be best viewed in 720p (HD) and 1080p (Full HD) resolutions. πΊ
The design is not mobile-friendly, as the primary goal was to create a highly interactive validation demo with real-time updates rather than focusing on mobile responsiveness. π
π οΈ Technologies Used
HTML
SCSS
JavaScript
Google Fonts
Font Awesome
Lottie Animation
Here is the live link to this project:
Like this project
0
Posted Sep 30, 2024
This project is an interactive credit card form with live validation and dynamic display of card details. It's built using HTML, SCSS, and JavaScript.
Likes
0
Views
0
Educational Wesbsite Landing Page π»
πΈ EMI Calculator