Day 23 - Interactive Wallet

Developer
Andy Tran
Size
8,506 Kb
Views
74,888
  1. Day 23 - Interactive Wallet Previews
  2. Day 23 - Interactive Wallet HTML Codes
  3. Day 23 - Interactive Wallet CSS Codes
  4. Day 23 - Interactive Wallet JS Codes

How do I make an day 23 - interactive wallet?

Spent the whole night working on this interactive wallet UI by Paul Flavius Nechita for his Day 23 UI. In this pen you're able to add new cards, as well as filter between each of it. :). What is a day 23 - interactive wallet? How do you make a day 23 - interactive wallet? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Day 23 - Interactive Wallet Previews
IQ Test

Day 23 - Interactive Wallet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 23 - Interactive Wallet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Transaction Item-->
<div class="wallet"> <div class="overlay"> <div class="card-form"> <header> <h2> <div class="type">Visa</div><span>Card Details</span> </h2> <div class="a close" href="#"></div> </header> <div class="form"> <div class="form-row"> <div class="input-group"> <label for="">Name on card</label> <input id="cardName" type="text" value="" placeholder=""/> </div> </div> <div class="form-row"> <div class="input-group"> <label for="">Card Number</label> <input id="cardNumber" type="text" value="" maxlength="16" placeholder=""/> </div> </div> <div class="form-row"> <div class="input-group"> <label for="">Expiry Date</label> <input id="cardDate" type="month" value="" placeholder=""/> </div> <div class="input-group"> <label for="">CVS</label> <input id="cardCVS" type="text" value="" maxlength="4" placeholder=""/> </div> </div> </div> <footer class="footer"> <button class="button">Complete Payment</button> </footer> </div> </div> <div class="cards"> <header> <h2>My Wallet</h2><a id="add" href="#"></a> </header> <div class="content"> <div class="card active" data-id="#{id}"><img src="#{image}"/> <div class="number">**** **** **** 1234</div> <div class="expiration">Valid Thru: 2015-09</div> </div> <div class="card" data-id="#{id}"><img src="#{image}"/> <div class="number">**** **** **** 7864</div> <div class="expiration">Valid Thru: 2015-09</div> </div> <div class="card" data-id="#{id}"><img src="#{image}"/> <div class="number">**** **** **** 6542</div> <div class="expiration">Valid Thru: 2015-09</div> </div> <div class="card" data-id="#{id}"><img src="#{image}"/> <div class="number">**** **** **** 3125</div> <div class="expiration">Valid Thru: 2015-09</div> </div> </div> </div> <div class="activity active" data-id="1234"> <header> <h2>Balance</h2><span>$735.<i>00</i></span> </header> <div class="content"> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> </div> </div> <div class="activity" data-id="7864"> <header> <h2>Balance</h2><span>$12033.<i>00</i></span> </header> <div class="content"> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> </div> </div> <div class="activity" data-id="6542"> <header> <h2>Balance</h2><span>$531.<i>00</i></span> </header> <div class="content"> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> </div> </div> <div class="activity" data-id="3125"> <header> <h2>Balance</h2><span>$4235.<i>00</i></span> </header> <div class="content"> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Apple iPhone 6, 16 GB</h3><span>Electronics</span> <span>#4</span> - <span>12 July, 2015</span> </div> <div class="price #{type}">$650.<i>00</i></div> </div> </div> <div class="transaction"> <div class="icon-type"> <div class="icon #{type}"></div> </div> <div class="description"> <div class="info"> <h3>Funds Added</h3><span>Uncategorized</span> <span>#3</span> - <span>11 July, 2015</span> </div> <div class="price #{type}">$900.<i>00</i></div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/andytran/pen/vLmRVp.js'></script> <script src="js/index.js"></script>
</body>
</html>

Day 23 - Interactive Wallet - Script Codes CSS Codes

body { background: #FECB6E; padding: 40px; color: rgba(0, 0, 0, 0.6); font-family: 'Open Sans', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::-moz-selection { background: #f0ba54;
}
::selection { background: #f0ba54;
}
.wallet { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; background: #FFF; max-width: 880px; border-radius: 6px; margin: 0 auto; /* overflow: hidden; */
}
.content { height: 600px; overflow-y: auto; overflow-x: hidden;
}
.cards { background: #F2F2F2; -ms-flex-preferred-size: 40%; flex-basis: 40%; width: 40%; height: 100%; box-sizing: border-box; padding: 60px;
}
.cards header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 60px;
}
.cards h2 { color: rgba(0, 0, 0, 0.6); font-size: 24px;
}
.cards .content { margin: 0 -60px; padding: 0 60px;
}
#add, .close { position: relative; width: 24px; height: 24px; padding: 10px; cursor: pointer;
}
#add:before, .close:before, #add:after, .close:after { content: ''; display: block; background: #C5CBE0; width: 24px; height: 4px; border-radius: 10px; margin: 10px 0 0;
}
#add:after, .close:after { margin: -4px 0 0; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.card { background: #FFF; width: 100%; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 4px; box-sizing: border-box; margin: 0 0 40px; padding: 20px; -webkit-transition: .3s ease; transition: .3s ease; -webkit-filter: grayscale(1); filter: grayscale(1); cursor: pointer;
}
.card:last-child { margin: 0;
}
.card.active { border-color: #38c5ff; -webkit-filter: grayscale(0); filter: grayscale(0);
}
.card img { display: block; height: 45px; margin: 0 0 20px;
}
.card .number { margin: 0 0 10px; color: rgba(0, 0, 0, 0.6); font-size: 18px;
}
.card .expiration { color: rgba(0, 0, 0, 0.4); font-size: 14px;
}
.activity { -ms-flex-preferred-size: 60%; flex-basis: 60%; width: 60%; padding: 60px; box-sizing: border-box;
}
.activity header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #F2F2F2; margin: 0 0 19px; padding: 0 0 40px;
}
.activity header h2 { color: rgba(0, 0, 0, 0.6); font-size: 24px; line-height: 44px;
}
.activity header span { display: inline-block; color: rgba(0, 0, 0, 0.8); font-size: 36px; font-weight: 700;
}
.activity header span i { display: inline-block; font-size: 20px; vertical-align: top;
}
.transaction { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0;
}
.transaction .icon { display: block; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 10px; box-sizing: border-box; margin: 0 20px 0 0; color: rgba(0, 0, 0, 0.8); font-size: 18px; font-weight: 700; line-height: 16px; text-align: center;
}
.transaction .icon.plus:before { content: '+';
}
.transaction .icon.minus { line-height: 12px;
}
.transaction .icon.minus:before { content: '-';
}
.transaction .description { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; color: rgba(0, 0, 0, 0.4);
}
.transaction h3 { display: block; width: 100%; margin: 0 0 10px; color: rgba(0, 0, 0, 0.8); font-size: 18px; font-weight: 600;
}
.transaction .price { font-size: 18px; font-weight: 600;
}
.transaction .price.plus { color: #f0ba54;
}
.transaction .price.minus { color: #38c5ff;
}
.transaction .price i { display: inline-block; font-size: 10px; vertical-align: top;
}
.transaction-empty { display: block; width: 100%; font-size: 14px; text-align: center;
}
.overlay { z-index: 1; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%;
}
.close { position: absolute; top: 50%; right: 20px; border-radius: 100%; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.close:before, .close:after { background: #FFF;
}
.close:hover { background: #FFF; -webkit-transform: rotate(225deg) translateY(-50%); transform: rotate(225deg) translateY(-50%);
}
.close:hover:before, .close:hover:after { background: #38c5ff;
}
.card-form { z-index: 2; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #FFF; width: 80%; border-radius: 4px; margin: auto; overflow: hidden;
}
.card-form header { position: relative; background: #38c5ff;
}
.card-form header h2 { padding: 20px; color: #FFF; font-size: 24px; font-weight: 700; text-transform: uppercase;
}
.card-form header input { outline: none; display: block; background: 0; border: 0; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.4); margin: -5px 0 -4px; padding: 0; line-height: 1; color: #FFF; font-size: 24px; font-weight: 600; font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.card-form header span { display: block; margin: 10px 0 0; font-size: 14px;
}
.card-form .footer .button { outline: none; display: block; background: #38c5ff; width: 100%; border: 0; padding: 20px 30px; color: #FFF; font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.form { padding: 20px;
}
.form-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0 0 30px;
}
.form-row:last-child { margin: 0;
}
.form-row:last-child .input-group { width: 75%; margin: 0 15px 0 0;
}
.form-row:last-child .input-group:last-child { width: 25%; margin: 0 0 15px;
}
.form .input-group { width: 100%;
}
.form label { display: block; width: 100%; margin: 0 0 10px; color: #38c5ff; font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.form input { outline: none; display: block; background: rgba(0, 0, 0, 0.1); width: 100%; border: 0; border-radius: 4px; box-sizing: border-box; margin: 0; padding: 15px; color: rgba(0, 0, 0, 0.4); font-size: 12px; font-weight: 700;
}

Day 23 - Interactive Wallet - Script Codes JS Codes

String.prototype.replaceAt = function(index, character) { return this.substr(0, index) + character + this.substr(index + character.length);
}
String.prototype.insert = function(index, string) { if (index > 0) return this.substring(0, index) + string + this.substring(index, this.length); else return string + this;
};
var typeValue, typeText, cardType, cardName, cardNumber, cardDate, cardId;
$('.overlay').hide();
$('#add').on('click', function(e) { e.preventDefault(); $('.overlay').fadeIn(300);
});
$('.activity').not('.activity.active').hide();
function tabTrigger() { $('.card').click(function(e) { e.preventDefault(); $('.card').removeClass('active'); $(this).addClass('active'); $('.activity').hide(); $('.activity[data-id="' + $.attr(this, 'data-id') + '"').fadeIn(); });
}
tabTrigger();
$('.card-form .button').on('click', function(e) { cardName = $('#cardName').val(); cardNumber = $('#cardNumber').val(); for (var i = 0; i < 12; i++) { cardNumber = cardNumber.replaceAt(i, "*"); } cardDate = $('#cardDate').val(); cardCVS = $('#cardCVS').val(); if ($('.type-form').length) { alert('Please complete card type.'); } else if (cardName == '') { alert('Card name appears to be empty.'); } else if (cardNumber == '') { alert('Card number appears to be empty.'); } else if (cardNumber.length != 16) { alert('Card number appears to be less then 16 characters.'); } else if (cardDate == '') { alert('Card date appears to be empty.'); } else if (cardCVS == '') { alert('Card CVS appears to be empty.'); } else { for (var i = 1; i < 4; i++) { cardNumber = cardNumber.insert((5 * i) - 1, ' '); } cardType = $('.type').text(); cardId = cardNumber.charAt(15); cardId += cardNumber.charAt(16); cardId += cardNumber.charAt(17); cardId += cardNumber.charAt(18); e.preventDefault(); $('.overlay').fadeOut(300); $('.cards .content').append('<div class="card" data-id="' + cardId + '"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/' + cardType + '.png"/> <div class="number">' + cardNumber + '</div> <div class="expiration">Valid Thru: ' + cardDate + '</div> </div>'); $('.wallet').append($('<div data-id="' + cardId + '" class="activity"> <header> <h2>Balance</h2><span>$0.<i>00</i></span> </header> <div class="content"> <div class="transaction transaction-empty">It seems you have no recent transactions.</div></div>').hide()); tabTrigger(); // Addin Account Balance $('.form input').val(''); }
});
$('.close').on('click', function(e) { $('.overlay').fadeOut(300);
});
function typeChange() { typeText = $('.type').text(); $('.type').on('click', function() { $(this).replaceWith('<input class="type-form" type="text" value="' + typeText + '" />') });
}
typeChange();
$(document).on('keydown', '.type-form', function(e) { if (e.keyCode == 13) { e.preventDefault(); typeValue = $('.type-form').val(); $('.type-form').replaceWith('<div class="type">' + typeValue + '</div>'); typeChange(); }
});
Day 23 - Interactive Wallet - Script Codes
Day 23 - Interactive Wallet - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 8,506 Kb
Views 74,888
Do you need developer help for Day 23 - Interactive 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!

Andy Tran (andytran) Script Codes
Name
Flat Pricing Table
Login Form - Modal
Interactive Location Modal
Macbook Pro Demo
Planner Dashboard
Flat Login Form 3.0
Code Module - Slide In Banner
Flat Login Form
Progress Bar
Article News Card
Create amazing blog posts 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!