Interactive-card-details-form

Interactive Card Details Form

This project was bootstrapped with Create React App.

DESCRIPTION This project is a simple form for credit cards information that show to the user where every info of their card is.

To make this possible, one of the solutions is make this form interactive. When the user type something, this info will appear automatically on the Screen.

How to deploy this project:

First, copy this project to your computer. Then, open this project in your VSCode and start a new terminal. In this terminal, type npm install to install all the dependencies from node_modules.

When your computer finishes to download all the node dependencies, type:

npm start

What technologies did I use to build this project

• Semantic HTML5 markup

• CSS custom properties

• Flexbox

• React - Js Library

• useState - React

• Javascript

WHat I learned

• build a interactive form section;

• improve skills of centering elements;

• make a simple way to change value of html elements using useState from React

What is missing

• implement screen responsiveness, mainly for mobile screens;

• implement warning and success messages and alert colors;

• add action to the button after being clicked;

• improve date type in ‘EXP. DATE (MM/YY)’;

• build a code to prevent wrong inputs in the card number and cvc sections;

Final Remarks

This project was a solution to for a challenge on Frontend Mentor