https://github.com/danielamichelle/interactive-card-details-form-main
Interactive card details form main from Frontend Mentor
https://github.com/danielamichelle/interactive-card-details-form-main
Last synced: about 1 year ago
JSON representation
Interactive card details form main from Frontend Mentor
- Host: GitHub
- URL: https://github.com/danielamichelle/interactive-card-details-form-main
- Owner: DanielaMichelle
- Created: 2024-02-10T23:54:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-11T00:00:24.000Z (over 2 years ago)
- Last Synced: 2025-03-11T23:51:42.338Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://danielamichelle.github.io/Interactive-card-details-form-main/
- Size: 2.59 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Interactive card details form solution
This is a solution to the [Interactive card details form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
### The challenge
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
### Screenshotls
### Links
- Solution URL: https://github.com/DanielaMichelle/Interactive-card-details-form-main
- Live Site URL: https://danielamichelle.github.io/Interactive-card-details-form-main/
### Built with
- Semantic HTML5 markup
- CSS custom properties
- JavaScript