kappa7194/cookies.html

## cookies.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Cookies</title>
        <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css' rel='stylesheet' />
        <style>
            body { margin: 1em; }
            .table-auto-width { width: auto; }
        </style>
    </head>
    <body>
        <h1>Cookies</h1>
        <div data-ng-controller='CookiesController'>
            <p>You have <span data-ng-pluralize data-count='cookies' data-when='{ "one": "{} cookie", "other": "{} cookies" }'></span></p>
            <p><button class='btn btn-primary' data-ng-click='bakeCookies(1)'>Bake a cookie</button></p>
            <h2>Helpers</h2>
            <table class='table table-auto-width table-bordered table-condensed'>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Hired</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat='helper in helpers'>
                        <td data-ng-bind='helper.name'></td>
                        <td data-ng-bind='helper.description'></td>
                        <td data-ng-bind='helper.hired | number'></td>
                        <td><button class='btn' data-ng-click='hire(helper)' data-ng-disabled='!canHire(helper)'>Hire for <span data-ng-pluralize data-count='helper.cost' data-when='{ "one": "{} cookie", "other": "{} cookies" }'></span></button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
        <script>
            $(document).ready(function () {
                'use strict';
                var cookiesModule = angular.module('CookiesModule', []);
                cookiesModule.controller('CookiesController', ['$scope', function ($scope) {
                    $scope.cookies = 0;
                    $scope.helpers = {
                        cursor: {
                            name: 'Cursor',
                            description: 'Click on the button for you.',
                            yield: function () {
                                return 1;
                            },
                            interval: 5,
                            cost: 10,
                            hired: 0
                        },
                        grandma: {
                            name: 'Grandma',
                            description: 'Bakes some cookies for you.',
                            yield: function () {
                                return 3 + Math.round(Math.random() * 3);
                            },
                            interval: 5,
                            cost: 100,
                            hired: 0
                        },
                    };
                    $scope.bakeCookies = function (quantity) {
                        $scope.cookies += quantity;
                    };
                    $scope.canHire = function (helper) {
                        return $scope.cookies >= helper.cost;
                    };
                    $scope.hire = function (helper) {
                        $scope.cookies -= helper.cost;
                        helper.hired++;
                        setInterval(function () {
                            $scope.cookies += helper.yield();
                            $scope.$apply();
                        }, helper.interval * 1000);
                        helper.cost = Math.floor(helper.cost * 1.25);
                    };
                }]);
                angular.bootstrap(document, ['CookiesModule']);
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Cookies</title>
	<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css' rel='stylesheet' />
	<style>
	body { margin: 1em; }
	.table-auto-width { width: auto; }
	</style>
	</head>
	<body>
	<h1>Cookies</h1>
	<div data-ng-controller='CookiesController'>
	<p>You have <span data-ng-pluralize data-count='cookies' data-when='{ "one": "{} cookie", "other": "{} cookies" }'></span></p>
	<p><button class='btn btn-primary' data-ng-click='bakeCookies(1)'>Bake a cookie</button></p>
	<h2>Helpers</h2>
	<table class='table table-auto-width table-bordered table-condensed'>
	<thead>
	<tr>
	<th>Name</th>
	<th>Description</th>
	<th>Hired</th>
	<th></th>
	</tr>
	</thead>
	<tbody>
	<tr data-ng-repeat='helper in helpers'>
	<td data-ng-bind='helper.name'></td>
	<td data-ng-bind='helper.description'></td>
	<td data-ng-bind='helper.hired \| number'></td>
	<td><button class='btn' data-ng-click='hire(helper)' data-ng-disabled='!canHire(helper)'>Hire for <span data-ng-pluralize data-count='helper.cost' data-when='{ "one": "{} cookie", "other": "{} cookies" }'></span></button></td>
	</tr>
	</tbody>
	</table>
	</div>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
	<script>
	$(document).ready(function () {
	'use strict';
	var cookiesModule = angular.module('CookiesModule', []);
	cookiesModule.controller('CookiesController', ['$scope', function ($scope) {
	$scope.cookies = 0;
	$scope.helpers = {
	cursor: {
	name: 'Cursor',
	description: 'Click on the button for you.',
	yield: function () {
	return 1;
	},
	interval: 5,
	cost: 10,
	hired: 0
	},
	grandma: {
	name: 'Grandma',
	description: 'Bakes some cookies for you.',
	yield: function () {
	return 3 + Math.round(Math.random() * 3);
	},
	interval: 5,
	cost: 100,
	hired: 0
	},
	};
	$scope.bakeCookies = function (quantity) {
	$scope.cookies += quantity;
	};
	$scope.canHire = function (helper) {
	return $scope.cookies >= helper.cost;
	};
	$scope.hire = function (helper) {
	$scope.cookies -= helper.cost;
	helper.hired++;
	setInterval(function () {
	$scope.cookies += helper.yield();
	$scope.$apply();
	}, helper.interval * 1000);
	helper.cost = Math.floor(helper.cost * 1.25);
	};
	}]);
	angular.bootstrap(document, ['CookiesModule']);
	});
	</script>
	</body>
	</html>