Credit Card Wallet

Developer
Bryan Smith
Size
7,621 Kb
Views
22,264
  1. Credit Card Wallet Previews
  2. Credit Card Wallet HTML Codes
  3. Credit Card Wallet CSS Codes
  4. Credit Card Wallet JS Codes

How do I make an credit card wallet?

Simple credit card wallet showing balances with ability to add new cards.. What is a credit card wallet? How do you make a credit card wallet? This script and codes were developed by Bryan Smith on 21 November 2022, Monday.

Credit Card Wallet Previews
IQ Test

Credit Card Wallet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Credit Card Wallet</title> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wallet-container"> <div class="wallet-holder"> <div class="header"> <h2 class="title">my wallets</h2> <span class="add">&#65291;</span> </div> <div class="card-holder"> <div class="card" data-card-type="amex-transactions"> <div class="card-type amex"></div> <div class="card-number"><h2>**** ****** 45355</h2></div> <div class="card-expiration">valid thru: 06/20</div> </div> <div class="card" data-card-type="visa-transactions"> <div class="card-type visa"></div> <div class="card-number"><h2>**** **** **** 1145</h2></div> <div class="card-expiration">valid thru: 01/18</div> </div> <div class="card" data-card-type="mastercard-transactions"> <div class="card-type mastercard"></div> <div class="card-number"><h2>**** **** **** 8745</h2></div> <div class="card-expiration">valid thru: 06/18</div> </div> </div> </div> <div class="balances-holder"> <div class="header"> <div class="balance-navigation"> <h2>current balance</h2> <button class="back-to-cards">Back To Cards</button> </div> <span class="balance"></span> </div> <div class="balance-breakdown" id="amex-transactions"> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Apple iPhone 6, 6g GB</div> <div class="transaction-date">Electronics #343223 - 12 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="650.00">$650.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Payment #34212 - 11 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-900.00">$900.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Energy Bill</div> <div class="transaction-date">#343223 - 12 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="65.96">$65.96</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">ATM DV24</div> <div class="transaction-date">#343223 - 09 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="250.00">$250.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Electronics #343223 - 08 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-650.00">$650.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Lukoil Station</div> <div class="transaction-date">Gas #343223 - 08 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="650.00">$650.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Mega Image SRL</div> <div class="transaction-date">Health & Food #343223 - 07 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="112.75">$112.75</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Backcountry.com</div> <div class="transaction-date">Retail #343223 - 06 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="330.98">$330.98</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">McDonalds</div> <div class="transaction-date">Fast Food #343223 - 06 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="21.40">$21.40</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Costco</div> <div class="transaction-date">Groceries #343223 - 04 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="370.54">$370.54</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">#343223 - 01 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-67.60">$67.60</span> </div> </div> <div class="balance-breakdown" id="visa-transactions"> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Target</div> <div class="transaction-date">Retail #343223 - 12 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="150.00">$150.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Payment #34212 - 11 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-1900.00">$1900.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Amazon.com</div> <div class="transaction-date">Retail #343223 - 12 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="145.96">$145.96</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">ATM DV24</div> <div class="transaction-date">#343223 - 09 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="211.00">$211.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Lukoil Station</div> <div class="transaction-date">Gas #343223 - 08 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="3.80">$3.80</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Backcountry.com</div> <div class="transaction-date">Retail #343223 - 06 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="330.98">$330.98</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">McDonalds</div> <div class="transaction-date">Fast Food #343223 - 06 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="8.40">$8.40</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Costco</div> <div class="transaction-date">Groceries #343223 - 04 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="370.54">$370.54</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">#343223 - 01 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-50.60">$50.60</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Mega Image SRL</div> <div class="transaction-date">Health & Food #343223 - 07 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="112.75">$112.75</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Electronics #343223 - 08 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-650.00">$650.00</span> </div> </div> <div class="balance-breakdown" id="mastercard-transactions"> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Backcountry.com</div> <div class="transaction-date">Retail #343223 - 06 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="330.98">$330.98</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">ATM DV24</div> <div class="transaction-date">#343223 - 09 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="250.00">$250.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Payment #34212 - 11 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-900.00">$900.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Energy Bill</div> <div class="transaction-date">#343223 - 12 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="65.96">$65.96</span> </div> <div class="transaction"> <span class="debit-or-credit">&#65291;</span> <span class="transaction-details"> <div class="transaction-title">Funds Added</div> <div class="transaction-date">Electronics #343223 - 08 July, 2015</div> </span> <span class="transaction-amount plus" data-amount="-650.00">$650.00</span> </div> <div class="transaction"> <span class="debit-or-credit">&#8722;</span> <span class="transaction-details"> <div class="transaction-title">Lukoil Station</div> <div class="transaction-date">Gas #343223 - 08 July, 2015</div> </span> <span class="transaction-amount minus" data-amount="333.60">$333.60</span> </div> </div> </div>
</div>
<div id="addCardModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2>add credit card to wallet</h2> <span class="close">&#215;</span> </div> <div class="modal-body"> <form> <div class="group"> <label for="cardNumber">Card Number</label> <input type="text" id="cardNumber" placeholder="Number" /> <div class="icon-holder"> <div class="payment-icon amex"></div> <div class="payment-icon discover"></div> <div class="payment-icon mastercard"></div> <div class="payment-icon visa"></div> </div> </div> <div class="group"> <label>Expiration Date</label> <select name="month" id="month"> <option selected>Month</option> <option value='1'>Janaury</option> <option value='2'>February</option> <option value='3'>March</option> <option value='4'>April</option> <option value='5'>May</option> <option value='6'>June</option> <option value='7'>July</option> <option value='8'>August</option> <option value='9'>September</option> <option value='10'>October</option> <option value='11'>November</option> <option value='12'>December</option> </select> <select name="year" id="year"> <option selected>Year</option> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> <option value="20">2020</option> <option value="21">2021</option> <option value="22">2022</option> <option value="23">2023</option> </select> </div> <div class="group"> <label for="cardNickName">Card NickName</label> <input type="text" id="cardNickName" placeholder="Card Nickname" /> </div> <div class="group"> <button class="sumbit-card" type="button">Add Card</button> </div> </form> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Credit Card Wallet - Script Codes CSS Codes

body { margin: 0; padding: 0; height: 100vh; background: #FFCC66; font-family: 'Roboto', arial, sans-serif; display: flex; align-items: center; justify-content: space-around; text-transform: capitalize;
}
h2 { color: #777C8A; font-size: 21px; font-weight: 100; margin: 0;
}
button { width: 140px; padding: 10px; font-size: 16px; border: none; border-radius: 5px; color: #ffffff; background: #C6CCE2; cursor: pointer; font-family: 'Roboto', arial, sans-serif; font-weight: 100;
}
.slide-out { left: -1000px !important;
}
.wallet-container { width: 1120px; height: 650px; box-shadow: 0px 0px 10px 5px #f1ab42; border-radius: 5px; display: flex; align-items: center; justify-content: center;
}
.wallet-container .wallet-holder { width: 40%; height: 100%; background: #f2f2f2; border-radius: 5px 0px 0px 5px; padding: 0px 40px;
}
.wallet-container .wallet-holder .card-holder { height: calc(100% - 120px); overflow: scroll;
}
.wallet-container .wallet-holder .card-holder .card { height: 140px; width: calc(100% - 6px); margin: 0px auto 30px; background: #fff; border-radius: 5px; cursor: pointer; border: 3px solid #cdcdcd;
}
.wallet-container .wallet-holder .card-holder .card > div { padding: 10px 20px;
}
.wallet-container .wallet-holder .card-holder .card .card-type { width: 60px; height: 40px;
}
.wallet-container .wallet-holder .card-holder .card .card-expiration { color: #cdcdcd;
}
.wallet-container .wallet-holder .card-holder .selected { border: 3px solid #8393ca;
}
.wallet-container .balances-holder { width: 650px; height: 100%; padding: 0px 40px; background: #fff; border-radius: 0px 5px 5px 0px; position: relative;
}
.wallet-container .balances-holder .header { border-bottom: 1px solid #f2f2f2;
}
.wallet-container .balances-holder .header .balance-navigation button { display: none;
}
.wallet-container .balances-holder .balance-breakdown { height: calc(100% - 135px); overflow: scroll; position: absolute; width: 88%; display: none; padding-top: 15px;
}
.wallet-container .balances-holder .balance-breakdown .transaction { display: flex; justify-content: space-between; padding: 20px 0;
}
.wallet-container .balances-holder .balance-breakdown .transaction .debit-or-credit { width: 13%;
}
.wallet-container .balances-holder .balance-breakdown .transaction .transaction-details { width: 60%;
}
.wallet-container .balances-holder .balance-breakdown .transaction .transaction-details .transaction-date { color: #cdcdcd; font-size: 14px;
}
.wallet-container .balances-holder .balance-breakdown .transaction .transaction-amount { width: 25%; text-align: right;
}
.wallet-container .balances-holder .balance-breakdown .transaction .plus { color: #70CF42;
}
.wallet-container .balances-holder .balance-breakdown .transaction .minus { color: #8B9ACD;
}
.header { height: 30px; display: flex; justify-content: space-between; padding: 45px 0px;
}
.header > * { align-self: center;
}
.header .add { cursor: pointer; color: #C6CCE2; font-size: 30px;
}
.header .balance { font-size: 32px; font-weight: bold;
}
.modal { display: none; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4);
}
.modal .modal-content { position: relative; background-color: #ffffff; margin: auto; padding: 0px 40px; border-radius: 5px; width: 400px; height: 370px; -webkit-animation: animateIn 0.8s; animation: animateIn 0.8s;
}
.modal .modal-content .modal-header { height: 30px; padding: 45px 0px 20px; display: flex; justify-content: space-between;
}
.modal .modal-content .modal-header .close { color: #C6CCE2; font-size: 30px; cursor: pointer;
}
.modal .modal-content .modal-body form .group { padding: 10px 0px;
}
.modal .modal-content .modal-body form .group label { font-size: 16px;
}
.modal .modal-content .modal-body form .group input, .modal .modal-content .modal-body form .group select { border: 3px solid #cdcdcd; border-radius: 5px; font-size: 16px; height: 35px; background: #ffffff; padding: 0px 10px;
}
.modal .modal-content .modal-body form .group .icon-holder { position: relative; display: inline-block; left: 25px;
}
.modal .modal-content .modal-body form .group .icon-holder .payment-icon { height: 32px; width: 50px; position: absolute; bottom: -10px; transition: all .5s; opacity: 0;
}
.modal .modal-content .modal-body form .group .icon-holder .visible { opacity: 1; transform: translate(-26px); transition: all .5s;
}
.modal .modal-content .modal-body form .group select { width: 100px;
}
.amex { background: url("https://s26.postimg.org/k0sfx51x1/amex.png") center no-repeat; background-size: 60px 40px;
}
.discover { background: url("https://s26.postimg.org/g5p1ukir9/discover.png") center no-repeat; background-size: 60px 40px;
}
.mastercard { background: url("https://s26.postimg.org/iw2z5i4tx/mastercard.png") center no-repeat; background-size: 60px 40px;
}
.visa { background: url("https://s26.postimg.org/crgipaj1x/visa.png") center no-repeat; background-size: 60px 40px;
}
@keyframes animateIn { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; }
}
@media (max-width: 1200px) { .wallet-container { width: 90%; }
}
@media (max-width: 905px) { .wallet-container { position: relative; } .wallet-container .wallet-holder { position: absolute; top: 0px; left: 0; transition: all .5s; z-index: 1; border-radius: 5px; padding: 0px 20px; width: calc(100% - 40px); } .wallet-container .balances-holder { width: 100%; border-radius: 5px; padding: 0px 20px; } .wallet-container .balances-holder .header .balance-navigation button { display: block; } .modal .modal-content { width: calc(90% - 80px); height: auto; }
}

Credit Card Wallet - Script Codes JS Codes

const walletHolder = document.getElementsByClassName("wallet-holder")[0];
const cardHolder = document.getElementsByClassName("card-holder")[0];
const addCardButton = document.getElementsByClassName("add")[0];
const addCardModal = document.getElementById("addCardModal");
const closeModalButtton = document.getElementsByClassName("close")[0];
const submitCardButton = document.getElementsByClassName("sumbit-card")[0];
let cardInput = document.getElementById("cardNumber");
let cardExpirationMonth = document.getElementById("month");
let cardExpirationYear = document.getElementById("year");
let cardNickName = document.getElementById("cardNickName");
const paymentIcons = Array.from(document.querySelectorAll(".payment-icon"));
let creditCards = Array.from(document.querySelectorAll(".card"));
const balancesHolder = document.getElementsByClassName("balances-holder")[0];
let transactions = document.querySelectorAll(".balance-breakdown");
const cardBalance = document.getElementsByClassName("balance")[0];
const backToCardsButton = document.getElementsByClassName("back-to-cards")[0];
function totalBalance(a, b) { return a + b;
}
function updateCardList() { creditCards.map(card => card.addEventListener("click", function() { creditCards.map(cards => cards.classList.remove("selected")); this.classList.add("selected"); transactions.forEach(transaction => transaction.style.display = "none"); document.querySelector("#" + card.dataset.cardType).style.display = "block"; let total = []; let transactionAmounts = document.querySelector("#" + card.dataset.cardType); transactionAmounts.querySelectorAll(".transaction-amount").forEach(transaction => total.push(Number(transaction.dataset.amount))); cardBalance.innerHTML = "$" + total.reduce(totalBalance, 0).toFixed(2); walletHolder.classList.add("slide-out"); }) );
}
updateCardList();
function clearFormAndHideModal() { cardInput.value = ""; cardNickName.value = ""; cardExpirationMonth.value = ""; cardExpirationYear.value = ""; paymentIcons.map(icon => icon.classList.remove("visible")); addCardModal.style.display = "none";
}
function maskCard(str) { if (cardType === "amex") { let maskedNumber = str.replace(/\d(?=[0-9 ]{5})/g, "*"); return maskedNumber; } else { let maskedNumber = str.replace(/\d(?=[0-9 ]{4})/g, "*"); return maskedNumber; }
}
function addNewCard() { const newCard = document.createElement("div"); const newCardType = document.createElement("div"); const newCardNumber = document.createElement("div"); const newCardExpiration = document.createElement("div"); const newBalanceBreakdown = document.createElement("div"); newCardType.classList.add(cardType); newCardNumber.innerHTML = "<h2>" + maskCard(cardInput.value) + "</h2>"; newCardExpiration.innerHTML = "Valid Thru: " + cardExpirationMonth.value + "/" + cardExpirationYear.value; newCardType.classList.add("card-type"); newCardNumber.classList.add("card-number"); newCardExpiration.classList.add("card-expiration"); newBalanceBreakdown.classList.add("balance-breakdown"); newBalanceBreakdown.setAttribute("id", cardNickName.value.replace(/\s+/g, "-").toLowerCase()); newCard.appendChild(newCardType); newCard.appendChild(newCardNumber); newCard.appendChild(newCardExpiration); newCard.classList.add("card"); newCard.setAttribute("data-card-type", cardNickName.value.replace(/\s+/g, "-").toLowerCase()); balancesHolder.appendChild(newBalanceBreakdown); cardHolder.appendChild(newCard); addCardModal.style.display = "none"; creditCards = Array.from(document.querySelectorAll(".card")); transactions = document.querySelectorAll(".balance-breakdown"); clearFormAndHideModal(); updateCardList();
}
submitCardButton.addEventListener("click", addNewCard);
let cardType;
let cardInputValue;
cardInput.addEventListener("keyup", function(e) { paymentIcons.map(icon => icon.classList.remove("visible")); keyPressed = e.keyCode; cardInputValue = cardInput.value.replace(/ /g, " "); cardNumber = this.value; switch (cardNumber) { case String(cardNumber.match(/^4.*/)): document.getElementsByClassName("payment-icon visa")[0].classList.add("visible"); cardType = "visa"; break; case String(cardNumber.match(/^5[1-5].*/)): document.getElementsByClassName("payment-icon mastercard")[0].classList.add("visible"); cardType = "mastercard"; break; case String(cardNumber.match(/^3[47].*/)): document.getElementsByClassName("payment-icon amex")[0].classList.add("visible"); cardType = "amex"; break; case String(cardNumber.match(/^6(?:011|5).*/)): document.getElementsByClassName("payment-icon discover")[0].classList.add("visible"); cardType = "discover"; break; default: console.log("No Credit Card Match"); break; } if (keyPressed !== 8) { if (cardType === "amex") { cardInput.setAttribute("maxlength", 17); if (cardInputValue.length === 4 || cardInputValue.length === 11) { cardInputValue += " "; cardInput.value = cardInputValue; } } else { cardInput.setAttribute("maxlength", 19); if (cardInputValue.length === 4 || cardInputValue.length === 9 || cardInputValue.length === 14) { cardInputValue += " "; cardInput.value = cardInputValue; } } }
});
function slideBack() { walletHolder.classList.remove("slide-out");
}
backToCardsButton.addEventListener("click", slideBack);
addCardButton.addEventListener("click", function() { addCardModal.style.display = "flex";
});
closeModalButtton.addEventListener("click", function() { clearFormAndHideModal();
});
window.addEventListener("click", function(e) { if (e.target == addCardModal) { clearFormAndHideModal(); }
});
Credit Card Wallet - Script Codes
Credit Card Wallet - Script Codes
Home Page Home
Developer Bryan Smith
Username beeg
Uploaded November 21, 2022
Rating 3
Size 7,621 Kb
Views 22,264
Do you need developer help for Credit Card Wallet?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Smith (beeg) Script Codes
Name
Clip Path Sunset
Angular Christmas List
Circle Slider
Gradient Text
CSS Super Nintendo Controller
Credit Card Check
A Pen by Bryan Smith
JSWatch
Animated SVG Signature
User login
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!