Angular WIP

by Keith Jeter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.js"></script>
<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItems.name }}</h2>
<div class="hf">Buy it: {{ shopItem.price }}</div>
<div class="hff">Earn it: {{ shopItem.altprice }}</div>
<div class="desc"><div>{{ shopItem.desc }}</div></div>
<div class="prog"><div>{{ shopItem.progress }}</div></div>
</div>
</div>
</div>

CSS

h2 { padding: 0; margin: 0; margin-bottom: 10px; padding-bottom: 10px; text-align: center; border-bottom: solid 1px #000; }

.itm { 
    border: solid 4px #000;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    min-width: 150px;
}

.itm div { width: 100%; }
.itm .hf, .itm .hff { cursor: pointer; text-align: center; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px; float: left; width: 50%; }

.itm .hf { background-color: #ddd; }
.itm .hff { background-color: #ccc; }

.itm .desc { background: #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 10px; margin-top: 0px; overflow: hidden; }
.itm .desc div { padding: 0 10px 10px 10px; }

.itm .prog { min-height: 20px; background: #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding-top: 10px; overflow: hidden; }
.itm .prog div { text-align: center; color: #fff; }

.imag { background: #777; min-width: 150px!important; height: 200px!important; margin: auto; }

JavaScript

var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);

shopItems.controller('shopItemController', function ($scope) {
    $scope.shopItems = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 1.',
            prog: '50%'
        },{
            //id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 2.',
            prog: '50%'
        },{
            //id: 03,
            name: 'Three',
            //img: '',
            price: '$17.99',
            altprice: '12 miles',
            desc: 'This is a fake description 3.',
            prog: '100%'
        },{
            //id: 04,
            name: 'Four',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 4.',
            prog: '100%'
        }];
});