<p><em>yes good </em> <strong>yes good </strong>  <a target="_blank" href="www.google.com">good test</a> </p>
<p>`&lt;!DOCTYPE html&gt;</p>



    
    
    
    Mini App
    



    <div data-cart-info>
        <h1>shopping_cart</h1>
            <span class="material-icons"></span><span></span>

    </div>
    <div class="mdc-card mdc-card--outlined" data-credit-card>
        <div class="mdc-card__primary-action">
            <img src="https://placehold.it/120x60.png?text=Card" />
            <div data-cc-digits>
                
                
                
                
            </div>
            <div data-cc-info>
                
                
            </div>
        </div>
        Pay &amp; Checkout Now
    </div>

    


<p></p>``
``` <p></p>


*yes good * **yes good **  [good test](www.google.com) 

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mini App</title>
    <style>
        body {
            margin: 0;
            padding: 1em;
            background-color: #fff;
        }

        [data-cart-info],
        [data-credit-card] {
            transform: scale(0.78);
            margin-left: -3.4em;
        }

        [data-cc-info] input:focus,
        [data-cc-digits] input:focus {
            outline: none;
        }

        .mdc-card__primary-action,
        .mdc-card__primary-action:hover {
            cursor: auto;
            padding: 20px;
            min-height: inherit;
        }

        [data-credit-card] [data-card-type] {
            transition: width 1.5s;
            margin-left: calc(100% - 130px);
        }

        [data-credit-card].is-visa {
            background: linear-gradient(135deg, #622774 0%, #c53364 100%);
        }

        [data-credit-card].is-mastercard {
            background: linear-gradient(135deg, #65799b 0%, #5e2563 100%);
        }

        .is-visa [data-card-type],
        .is-mastercard [data-card-type] {
            width: auto;
        }

        input.is-invalid,
        .is-invalid input {
            text-decoration: line-through;
        }

        ::placeholder {
            color: #fff;
        }

        div[data-cart-info] span {
            display: inline-block;
            vertical-align: middle;
        }

        div[data-cart-info] span.material-icons {
            font-size: 150px;
        }

        div[data-credit-card] {
            width: 435px;
            min-height: 240px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            background-color: #5d6874;
        }

        img[data-card-type] {
            display: block;
            width: 120px;
            height: 60px;
        }

        div[data-cc-digits] {
            margin-top: 2em;
        }

        div[data-cc-digits]>input {
            color: #fff;
            font-size: 2em;
            line-height: 2em;
            border: none;
            background: none;
            margin-right: .5em;
        }

        div[data-cc-info] {
            margin-top: 1em;
        }

        div[data-cc-info]>input {
            color: #fff;
            font-size: 1.2em;
            border: none;
            background: none;
        }

        div[data-cc-info]>input:nth-child(2) {
            padding-right: 10px;
            float: right;
        }

        button[data-pay-btn] {
            position: fixed;
            width: 90%;
            border: 1px solid;
            bottom: 20px;
        }
    </style>
</head>

<body>
    <div data-cart-info>
        <h1 class="mdc-typography--headline4">shopping_cart</h1>
            <span class="material-icons"></span><span data-bill></span>
        
    </div>
    <div class="mdc-card mdc-card--outlined" data-credit-card>
        <div class="mdc-card__primary-action">
            <img src="https://placehold.it/120x60.png?text=Card" data-card-type />
            <div data-cc-digits>
                <input type="text" size="4" placeholder="----" />
                <input type="text" size="4" placeholder="----" />
                <input type="text" size="4" placeholder="----" />
                <input type="text" size="4" placeholder="----" />
            </div>
            <div data-cc-info>
                <input type="text" name="card_holder_name" size="20" placeholder="Name Surname" />
                <input type="text" name="expiry_date" size="6" placeholder="MM/YY" />
            </div>
        </div>
        <button class="mdc-button" data-pay-btn>Pay & Checkout Now</button>
    </div>
   
    <script>
        const supportedCards = {
            visa, mastercard
        };

        const countries = [
            {
                code: "US",
                currency: "USD",
                country: 'United States'
            },
            {
                code: "NG",
                currency: "NGN",
                country: 'Nigeria'
            },
            {
                code: 'KE',
                currency: 'KES',
                country: 'Kenya'
            },
            {
                code: 'UG',
                currency: 'UGX',
                country: 'Uganda'
            },
            {
                code: 'RW',
                currency: 'RWF',
                country: 'Rwanda'
            },
            {
                code: 'TZ',
                currency: 'TZS',
                country: 'Tanzania'
            },
            {
                code: 'ZA',
                currency: 'ZAR',
                country: 'South Africa'
            },
            {
                code: 'CM',
                currency: 'XAF',
                country: 'Cameroon'
            },
            {
                code: 'GH',
                currency: 'GHS',
                country: 'Ghana'
            }
        ];

        const appState = {};

        const formatAsMoney = (amount, buyerCountry) => {
            const country =
                countries.find(country => country.country === buyerCountry) || countries[0];
            return amount.toLocaleString(`en-${country.code}`, {
                style: "currency",
                currency: country.currency
            });
        };

        const flagIfInvalid = (field, isValid) => {
            if (isValid) {
                field.classList.remove('is-invalid');
            } else {
                field.classList.add('is-invalid');
            }
        };

        const expiryDateFormatIsValid = (target) => {
            return /^([0-9]{2})\/([0-9]{2}$)/.test(target.value);
        };

        const detectCardType = ({ target }) => {
            const cardType = document.querySelector('div[data-credit-card]');
            const image = document.querySelector('img[data-card-type]');
            const targetValue = target.value;

            if (targetValue.startsWith(4)) {
                cardType.classList.remove('is-mastercard');
                cardType.classList.add('is-visa');
                image.src = supportedCards.visa;

                return 'is-visa';
            } else if (targetValue.startsWith(5)) {
                cardType.classList.remove('is-visa');
                cardType.classList.add('is-mastercard');
                image.src = supportedCards.mastercard;

                return 'is-mastercard';
            } else {
                cardType.classList.remove('is-visa');
                cardType.classList.remove('is-mastercard');
                image.src = 'https://placehold.it/120x60.png?text=Card';
            }
        };

        const validateCardExpiryDate = ({ target }) => {
            const targetValue = target.value;
            const targetValueDate = new Date();

            targetValueDate.setFullYear('20' + targetValue.substr(3, 2), targetValue.substr(0, 2));

            const isValid = expiryDateFormatIsValid(target) && (targetValueDate > new Date());

            flagIfInvalid(target, isValid);

            return isValid;
        };

        const validateCardHolderName = ({ target }) => {
            const isValid = /^([a-zA-Z]{3,}) ([a-zA-Z]{3,})$/.test(target.value);

            flagIfInvalid(target, isValid);

            return isValid;
        };

        const validateWithLuhn = (digits) => {
            if (digits.length === 16) {
                let digits_sum = 0;

                for (let i = digits.length - 1, doubled_digit; i >= 0; --i) {
                    if (isNaN(digits[i])) {
                        return false;
                    }

                    doubled_digit = i % 2 ? digits[i] : digits[i] * 2;

                    digits_sum += doubled_digit > 9 ? doubled_digit - 9 : doubled_digit;
                }

                return !(digits_sum % 10);
            } else {
                return false;
            }
        };

        const validateCardNumber = () => {
            const selectAll = (s) => {
                return document.querySelectorAll(s);
            };
            const fields = [...selectAll('div[data-cc-digits]>input')];
            const cardNumber = fields.reduce((acc, field) => {
                return acc + field.value;
            }, '').split('').map((digit) => {
                return +digit;
            });

            const isValid = validateWithLuhn(cardNumber);

            const div = document.querySelector('div[data-cc-digits]');

            if (isValid) {
                div.classList.remove('is-invalid');

            } else {
                div.classList.add('is-invalid');
            }

            return isValid;
        };

        const uiCanInteract = () => {
            document.querySelector('div[data-cc-digits]>input:first-child').addEventListener('blur', detectCardType);

            document.querySelector('div[data-cc-info]>input:first-child').addEventListener('blur', validateCardHolderName);

            document.querySelector('div[data-cc-info]>input:nth-child(2)').addEventListener('blur', validateCardExpiryDate);

            document.querySelector('button[data-pay-btn]').addEventListener('click', validateCardNumber);

            document.querySelector('div[data-cc-digits]>input:first-child').focus();
        };

        const displayCartTotal = ({ results: results }) => {
            const [data] = results;

            const { itemsInCart, buyerCountry } = data;

            appState.items = itemsInCart;
            appState.country = buyerCountry;
            appState.bill = itemsInCart.reduce((total, { price, qty }) => {
                return total + (price * qty);
            }, 0);
            appState.billFormatted = formatAsMoney(appState.bill, appState.country);

            document.querySelector('span[data-bill]').textContent = appState.billFormatted;

            uiCanInteract();
        };

        const fetchBill = () => {
            const api = "https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c";

            fetch(api)
                .then(response => response.json())
                .then(displayCartTotal)
                .catch(error => console.warn(error));
        };

        const startApp = () => {
            fetchBill();
        };

        startApp();
    </script>
</body>

</html>``
``` 


new html

shopping_cart

Did you find this article valuable?