Add Images and gif display

README.md

@@ -1,8 +1,11 @@
 # react-interactive-paycard
 
-Inspired from a vue project [vue-interactive-paycard](https://github.com/muhammederdem/vue-interactive-paycard), i decided to recreate the same on React as a part time fun project.
+Inspired from a vue project [vue-interactive-paycard](https://github.com/muhammederdem/vue-interactive-paycard), I decided to recreate the same on React as a part time fun project.
+I did some minor changes on the animations and optimizations on the code.
 
-A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive
+A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive
+
+![](demo.gif)
 
 ## Libraries used
 

src/screens/MainScreen/components/card/Card.js

@@ -9,14 +9,15 @@ import './styles.scss';
 class Card extends Component {
     constructor() {
         super();
+
+        const backgroundImgname = this.cardBackgroundName();
         this.state = {
             style: {},
-            counter: 0
+            counter: 0,
+            backgroundImgname: backgroundImgname
         };
     }
 
-    // const [style, setStyle] = useState({});
-    // const [counter, setCounter] = useState(0);
     cardType = () => {
         const number = this.props.cardNumber;
 
@@ -41,6 +42,11 @@ class Card extends Component {
         return 'visa'; // default type
     };
 
+    cardBackgroundName = () => {
+        let random = Math.floor(Math.random() * 25 + 1);
+        return `${random}.jpeg`;
+    };
+
     removeEmptySpaces = cardNumber => {
         return cardNumber.replace(/\s+/g, '');
     };
@@ -89,15 +95,6 @@ class Card extends Component {
         return cardNumberArr;
     }
 
-    // useEffect(() => {
-    //     const style = outlineElementStyle(currentFocusedElm);
-    //     setStyle(style);
-    // }, [currentFocusedElm]);
-
-    // useEffect(() => {
-    //     setCounter(counter + 1);
-    // }, [cardMonth]);
-
     render() {
         let {
             cardHolder,
@@ -116,9 +113,6 @@ class Card extends Component {
         const cardHolderArr = cardHolder.split('');
         const cardNumberArr = this.maskCardNumber(cardNumber);
         cardCvv = cardCvv.split('');
-        // const cardNumberTrimmed = removeEmptySpaces(cardNumber.trim(' '));
-
-        // const { style } = this.state;
 
         return (
             <div className={'card-item ' + (isCardFlipped ? '-active' : '')}>
@@ -133,7 +127,7 @@ class Card extends Component {
                         <img
                             src={
                                 process.env.PUBLIC_URL +
-                                '/card-background/5.jpeg'
+                                `/card-background/${this.state.backgroundImgname}`
                             }
                             className="card-item__bg"
                         />

src/screens/MainScreen/components/form/CForm.js

@@ -6,6 +6,7 @@ class CForm extends Component {
 
         const currentYear = new Date().getFullYear();
         this.state = {
+            cardNumber: '',
             cardMonth: '',
             cardYear: '',
             monthsArr: Array.from(new Array(12), (x, i) => {
@@ -26,14 +27,54 @@ class CForm extends Component {
     handleFormChange = event => {
         const { name, value } = event.target;
 
-        if (name === 'cardNumber') {
-        }
-
         this.setState({ [name]: value });
-
         this.updateMainState(name, value);
     };
 
+    replaceMissingChars = cardNumber => {
+        let cardNumberTmp = '#### #### #### ####';
+        cardNumberTmp = cardNumberTmp.split('');
+        let cardNumberArr = cardNumber.split('');
+
+        let maskedCardNumber = [];
+        cardNumberTmp.forEach((val, index) => {
+            cardNumberArr[index]
+                ? maskedCardNumber.push(cardNumberArr[index])
+                : maskedCardNumber.push(val);
+        });
+
+        return maskedCardNumber.join('');
+    };
+
+    onCardNumberChange = event => {
+        let { value, name } = event.target;
+        let cardNumber = value;
+        let cardNumberMaxLength = 19;
+        value = value.replace(/\D/g, '');
+        if (/^3[47]\d{0,13}$/.test(value)) {
+            cardNumber = value
+                .replace(/(\d{4})/, '$1 ')
+                .replace(/(\d{4}) (\d{6})/, '$1 $2 ');
+            cardNumberMaxLength = 17;
+        } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
+            // diner's club, 14 digits
+            cardNumber = value
+                .replace(/(\d{4})/, '$1 ')
+                .replace(/(\d{4}) (\d{6})/, '$1 $2 ');
+            cardNumberMaxLength = 16;
+        } else if (/^\d{0,16}$/.test(value)) {
+            // regular cc number, 16 digits
+            cardNumber = value
+                .replace(/(\d{4})/, '$1 ')
+                .replace(/(\d{4}) (\d{4})/, '$1 $2 ')
+                .replace(/(\d{4}) (\d{4}) (\d{4})/, '$1 $2 $3 ');
+            cardNumberMaxLength = 19;
+        }
+
+        this.setState({ [name]: cardNumber.trimRight() });
+        this.updateMainState(name, cardNumber);
+    };
+
     onCvvFocus = event => {
         this.updateMainState('isCardFlipped', true);
     };
@@ -68,11 +109,12 @@ class CForm extends Component {
                             name="cardNumber"
                             className="card-input__input"
                             autoComplete="off"
-                            onChange={this.handleFormChange}
+                            onChange={this.onCardNumberChange}
                             maxLength="19"
                             ref={cardNumberRef}
                             onFocus={e => onCardInputFocus(e, 'cardNumber')}
                             onBlur={onCardInputBlur}
+                            value={this.state.cardNumber}
                         />
                     </div>