Skip to content

Instantly share code, notes, and snippets.

@boblitex

boblitex/gist:de2459d9b860299d863802a410bcae4e

Last active July 17, 2019 01:48
Show Gist options
  • Save boblitex/de2459d9b860299d863802a410bcae4e to your computer and use it in GitHub Desktop.
Save boblitex/de2459d9b860299d863802a410bcae4e to your computer and use it in GitHub Desktop.
Download ZIP
full ALC code
Raw
gistfile1.html
<!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: #ffffff;
}
[data-cart-info] span {
display:inline-block;
vertical-align: middle;
}
span.material-icons{
font-size: 150px;
}
[data-card-type]{
display:block;
width:120px;
height:60px;
}
[data-cc-digits] {
margin-top: 2em;
}
[data-cc-info]{
margin-top: 1em;
}
[data-cc-info] input {
color: white;
font-size: 1.2em;
border:0px;
background: none;
}
[data-pay-btn]{
position: fixed;
width: 90%;
border: 1px solid;
bottom:20px;
}
[data-cc-info] input:nth-of-type(2){
padding-right: 10px;
float: right;
}
[data-cc-digits] input {
color:white;
font-size: 2em;
margin-right:0.5em;
border:0px;
background:none;
line-height:2em;
}
[data-credit-card] {
width: 435px;
min-height:240px;
border-radius:10px;
background-color: #5d6874;
}
[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;
}
</style>
</head>
<body>
<div data-cart-info="">
<h1 class = "mdc-typography--headline4">
<span class = "material-icons"> shopping_cart </span>
<span data-bill></span>
</h1>
</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" size = 20 placeholder ="Name Surname">
<input type = "text" size = 6 placeholder = "MM/YY">
</div>
</div>
</div>
<button class = "mdc-button" data-pay-btn ="">Pay & Checkout Now</button>
<script>
const appState = {};
const formatAsMoney = (amount, buyerCountry) =>{
const country = countries.find(country => country.country === buyerCountry);
if(country){
return amount.toLocaleString(
`en-${country.code}`,
{style: 'currency', currency: country.currency});
}
else {
return amount.toLocaleString(
countries[0].code,
{style: 'currency', currency: countries[0].currency});
}
};
const flagIfInvalid = (field, isValid)=>{
if(isValid){
field.classList.remove("is-invalid")
}
else{
field.classList.add("is-invalid")
}
};
const expiryDateFormatIsValid = (target)=>{
if (target.match(/^(0[1-9]|10|11|12)\/\d\d$/)){
return true;
}
else{
return false;
}
};
const detectCardType = ({target})=>{
};
const validateCardExpiryDate =({target})=>{
if((expiryDateFormatIsValid(target)) &&
Date(target.value) > new Date()){
flagIfInvalid(target, true);
return true;
}
else{
flagIfInvalid(target,false);
return false;
}
};
const validateCardHolderName =({ target})=>{
const nameRegexp = /^([a-zA-Z]{3,})\s([a-zA-Z]{3,})$/;
if(nameRegexp.test(target.value)){
flagIfInvalid(target, true);
return true;
}
else{
flagIfInvalid(target, false);
return false;
}
};
const uiCanInteract = ()=>{
document.querySelector('div[data-cc-digits] input:nth-of-type(1)').
addEventListener('blur', e => detectCardType(e));
};
const displayCartTotal = ({results})=>{
const [data] = results;
const {itemsInCart, buyerCountry} = data;
appState.items = itemsInCart;
appState.country = buyerCountry;
appState.bill = itemsInCart.reduce((a,b) => a +(b.price * b.qty), 0);
appState.billFormatted = formatAsMoney(appState.bill, appState.country);
document.querySelector('[data-bill]').textContent = appState.billFormatted;
uiCanInteract();
};
const fetchBill = ()=>{
const api ='https://randomapi.com/api/006b08a801d82d0c9824dcfdfdfa3b3c';
fetch(api)
.then(response => response.json())
.then(data => displayCartTotal(data))
.catch((error)=> console.log("oooops"))
};
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 startApp = () => {
fetchBill();
};
startApp();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment