Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Josh Channin -->
<body>
  <div class="container">
    <div class="wallet">
      <aside class="left-wallet">
        <div class="wallet-head">
          <h1> My Wallets </h1>
          <div class="modal-open">+
          </div>
        </div>
        <div class="cc-select">          
        </div>
      </aside>
      <content class="right-trans">
        <h1> Current Balance </h1>
        <h4 id="balance"></h4>
        <div class="trans-list">          
        </div>
      </content>
    </div>
  </div>

  <div class="modal">
    <div class="modal-body">
      <h3>Add a New Card</h3>
      <h5>Select a card on the left and enter the information</h5>
      <div class="modal-close">x</div>      
      <div class="modal-cards">
        <div class="md-cc visa">
          <div class="cc-img visa"></div>
        </div>      
       <div class="md-cc amex">
          <div class="cc-img amex"></div>
        </div>      
       <div class="md-cc mc">
          <div class="cc-img mc"></div>
        </div>    
      </div>      
        <form>
          <input type="text" id="ccnum" disabled> 
          <select name="month" id="month" required disabled>
             <option value="">Month</option>
              <option value="01">Janaury</option>
              <option value="02">February</option>
              <option value="03">March</option>
              <option value="04">April</option>
              <option value="05">May</option>
              <option value="06">June</option>
              <option value="07">July</option>
              <option value="08">August</option>
              <option value="09">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
          </select>
          <select name="year" id="year" required disabled>
            <option value="">Year</option>
            <option value="16">2016</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>
            <option value="24">2024</option>
          </select>
        </form>      
      <button class="modal-add-cc"> Add </button>      
  </div>
</body>
              
            
!

CSS

              
                /* Josh Channin 
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto:300,400');

body {
  font-family: 'Open Sans', sans-serif;
  background-color: rgb(255, 204, 102);
}

.container {
  width: 100%;
  padding: 40px 0px 40px 0px;
}

.wallet {
  margin: 0 auto;
  border-radius: 5px;
  background-color: #FFFFFF;
  box-shadow: 0px 8px 20px 6px rgb(255, 178, 22);
  -webkit-box-shadow: 0px 8px 20px 6px rgb(255, 178, 22);
  -moz-box-shadow: 0px 8px 20px 6px rgb(255, 178, 22);
  height: 680px;
  max-width: 900px;
  min-width: 800px;
  display: flex;
}

.left-wallet {
  background-color: #f2f2f2;
  width: 300px;
  height: initial;
  padding: 40px;
  border-radius: 5px;
}

.right-trans {
  background-color: #FFFFFF;
  width: 600px;
  height: initial;
  padding: 40px;
  border-radius: 5px;
}

h1 {
  color: #7d818e;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
  font-family: 'Open Sans', sans-serif;
}

h4 {
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
}

.left-wallet h1,
.left-wallet modal-open,
.right-trans h1,
.right-trans #balance {
  font-family: 'Open Sans', sans-serif;
  display: inline-block;
}

#balance {
  float: right;
  line-height: 34px;
  font-size: 30px;
  font-weight: bold;
  color: #464646;
}

.modal-open {
  display: inline-block;
  float: right;
  padding: 0;
  font-size: 42px;
  line-height: 36px;
  color: #b7b7b7;
  cursor: pointer;
}

.modal-open:hover {
  display: inline-block;
  float: right;
  padding: 0;
  font-size: 42px;
  line-height: 36px;
  color: #868686;
  cursor: pointer;
}

.trans-list {
  display: none;
  border-top: 1px solid #f2f2f2;
  margin-top: 40px;
  overflow-y: scroll;
  max-height: 550px;
}

.trans {
  margin-top: 15px;
}

.trans-plus {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/384009/plus-icon.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 50px;
  display: block;
  float: left;
  position: relative;
  top: 15px;
}

.trans-minus {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/384009/minus-icon.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 50px;
  display: block;
  float: left;
  position: relative;
  top: 15px;
}

.trans-details {
  margin-top: 20px;
  display: inline-block;
  width: 80%;
}

.trans-name,
.trans-type-date {
  margin: 3px;
}

.trans-name {
  display: inline-block;
}

.trans-type-date {
  color: #888;
  padding-left: 40px;
}

.trans-amt {
  float: right;
  line-height: 55px;
  font-size: 18px;
  margin-top: 10px
}

.amt-green {
  color: rgb(113, 207, 66);
}

.amt-blue {
  color: rgb(166, 178, 216);
}

.cc-select {
  margin-top: 34px;
  overflow-y: scroll;
  max-height: 540px;
  padding: 5px;
}

.cc {
  cursor: pointer;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  border: 1px solid #e1e1e1;
  transition: .1s ease-in-out;
}

.cc:hover {
  transform: scale(1.03);
  border: 1px solid gray;
}

.cc-active:hover {
  transform: scale(1);
  border: 4px solid rgb(132, 148, 202);
}

.cc-active {
  border: 4px solid rgb(132, 148, 202);
}

.cc-img {
  width: 60px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  margin-bottom: 15px
}

.cc-img-main {
  width: 60px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  margin-bottom: 15px
}

.cc-num {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
}

.cc-date {
  margin-top: 8px;
  font-family: 'Roboto', sans-serif;
  color: #888;
}

.visa .cc-img,
.visa .cc-img-main {
  background-image: url("http://i.imgur.com/xYX6Tsy.png")
}

.amex .cc-img,
.amex .cc-img-main {
  background-image: url("http://i.imgur.com/47221vA.png")
}

.mc .cc-img,
.mc .cc-img-main {
  background-image: url("http://i.imgur.com/2fWTLRZ.png")
}



.modal {
  text-align: center;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.modal-body {
  z-index: 2;
  background-color: #fff;
  border-radius: 5px;
  padding: 40px;
  padding-top: 10px;
  padding-bottom: 50px;
  display: inline-block;
  margin-top: 100px;
  width: 100%;
  max-width: 400px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #888;
}

.modal-close:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.md-cc .cc-img {
  cursor: pointer;
}

.md-cc .cc-img:hover {
  cursor: pointer;
  transform: scale(1.25);
  transition: .1s ease-in-out;
}

.cc-md-active {
  transform: scale(1.25);
}

.cc-md-small {
  transform: scale(.80);
}

.modal-cards {
  width: 15%;
  display: inline-block;
  float: left;
}

.modal-add-cc {
  position: absolute;
  bottom: 15px;
  left: 190px;
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
  font-weight: 400;
  text-align: center;
  padding: .25rem 2rem;
  font-size: 1rem;
  border-radius: .25rem;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

::-webkit-scrollbar {
  display: none;
}

form {
  width: 75%;
  float: right;
}

form>input,
form select {
  display: block;
  width: initial;
  border: 1px solid #e1e1e1;
  padding: 5px;
  margin: 5px
}

.modal-body>h3,
.modal-body>h5 {
  color: #777;
}

textarea:focus,
input:focus {
  outline: none;
}

.modal-body>h5 {
  border-top: 1px solid #e1e1e1;
  padding-top: 20px;
}

.no-trans {
  color: #888;
  text-align: center;
}

.valid-green {
  border: 2px solid green;
}

.valid-red {
  border: 2px solid darkred;
}
              
            
!

JS

              
                /* Josh Channin
   Fake data from generatedata.com
*/
var data = [
  {
    type: "visa",
    number: "**** **** **** 2562",
    month: "12",
    year: "17",
    id: 1,
    transactions: [
      {
        title: "Apple Iphone 6, 6g GB",
        vendor: "Electronics #343223",
        date: "12 July, 2015",
        amount: "650.00",
        currency: "$",
        action: "debit"
      },
      {
        title: "Funds Added",
        vendor: "Payment #343212",
        date: "11 July, 2015",
        amount: "900.00",
        currency: "$",
        action: "credit"
      },
      {
        title: "Energy Bill",
        vendor: "#343566",
        date: "11 July, 2015",
        amount: "84.96",
        currency: "$",
        action: "debit"
      },
      {
        title: "Mega Image SRL",
        vendor: "Food&Health #34365",
        date: "11 July, 2015",
        amount: "112.75",
        currency: "$",
        action: "debit"
      },
      {
        title: "ATM DV24",
        vendor: "#343253",
        date: "09 July, 2015",
        amount: "200.00",
        currency: "$",
        action: "debit"
      },
      {
        title: "Lukoil Station",
        vendor: "Gas #343279",
        date: "09 July, 2015",
        amount: "190.00",
        currency: "$",
        action: "debit"
      }
    ]
  },
  {
    type: "amex",
    number: "**** ****** 14525",
    month: "07",
    year: "19",
    id: 2,
    transactions: [
     {"title": "Sales and Marketing", "vendor": "Borland", "date": "23 Nov, 2016", "amount": "65.76", "currency": "$", "action": "debit"},
	{"title": "Tech Support", "vendor": "Microsoft", "date": "1 Aug, 2017", "amount": "64.62", "currency": "$", "action": "debit"},
	{"title": "Media Relations", "vendor": "Chami", "date": "8 Jun, 2017", "amount": "98.82", "currency": "$", "action": "debit"},
	{"title": "Accounting", "vendor": "Chami", "date": "21 Jan, 2017", "amount": "7889.84", "currency": "$", "action": "credit"},
	{"title": "Sales and Marketing", "vendor": "Lavasoft", "date": "24 Jul, 2017", "amount": "77.68", "currency": "$", "action": "debit"},
	{"title": "Asset Management", "vendor": "Cakewalk", "date": "11 Oct, 2016", "amount": "52.40", "currency": "$", "action": "credit"},
	{"title": "Finances", "vendor": "Sibelius", "date": "19 Aug, 2016", "amount": "32.20", "currency": "$", "action": "debit"},
	{"title": "Sales and Marketing", "vendor": "Chami", "date": "4 Jun, 2017", "amount": "72.62", "currency": "$", "action": "debit"},
	{"title": "Customer Relations", "vendor": "Finale", "date": "22 Aug, 2017", "amount": "77.77", "currency": "$", "action": "debit"},
	{"title": "Sales and Marketing", "vendor": "Apple Systems", "date": "19 May, 2017", "amount": "84.50", "currency": "$", "action": "credit"},
	{"title": "Quality Assurance", "vendor": "Cakewalk", "date": "29 Jul, 2017", "amount": "80.03", "currency": "$", "action": "debit"},
	{"title": "Public Relations", "vendor": "Altavista", "date": "10 Oct, 2017", "amount": "6.60", "currency": "$", "action": "credit"}
    ]
  },
  {
    type: "mc",
    number: "**** **** **** 8866",
    month: "02",
    year: "22",
    id: 3,
    transactions: [
     {"title": "Borland", "vendor": "Cursus Diam PC", "date": "30 Apr, 2017", "amount": "9647.17", "currency": "$", "action": "debit"},
	{"title": "Sibelius", "vendor": "Ridiculus Corporation", "date": "17 Apr, 2017", "amount": "1058.02", "currency": "$", "action": "credit"},
	{"title": "Altavista", "vendor": "Molestie Orci Tincidunt Company", "date": "9 Mar, 2018", "amount": "6622.94", "currency": "$", "action": "credit"},
	{"title": "Sibelius", "vendor": "Eu Industries", "date": "20 Mar, 2017", "amount": "2649.70", "currency": "$", "action": "credit"},
	{"title": "Yahoo", "vendor": "Mollis Nec Cursus Associates", "date": "20 Sep, 2016", "amount": "9343.63", "currency": "$", "action": "credit"},
	{"title": "Sibelius", "vendor": "Eget Metus Eu Incorporated", "date": "27 Jun, 2016", "amount": "6516.49", "currency": "$", "action": "credit"},
	{"title": "Google", "vendor": "Tempus Company", "date": "26 May, 2017", "amount": "8504.32", "currency": "$", "action": "debit"},
	{"title": "Chami", "vendor": "Id Ante Incorporated", "date": "13 Aug, 2017", "amount": "3592.96", "currency": "$", "action": "credit"},
	{"title": "Finale", "vendor": "Iaculis Quis Incorporated", "date": "2 Jan, 2017", "amount": "8743.26", "currency": "$", "action": "debit"},
	{"title": "Chami", "vendor": "Eu Nulla At Institute", "date": "5 Sep, 2017", "amount": "3112.89", "currency": "$", "action": "credit"},
	{"title": "Adobe", "vendor": "Arcu Nunc Inc.", "date": "22 Aug, 2017", "amount": "2239.85", "currency": "$", "action": "credit"},
	{"title": "Macromedia", "vendor": "Eros LLP", "date": "17 Feb, 2018", "amount": "3641.58", "currency": "$", "action": "debit"},
	{"title": "Macromedia", "vendor": "Diam Dictum Associates", "date": "24 Dec, 2016", "amount": "3592.79", "currency": "$", "action": "credit"},
	{"title": "Yahoo", "vendor": "Eget Odio Aliquam Corporation", "date": "30 Oct, 2016", "amount": "9453.17", "currency": "$", "action": "credit"},
	{"title": "Sibelius", "vendor": "Eros Non Enim Company", "date": "15 Feb, 2018", "amount": "5283.54", "currency": "$", "action": "debit"}
    ]
  }
];

// vars
var balance = 0;

// append cc to modal
var ccModalAppend= function(ccType, ccNum, month, year) {
	if(ccType == 'amex') {	
		$(".cc-select").prepend(
		  '<div class="cc ' +
		  ccType +
		  ' cc-active">\
		  <div class="cc-img-main"></div>\
		  <div class="cc-num">**** *******  ' +
		  ccNum +
		  '</div>\
		  <div class="cc-date">Valid Thru: ' +
		  month +
		  "/" +
		  year +
		  "</div>\
		  </div>"
		);
	} else {
		$(".cc-select").prepend(
		  '<div class="cc ' +
		  ccType +
		  ' cc-active">\
		  <div class="cc-img-main"></div>\
		  <div class="cc-num">**** **** **** ' +
		  ccNum +
		  '</div>\
		  <div class="cc-date">Valid Thru: ' +
		  month +
		  "/" +
		  year +
		  "</div>\
		  </div>"
		);
	}	
}


// append credit cards
var ccAppend = function(data) {
	$(".cc-select").append(
      '<div id="'+data.id+'" class="cc ' +
      data.type +
      '">\
      <div class="cc-img-main"></div>\
      <div class="cc-num">' +
      data.number +
      '</div>\
      <div class="cc-date">Valid Thru: ' +
      data.month +
      "/" +
      data.year +
      "</div>\
      </div>"
    )	
}

// load trams data 
var load = function(id, data) {  
      clearTrans();
      balance = 0;
      data.forEach(function(e) {
        if (e.id == id) {
          startAppend(e);
        }
      });
      balanceCalc(balance);  
      noTrans();
};

// count valid cc numbers
var countValid = function(ccType) {    
    if(ccType == 'amex') {
      if($('#ccnum').val().length != 15) {
        $('#ccnum').removeClass('valid-green')
        $('#ccnum').addClass('valid-red')
        return false;
      } else {
        $('#ccnum').addClass('valid-green')
        $('#ccnum').removeClass('valid-red')
        return true;
      }
    } else {
       if($('#ccnum').val().length != 16) {
        $('#ccnum').addClass('valid-red')
        $('#ccnum').removeClass('valid-green')
        return false;
      } else {
        $('#ccnum').addClass('valid-green')
        $('#ccnum').removeClass('valid-red')
        return true;
      }
    }  
}

// append trans data
var startAppend = function(e) {
    for (var i = 0; i < e.transactions.length; i++) {
        if (e.transactions[i].action == "credit") {
          var action = "trans-plus";
          var color = "green";
          balance = balance + parseFloat(e.transactions[i].amount,10);
        } else {
          var action = "trans-minus";
          var color = "blue";
          balance = balance - parseFloat(e.transactions[i].amount,10);
        }
        $(".trans-list").append(
          ' <div class="trans trans-' +
          e.type +
          '">\
          <div class="trans-details">\
          <span class="' +
          action +
          '"></span>\
          <h3 class="trans-name">' +
          e.transactions[i].title +
          '</h3>\
          <h5 class="trans-type-date">' +
          e.transactions[i].vendor +
          " - " +
          e.transactions[i].date +
		      '</h5>\
          </div>\
          <div class="trans-amt">\
          <h4 class="trans-amt amt-' +
          color +
          '">' +
          e.transactions[i].currency +
          " " +
          e.transactions[i].amount +
          "</h4>\
          </div>\
          </div>"
        ).show('fast');
      noTrans();
    }    
}

// calc balance and format
var balanceCalc = function balanceCalc(balance) {
     return balance < 0  ? $("#balance").html("$(" + Math.abs(balance).toLocaleString() + ")")  : $("#balance").html("$" + balance.toLocaleString() + "");
}

// clear trans list
var clearTrans = function(){
	$(".trans-list").empty().hide();
}

// clear modal
var clearModal = function() {
  $('.cc-img').removeClass('cc-md-active')
  $('#ccnum, #year, #month').val('')
  $('#ccnum').css('border','1px solid #e1e1e1;')
  $('#ccnum').removeClass('valid-red').removeClass('valid-green')
}

// no trans
var noTrans = function() {
    $('.trans-list').children().length == 0 ? $(".trans-list").append('<h5 class="no-trans"> No transactions for this card</h5>').show('fast') :"";
}

// load inital data
$(document).ready(function() {    
  data.forEach(function(e){
    ccAppend(e)
  })  
  $(".cc:eq(0)").addClass("cc-active")  
  load($(".cc-active").attr("id"),data)  
});

// click listener for active card
$(document).on("click", ".cc", function(e) {
  $(".cc").removeClass("cc-active");
  $(this).addClass("cc-active");
  load($(".cc-active").attr("id"),data)  
});

// click listener for active card in modal selector
$(document).on("click", ".cc-img", function(e) {
  $(".cc-img").removeClass("cc-md-active");
  $(this).addClass("cc-md-active");
  ($(".md-cc > .cc-md-active").attr("class").split(" ")[1] == 'amex') ? $('#ccnum').attr('placeholder','**** ****** *****') : $('#ccnum').attr('placeholder','**** **** **** ****')   
  $('#ccnum, #year, #month').removeAttr('disabled');
});

// close modal
$(document).on("click", ".modal-close", function(e) {
  $(".modal").hide();
  clearModal();
});

// open modal
$(".modal-open").on("click", function(e) {
  $(".modal").show();
});

// add new card logic
// TODO: Add numbous checks, sanitize, error catching
$(document).on("click", ".modal-add-cc", function(e) {
  var ccType = null;
  if ($(".md-cc > .cc-md-active").attr("class")) {
    ccType = $(".md-cc > .cc-md-active").attr("class").split(" ")[1];
  }
  var ccNum = $("#ccnum").val().substr($("#ccnum").val().length - 4);
  var month = $("#month").val();
  var year = $("#year").val();

  if (ccNum && month && year && ccType) {
    $(".modal").hide();
    $(".cc").removeClass("cc-active");
	
	  ccModalAppend(ccType,ccNum,month,year)
    var p = data[data.length-1].id + 1
    data.push({
      type: ccType,
      number: (ccType == 'amex') ? "**** ****** "+ccNum : "**** **** **** "+ccNum ,
      month: month,
      year: year,
      id: p,
      transactions: []
    })
    clearTrans()
    clearModal();
    load(ccType,data)
	
  } else {
    alert("Sorry, missing required fields"); // will do for now
  }
});

// keypress cc count
$('#ccnum').on('keyup', function(){
  var ccType = $(".md-cc > .cc-md-active").attr("class").split(" ")[1];
  countValid(ccType);
})

              
            
!
999px

Console