/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

Primary LanguageCSSOtherNOASSERTION

📗 Table of Contents

Click to view contents
  1. 📖 About the Project
  2. 💻 Getting Started
  3. 👥 Authors
  4. 🔭 Future Features
  5. 🤝 Contributing
  6. ⭐️ Show your support
  7. 🙏 Acknowledgements
  8. ❓ FAQ
  9. 📝 License

📖 Interactive card details form

Card Form is a component created with React to capture the user's credit card information.

🛠 Built With

Tech Stack

  • React
Client

Key Features

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.

(back to top)

🚀 Live Demo

Click Here for live Version!

(back to top)

💻 Getting Started

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 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)

  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.

  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

(back to top)

👥 Authors

👤 Name Github Twitter LinkedIn
Waleed Amjad @developerwaleed @developerwaleed @developerwaleed

(back to top)

🔭 Future Features

  • Currently none.

(back to top)

🤝 Contributing

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.

(back to top)

⭐️ Show your support

If you like this project. Don't forget to give it a ⭐️

(back to top)

🙏 Acknowledgments

(back to top)

❓ FAQ

  • 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.

(back to top)

📝 License

This project is MIT licensed.

(back to top)