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
- React.js - UI JS library
- Next.js - React framework
- Typescript
- Stitches - CSS in JS Styles
- Radix UI - Primitive UI components
- React Hook Form - Form management
- Zod - Form validations
Learned how to format and valdiate some card fields, like card number, expiration month and year, and CVC.
const formatCardNumber = (value: string) => {
return (
value
.replace(/\s/g, '')
// regular expression to match groups of four digits in the input string,
// and replaces each group with itself ($1) followed by a space
.replace(/(\d{4})/g, '$1 ')
// regular expression to match any characters that are not digits or whitespace
// and removes them from the input string
.replace(/[^\d\s]/g, '')
.trim()
// substring to ensure that the input string is no longer than 19 characters
.substring(0, 19)
)
}
Learned more about styling with stitches, using absolute positions, media queries and setting background images with static image data.
export const CardFrontWrapper = styled(CardBaseWrapper, {
top: '50%',
left: '30%',
transform: 'translate(-70%, -100%)',
zIndex: 1,
backgroundImage: `url(${CardFront.src})`,
'@media(max-width: 1200px)': {
transform: 'translate(-65%, -80%) scale(0.6)',
},
'@media(max-width: 768px)': {
left: '50%',
top: 0,
transform: 'translate(-56%, 27%) scale(0.6)',
},
'@media(max-width: 360px)': {
transform: 'translate(-54%, 22%) scale(0.6)',
},
})
The hardest part of the challenge envolved styling, as I had to resort to absolute positioning and some transform properties, so the implementation of the responsive design could be improved in my opinion.
- Website - My Portfolio
- Frontend Mentor - @capelaum
Thank to Agência metodo for the challenge 👌.