Select and Total (AngularJS)

Select one collection or all four; total up at the bottom.

by Rynne Cowham

HTML

<form ng-app ng-controller="OrderFormController">
    	<h1>Candle Collections</h1>

    	<h2>Purchase one or more of our collections at a discounted price and save!</h2>

    <ul>
        <li ng-repeat="candle in candles" ng-click="toggleActive(candle, $last)" ng-class="{active:candle.active}">
            <!-- Notice the use of the currency filter, it will format the price -->{{candle.name}} <span>{{candle.price | currency}}</span>
	<span class="items">{{candle.items}}</span>	
        </li>
    </ul>
    <div class="total">
        <!-- Calculate the total price of all chosen candles. Format it as currency. -->Total: <span>{{total() | currency}}</span>

    </div>
</form>

CSS

* {
    margin:0;
    padding:0;
}
body {
    font:15px/1.3'Open Sans', sans-serif;
    color:#5e5b64;
    text-align:center;
}
a, a:visited {
    outline:none;
    color:#389dc1;
}
a:hover {
    text-decoration:none;
}
section, footer, header, aside, nav {
    display:block;
}
form {
    background-color: #61a1bc;
    border-radius: 2px;
    box-shadow: 0 1px 1px #ccc;
    width: 400px;
    padding: 35px 60px;
    margin: 50px auto;
}
form h1, h2 {
    color:#fff;
    font-size:32px;
    font-family:'Cookie', cursive;
    font-weight: normal;
    line-height:1;
    text-shadow:0 3px 0 rgba(0, 0, 0, 0.1);
}
form h2 {
    margin:16px auto;
    font-size:24px;
}
form ul {
    list-style:none;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin:20px 0 15px;
}
form ul li {
    padding:20px 30px;
    background-color:#e35885;
    margin-bottom:8px;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
    cursor:pointer;
    overflow:hidden;
}
form ul li span {
    float:right;
}
form ul li .items {
    margin:12px auto 0;
    font-style:italic;
    font-weight:normal;
    font-size:12px;
    line-height:1;
    float:left;
}
form ul li.active {
    background-color:#8ec16d;
}
div.total {
    border-top:1px solid rgba(255, 255, 255, 0.5);
    padding:15px 30px;
    font-size:20px;
    font-weight:bold;
    text-align: left;
    color:#fff;
}
div.total span {
    float:right;
}

JavaScript

function OrderFormController($scope) {

    $scope.candles = [{
        name: 'Aromatherapy Collection',
        items: 'Amber Sandalwood, Goddess, Lavender, Love, Patchouli Pear',
        price: 45,
        active: true
    }, {
        name: 'Fruit Collection',
        items: 'Dreamy Orange, Bliss, Love Spell',
        price: 27.5,
        active: false
    }, {
        name: 'Holiday Collection',
        items: 'Candy Cane, Chocolate Mint Truffle, Chocolate Vanilla, Cranapple Spice, Christmas Tree, Home for the Holidays, Pumpkin Spice',
        price: 63.5,
        active: false
    }, {
        name: 'Wine Collection',
        items: 'Cabernet, Chardonnay, Raspberry Truffle Chardonnay',
        price: 27.5,
        active: false
    }, {
        name: 'All Four Collections',
        items: 'Save even more! Includes the Aromatherapy, Fruit, Holiday and Wine Collections listed above in one package.',
        price: 156,
        active: false
    }];

    $scope.toggleActive = function (s, last) {
        if (last) {
            for (i in $scope.candles) {
                if (i < $scope.candles.length - 1) $scope.candles[i].active = false
            }
        }
        s.active = !s.active;
    }

    $scope.lastClass = function () {
        if ($scope.class === 'active' && $scope.class !== 'last') {
            angular.forEach($scope.candles, function (s) {
                if (s.active) {
                    !s.active;
                }
            });
        } else {
            $scope.class = 'active';
        };
    };

    // Calculate total price:
    $scope.total = function () {
        var total = 0;
        angular.forEach($scope.candles, function (s) {
            if (s.active) {
                total += s.price;
            }
        });
        return total;
    };
}