Wallet App

index.html

.app{'ng-app' => 'wallet-app', 'ng-cloak' => 'true'}
  
  .app_inner
  
    %aside
    
      .wallet
      
        .holder{'ng-controller' => 'walletController'}
        
          .card{'ng-repeat' => 'card in cards | orderBy:"id":true', 'ng-click' => 'index(card.id)'}
            
            .card_number
            
              %p {{card.cardNumber}}
              
            .card_holder
              
              %p {{card.cardHolder}}
            
              %p {{card.expiryDate}}
              
            .card_icon
              
              %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'}
              
        .add_a_card
          %i{:class => 'fa fa-plus'}
          %p Add a card
    
    %main
    
      .list{'ng-controller' => 'walletController'}
      
        %ul{'ng-repeat' => 'card in cards', 'ng-show' => 'card.id == cardIndex'}
        
          .card
            
            .card_number
            
              %p {{card.cardNumber}}
              
            .card_holder
              
              %p {{card.cardHolder}}
            
              %p {{card.expiryDate}}
              
            .card_icon
              
              %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'}
              
          .transactions
          
            %table
            
              %thead
            
                %th

                  Date

                %th

                  Merchant

                %th

                  Spend
              
              %tr{'ng-repeat' => 'transaction in card.transactions'}
              
                %td
                
                  {{transaction.date}}
                  
                %td
                
                  {{transaction.merchant}}
                  
                %td
                
                  {{transaction.price | currency:"£"}}
    
    
      .create

        %form{'ng-controller' => 'addCardController as card'}

          %i{:class => 'fa fa-times-circle'}

          %input{:type => 'text', :placeholder => 'Enter card number', 'ng-model' => 'number', :class => 'number',}

          %input{:type => 'text', :placeholder => 'Enter your name', 'ng-model' => 'name', :class => 'name'}

          %input{:type => 'text', :placeholder => 'MM / YY', :class => 'expiry', 'ng-model' => 'expiry'}

          .choose_a_card{'ng-controller' => 'addCardController'}

            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/mastercard-curved-64px.png', 'ng-click' => 'choose("mastercard-curved-64px")'}

            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/discover-curved-64px.png', 'ng-click' => 'choose("discover-curved-64px")'}

            %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/visa-curved-64px.png', 'ng-click' => 'choose("visa-curved-64px")', :class => 'selected'}

            .card

              .card_number

                %p {{number}}

              .card_holder

                %p {{name}}

                %p {{expiry}}

              .card_icon

                %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{choice}}.png'}

            %input{:type => 'submit', :value => 'Add card', 'ng-click' => 'addCard(number, name, expiry)'}

script.js

angular.module('wallet-app', []).

controller('walletController', function($scope, $rootScope, $timeout) {

  $rootScope.cardIndex = 0;

  $scope.index = function(id) {
    $timeout(function() {
      $rootScope.cardIndex = id;
    }, 1000);
    console.log(id);
  }

  $rootScope.cards = [{
    id: 0,
    cardNumber: '1234 5678 9876 5432',
    expiryDate: '07/19',
    cardHolder: 'J Thomson',
    type: 'visa-curved-64px',
    transactions: [{
      date: '01/02/2016',
      merchant: 'Apple',
      price: '205.25'
    }, {
      date: '05/02/2016',
      merchant: 'Jack & Jones',
      price: '32.95'
    }, {
      date: '12/02/2016',
      merchant: 'F&B',
      price: '47.22'
    }, {
      date: '14/02/2016',
      merchant: 'Swarovski',
      price: '325'
    }]
  }, {
    id: 1,
    cardNumber: '5432 9876 5678 1234',
    expiryDate: '01/22',
    cardHolder: 'T Konten',
    type: 'mastercard-curved-64px',
    transactions: [{
      date: '01/02/2016',
      merchant: 'Hugo Boss',
      price: '19.99'
    }, {
      date: '05/02/2016',
      merchant: 'Amazon UK',
      price: '59.95'
    }]
  }, {
    id: 2,
    cardNumber: '5678 5433 2254 3476',
    expiryDate: '01/22',
    cardHolder: 'C David',
    type: 'discover-curved-64px',
    transactions: [{
      date: '01/02/2016',
      merchant: 'Steam',
      price: '19.99'
    }, {
      date: '05/02/2016',
      merchant: 'Tesco',
      price: '10'
    }, {
      date: '05/02/2016',
      merchant: 'Tesco',
      price: '122.50'
    }, {
      date: '05/02/2016',
      merchant: 'Game',
      price: '22.50'
    }, {
      date: '05/02/2016',
      merchant: 'Steam',
      price: '9'
    }, {
      date: '05/02/2016',
      merchant: 'IKEA',
      price: '12.17'
    }, {
      date: '05/02/2016',
      merchant: 'Apple',
      price: '1.50'
    }, {
      date: '05/02/2016',
      merchant: 'Tesco',
      price: '7.95'
    }]
  }]
}).

controller('addCardController', function($scope, $rootScope, $timeout) {
  $scope.choice = "visa-curved-64px";
  $scope.choose = function(card) {
    $scope.choice = card;
  }
  $scope.number;
  $rootScope.name;
  $scope.expiry;

  $scope.addCard = function(number, name, expiry) {
    $timeout(function() {
      $rootScope.cards.push({
        id: $rootScope.cards.length + 1,
        cardNumber: number,
        cardHolder: name,
        expiryDate: expiry,
        type: $scope.choice,
        transactions: [{
          date: '10/02/2016',
          merchant: 'Jack & Jones',
          price: '79.87'
        }, {
          date: '12/02/2016',
          merchant: 'Cadwalders',
          price: '7.25'
        }, {
          date: '15/02/2016',
          merchant: 'Bella Italia',
          price: '62.70'
        }, {
          date: '15/02/2016',
          merchant: 'Odeon',
          price: '24.99'
        }]
      });
    }, 700);
    console.log($rootScope.cards);
  }
});

function changeCard() {
  setTimeout(function() {
    $("main").find(".list").css({
      'transform': 'scale(0.95)',
      'transition': 'all ease-in-out .45s',
      'opacity': '0',
      '-webkit-filter': 'blur(10px)'
    });
  });
  setTimeout(function() {
    $("main").find(".list").css({
      'transform': 'scale(1)',
      'transition': 'all ease-in-out .45s',
      'opacity': '1',
      '-webkit-filter': 'blur(0)'
    });
  }, 1000);
}

function close() {
  $(".create").css({
    'opacity': '0',
    'pointer-events': 'none'
  });
}

function addCard() {
  $(".create").css({
    'opacity': '1',
    'pointer-events': 'auto'
  })
}

$(".choose_a_card").on("click", "img", function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

$(".wallet").on("click", ".card", function() {
  changeCard();
  setTimeout(function() {
    close();
  }, 600);
  $(this).css({
    'background': '#EF3E5C',
    'transition': 'all ease .45s'
  }).siblings().css({
    'background': 'rgba(0, 0, 0, 0.2)',
    'transition': 'all ease .45s'
  })
});

$(".add_a_card").click(function() {
  addCard();
});

$("form").find("i").click(function() {
  close();
});

$("input.number").keydown(function(e) {
  if (e.keyCode === 8) {
    $(this).val().length + 100;
  } else if ($(this).val().length === 19) {
    e.preventDefault();
  } else {
    var $this = $(this);
    if ((($this.val().length + 1) % 5) === 0) {
      $this.val($this.val() + " ");
    }
  }
});

$("input.expiry").keydown(function(e) {
  if (e.keyCode === 8) {
    $(this).val().length + 100;
  } else if (e.keyCode === 32) {
    return false;
  } else if (e.keyCode === 191) {
    return false
  } else if (e.keyCode === 189) {
    return false
  } else if ($(this).val().length > 6) {
    e.preventDefault();
  } else {
    var $this = $(this);
    if ((($this.val().length + 1) % 3) === 0) {
      $this.val($this.val() + " / ");
    }
  }
});

$("input[type='submit']").click(function() {
  setTimeout(function() {
    $(".wallet").find(".holder").css({
      'opacity': '0',
      'padding-top': '100px',
      'transition': 'all ease .45s',
    });
  }, 0);
  setTimeout(function() {
    $(".wallet").find(".card").css({
      'transform': 'scale(0)'
    });
  }, 700);
  setTimeout(function() {
    $(".wallet").find(".holder").css({
      'opacity': '1',
      'padding-top': '0',
      'transition': 'all ease .75s',
    });
  }, 1000);
  setTimeout(function() {
    $(".wallet").find(".card").css({
      'transform': 'scale(1)'
    });
  }, 1450);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

// Variables
$app-aside: #292C3A;
$app-main: darken($app-aside, 2%);

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}

html,body {
  background: #EDF2F4;
  overflow: hidden;
}

.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  &_inner {
    background: #FFF;
    width: 750px;
    height: 550px;
    display: flex;
    border-radius: 9px;
    box-shadow: 1px 5px 15px #CCC;
    aside {
      background: $app-aside;
      flex: 1 0 220px;
      display: flex;
      justify-content: center;
      border-top-left-radius: 7px;
      border-bottom-left-radius: 7px;
      .wallet {
        margin: 0 auto;
        .holder {
          height: 370px;
          overflow-y: auto;
          overflow-x: hidden;
        }
        .card {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          width: 180px;
          height: 100px;
          margin: 1em;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1em;
          flex-flow: row wrap;
          cursor: pointer;
          z-index: 1;
          position: relative;
          transition: all ease .45s;
          &:last-of-type {
            background: #EF3E5C;
          }
          &:before {
            content: '';
            background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
            opacity: 0.2;
            transform: translateX(-16px);
            border-radius: 5px;
            width: 100%;
            height: 100%;
            background-size: cover;
            position: absolute;
            z-index: 0;
          }
          &_number, &_holder > p {
            font-size: 10px;
            color: #FFF;
          }
          &_holder {
            width: 50%;
          }
          &_number {
            width: 100%;
          }
          &_icon {
            width: 20%;
            > img {
              width: 35px;
              height: auto;
            }
          }
        }
      }
    }
    .add_a_card {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
      color: #FFF;
      margin: 4.5em auto;
      cursor: pointer;
      & > i {
        font-size: 30px;
      }
      & > p {
        font-size: 17px;
      }
    }
    main {
      background: $app-main;
      flex: 1 1 480px;
      border-top-right-radius: 7px;
      border-bottom-right-radius: 7px;
      position: relative;
      .list {
        overflow-y: auto;
        overflow-x: hidden;
        height: 440px;
        .card {
          background-color: #EF3E5C;
          border-radius: 5px;
          width: 170px;
          height: 100px;
          margin: 3em auto;
          display: flex;
          transform: scale(1.5);
          justify-content: space-between;
          align-items: center;
          padding: 0 1em;
          flex-flow: row wrap;
          z-index: 1;
          &:before {
            content: '';
            background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
            opacity: 0.225;
            transform: translateX(-16px);
            border-radius: 5px;
            width: 100%;
            height: 100%;
            background-size: cover;
            position: absolute;
            z-index: -1;
          }
          &_number, &_holder, &_expiration, &_holder > p {
            font-size: 10px;
            color: #FFF;
          }
          &_holder {
            width: 50%;
          }
          &_number {
            width: 100%;
          }
          &_icon {
            width: 20%;
            > img {
              width: 35px;
              height: auto;
            }
          }
        }
        .transactions {
          table {
            width: 100%;
            text-align: left;
            color: #FFF;
            padding: 1em;
            border-spacing: 0;
            thead {
              border-bottom: 1px solid darken($app-main, 1%);
              th {
                padding: 0.5em 0;
                color: #EB526B;
              }
            }
            td {
              border-top: 1px solid rgba(255, 255, 255, 0.015);
              padding: 0.75em 0;
            }
          }
          h1 {
            background: #F03F5D;
            color: #FFF;
            cursor: pointer;
            text-align: center;
            margin: 2em auto;
            width: 80%;
            position: absolute;
            left: 0;
            right: 0;
            padding: 0.2em;
            border-radius: 7px;
          }
        }
      }
      .create {
        opacity: 0;
        transition: opacity .45s cubic-bezier(0.390, 0.575, 0.565, 1.000);
        pointer-events: none;
        .card {
          background: #EF3E5C;
          border-radius: 5px;
          width: 170px;
          height: 100px;
          margin: 2em auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1em;
          flex-flow: row wrap;
          z-index: 1;
          position: relative;
          &:before {
            content: '';
            background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg);
            opacity: 0.2;
            transform: translateX(-16px);
            border-radius: 5px;
            width: 100%;
            height: 100%;
            background-size: cover;
            position: absolute;
            z-index: 0;
          }
          &_number, &_holder, &_expiration, &_holder > p {
            font-size: 10px;
            color: #FFF;
            text-transform: capitalize;
          }
          &_holder {
            width: 50%;
          }
          &_number {
            width: 100%;
          }
          &_icon {
            width: 20%;
            > img {
              width: 35px;
              height: auto;
            }
          }
        }
      }
      form {
        background: $app-main;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(-430px);
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        z-index: 2;
        height: 525px;
        flex-flow: column wrap;
        justify-content: space-around;
        input[type="text"] {
          background: transparent;
          border-bottom: 1px solid rgba(255, 255, 255, 0.015);
          padding: 1em 0;
          border-top: none;
          border-left: none;
          border-right: none;
          width: 85%;
          font-size: 18px;
          outline: none;
          color: #FFF;
        }
        input[type="submit"] {
          background: darken($app-aside, 7%);
          color: #FFF;
          border: none;
          padding: 1em;
          width: 85%;
          font-size: 18px;
          outline: none;
          border-radius: 7px;
          cursor: pointer;
          transition: all ease .15s;
          &:hover {
            background: rgba(239,62,92, 0.9);
          }
        }
        i {
          color: rgba(255, 255, 255, 0.7);
          display: flex;
          justify-content: flex-end;
          width: 85%;
          margin: 1em 0;
          cursor: pointer;
          &:hover {
            color: rgba(255, 255, 255, 1);
          }
        }
        .choose_a_card {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-items: center;
          > img {
            margin: 0 1em;
            width: 80px;
            height: auto;
            cursor: pointer;
            padding: 0.6em;
            border-radius: 7px;
            transition: all ease .45s;
          }
          .selected {
            background: darken($app-main, 5%);
          }
        }
      }
    }
  }
}

::-webkit-input-placeholder {
  color: #FFF;
}

::-webkit-scrollbar-thumb {
  background: darken($app-main, 3%);
  border-radius: 50px;
  height: 50px;
}

Wallet App.markdown

Wallet App

[Recovered version]

I wanted to challenge myself with another Angular JS project so I decided to create this nifty digital wallet! You can add cards & view transactions on each card. I hope you guys like it I had a great time making this!

A Pen by Jack Thomson on CodePen.

License.