https://github.com/developerwaleed/interactive-card-details-form
Card Form is a component created with React to capture the user's credit card information and display it on realtime
https://github.com/developerwaleed/interactive-card-details-form
css javascript react
Last synced: about 1 year ago
JSON representation
Card Form is a component created with React to capture the user's credit card information and display it on realtime
- Host: GitHub
- URL: https://github.com/developerwaleed/interactive-card-details-form
- Owner: developerwaleed
- License: other
- Created: 2022-12-09T19:33:06.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2022-12-29T18:07:05.000Z (over 3 years ago)
- Last Synced: 2024-10-02T12:41:16.054Z (over 1 year ago)
- Topics: css, javascript, react
- Language: CSS
- Homepage: https://interactive-card-details-form-tawny.vercel.app/
- Size: 602 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
Click to view contents
-
📖 About the Project
-
💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- ❓ FAQ
- 📝 License
# 📖 Interactive card details form
**Card Form** is a component created with React to capture the user's credit card information.
- React
Client
This projects aim is to capture the users credit/debit card information.
- Any website can use the component easily without any hassle.
- If the field is left blank, an error will be displayed.
- The credit card number field will accept only numerical entries and must be 16 digits long.
- The information is updated and displayed in real time as it is entered.
## 🚀 Live Demo
[Click Here for live Version!](https://interactive-card-details-form-tawny.vercel.app/)
To get a local copy up and running, follow these steps.
### Prerequisites
- Node Package Manager (npm)
### Setup
#### Github
- Enter this url: [https://github.com/developerwaleed/Interactive-Card-Details-Form](https://github.com/developerwaleed/Interactive-Card-Details-Form) in your web browser.
- Once opened navigate to the top left level of the project a green code download button will be visible on the righthand side.
- Select the download Zip option from drop-down menu.
- Once the download is complete you will be able to access my project locally.
#### Local (Terminal)
```sh
git clone https://github.com/developerwaleed/Interactive-Card-Details-Form.git
cd Interactive-Card-Details-Form
```
### Install
Install dependencies and gems in this project with:
Make sure you have something to run the application on live server.
```sh
cd Interactive-Card-Details-Form
npm install
```
### Usage
To run the project, execute the following command:
- Run `npm run start` or `npm start` to start a development server.
### Run tests
To run tests, run the following command:
```
npm run test
```
### Deployment
You can deploy this project using:
- Github Pages
- Netlify
## 👥 Authors
| 👤 Name | Github | Twitter | LinkedIn |
|------|--------|---------|----------|
|Waleed Amjad|[@developerwaleed](https://github.com/developerwaleed)|[@developerwaleed](https://twitter.com/developerwaleed)|[@developerwaleed](https://www.linkedin.com/in/developerwaleed/)|
- Currently none.
Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue, feel free to check the [issues page](../../issues/).
If you like this project. Don't forget to give it a ⭐️
- A big thanks to [@frontendmentor](https://www.frontendmentor.io) for the [challenge](https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw).
- **What inspired me to create this project?**
The inspiration for this project came from Frontend Mentor – a platform that aims to Improve your front-end skills by building real projects.
This project is [MIT](./LICENSE) licensed.