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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: source code
- Live Site URL: website
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- SvelteKit - JS library
- CUBE - CSS Methodology
- tailwindcss - CSS Framework
- cleavejs - JS library
- To disable browser automatic form validation, use the
novalidate
form attribute.
<form novalidate>...</form>
- How to create an object with dynamic keys in JavaScript
- This is made possible by enclosing the expression inside square brackets.
const key = 'title';
const value = 'JavaScript';
const course = {
[key]: value,
price: '$99'
};
-
In the above code [key] will evaluate the expression to
title
-
The attribute is a boolean attribute it presence turns off automatic form validation. In it's absence the browser will continue with automatic form validation
-
Client-side form validation using only JavaScript - MDN
-
Setting linear gradient on border - This helped me to set up a linear-gradient on a border.
-
Client-side form validation - This is an amazing article which helped understand the different types of client-side form validation. I'd recommend it to anyone still learning this concept.
-
How to create an object with dynamic keys in JavaScript - This allows one to have expressions as the keys of JavaScript object
- Website - Silvanos Eric
- Frontend Mentor - @codexshell