Urik · martinlloves · Nov 16, 2015 · Nov 16, 2015 · Nov 16, 2015
diff --git a/controller.js b/controller.js
@@ -1,4 +1,4 @@
-angular.module('test', [])
+angular.module('test', ['test.directives', 'test.filters'])
 .controller('testController', ['$scope', function($scope) {
 
 }]);
diff --git a/directive.js b/directive.js
@@ -0,0 +1,26 @@
+angular.module('test.directives', [])
+.directive('numbers', function() {
+        return {
+                restrict: 'E',
+                scope: {
+                        from: '&',
+                        to: '&',
+                        filter: '&',
+                        position: '&'
+                },
+                controller: ['$scope', '$filter', function($scope, $filter) {
+                        $scope.numbers = function(from, to, filterName) {
+                                var numbers = [];
+                                for (var i = from; i <= to; i++) {
+                                        if (!filterName || $filter(filterName)(i)) {
+                                                numbers.push(i);
+                                        }
+                                }
+                                return numbers;
+                        };
+                }],
+                template: ' <div class="{{\'pull-\'+(position()||\'left\')}}">                                  \
+                                <div ng-repeat="number in numbers(from(), to(), filter())">{{number}}</div>     \
+                            </div>'
+        };
+});
diff --git a/filters.js b/filters.js
@@ -0,0 +1,16 @@
+angular.module('test.filters', [])
+.filter('divisibleBy', function() {
+        return function(dividend, divisor) {
+                return dividend % divisor === 0;
+        };
+})
+.filter('even', ['$filter', function($filter) {
+        return function(number) {
+                return $filter('divisibleBy')(number, 2);
+        };
+}])
+.filter('odd', ['$filter', function($filter) {
+        return function(number) {
+                return !$filter('even')(number);
+        };
+}]);
diff --git a/index.html b/index.html
@@ -3,30 +3,35 @@
 <head>
 	<script type="text/javascript" src="angular.js"></script>
 	<script type="text/javascript" src="controller.js"></script>
+        <script type="text/javascript" src="directive.js"></script>
+        <script type="text/javascript" src="filters.js"></script>
 	<link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body ng-app="test" ng-controller="testController">
 	<div class="content">
 		<header class="controls-holder container">
 			<div class="numbers-holder">
-				<input type="number" placeholder="Min number">
-				<input type="number" placeholder="Max number">
+				<input type="number" placeholder="Min number" ng-model="min" />
+				<input type="number" placeholder="Max number" ng-model="max" />
 			</div>
 			<div class="buttons-holder">
-				<button>Show all numbers</button>
-				<button>Show even numbers</button>
-				<button>Show odd numbers</button>
+				<button ng-click="filter = null">Show all numbers</button>
+				<button ng-click="filter = 'even'">Show even numbers</button>
+				<button ng-click="filter = 'odd'">Show odd numbers</button>
 			</div>
 		</header>
 		<div class="results-space container">
 			<div class="buttons-holder">
-				<button>Display on the left</button>
-				<button>Display on the right</button>
+				<button ng-click="position = 'left'">Display on the left</button>
+				<button ng-click="position = 'right'">Display on the right</button>
 			</div>
 		</div>
 
 		<div class="list">
-			<!-- INSERT THE NUMBERS HERE. YOU ARE ALLOWED THE MODIFY OTHER PARTS OF THE CODE -->
+			<numbers from="min"
+                                 to="max"
+                                 filter="filter"
+                                 position="position"></numbers>
 		</div>
 	</div>
 </body>

diff --git a/styles.css b/styles.css
@@ -26,4 +26,12 @@ html, body {
 
 .buttons-holder {
 	float: right;
+}
+
+.pull-right {
+	float: right;
+}
+
+.pull-left {
+	float: left;
 }
diff --git a/tests/directives/numbers.js b/tests/directives/numbers.js
@@ -0,0 +1,56 @@
+describe('numbers directive test', function() {
+    var $compile,
+        $rootScope;
+
+    beforeEach(function() {
+        module('test');
+
+        module(function($provide) {
+            $provide.service('$filter', function() {
+                return function(filterName) {
+                    if (filterName !== 'testFilter') return null;
+
+                    return function(number) {
+                        return number !== 4;
+                    };
+                };
+            });
+        });
+
+        inject(function(_$compile_, _$rootScope_) {
+            $compile = _$compile_;
+            $rootScope = _$rootScope_;
+        });
+    });
+
+    it('should add the list of numbers', function() {
+        var element = $compile("<numbers from=\"3\" to=\"5\"></numbers>")($rootScope);
+
+        $rootScope.$digest();
+
+        expect(element.html()).toContain("3");
+        expect(element.html()).toContain("4");
+        expect(element.html()).toContain("5");
+
+        expect(element.html()).not.toContain("2");
+        expect(element.html()).not.toContain("6");
+    });
+
+    it('should filter the list of numbers', function() {
+        var element = $compile("<numbers from=\"3\" to=\"5\" filter=\"'testFilter'\"></numbers>")($rootScope);
+
+        $rootScope.$digest();
+
+        expect(element.html()).toContain("3");
+        expect(element.html()).not.toContain("4");
+        expect(element.html()).toContain("5");
+    });
+
+    it('should add positioning classes', function() {
+        var element = $compile("<numbers from=\"3\" to=\"5\" position=\"'right'\"></numbers>")($rootScope);
+
+        $rootScope.$digest();
+
+        expect(element.find('div').eq(0).hasClass('pull-right')).toBe(true);
+    });
+});
diff --git a/tests/filters/divisibleBy.js b/tests/filters/divisibleBy.js
@@ -0,0 +1,23 @@
+describe('divisibleBy filter test', function() {
+    'use strict'; 
+
+    var filter;
+
+    beforeEach(function() {
+        module('test');
+
+        inject(function($filter) {
+            filter = $filter('divisibleBy');
+        });
+    });
+
+    it('should succeed when given natural divisors', function() {
+        expect(filter(6,2)).toBe(true);
+        expect(filter(6,3)).toBe(true);
+    });
+
+    it('should fail when given not natural divisors', function() {
+        expect(filter(6,4)).toBe(false);
+        expect(filter(6,5)).toBe(false);
+    });
+});
diff --git a/tests/filters/even.js b/tests/filters/even.js
@@ -0,0 +1,23 @@
+describe('even filter test', function() {
+    'use strict'; 
+
+    var filter;
+
+    beforeEach(function() {
+        module('test');
+
+        inject(function($filter) {
+            filter = $filter('even');
+        });
+    });
+
+    it('should fail unless given multiples of 2', function() {
+        expect(filter(7)).toBe(false);
+        expect(filter(9)).toBe(false);
+    });
+
+    it('should succeed when given multiples of 2', function() {
+        expect(filter(6)).toBe(true);
+        expect(filter(8)).toBe(true);
+    });
+});
diff --git a/tests/filters/odd.js b/tests/filters/odd.js
@@ -0,0 +1,23 @@
+describe('odd filter test', function() {
+    'use strict'; 
+
+    var filter;
+
+    beforeEach(function() {
+        module('test');
+
+        inject(function($filter) {
+            filter = $filter('odd');
+        });
+    });
+
+    it('should succeed unless given multiples of 2', function() {
+        expect(filter(7)).toBe(true);
+        expect(filter(9)).toBe(true);
+    });
+
+    it('should fail when given multiples of 2', function() {
+        expect(filter(6)).toBe(false);
+        expect(filter(8)).toBe(false);
+    });
+});