SweatWorks Exam

controller.js

@@ -1,4 +1,75 @@
 angular.module('test', [])
-.controller('testController', ['$scope', function($scope) {
-
-}]);
+  .directive('numbers', function() {
+    return {
+      templateUrl: 'numbers.html'
+    };
+  })
+
+  .factory('numbersBuilder', function() {
+    return {
+      build: function() {
+        return [];
+      },
+
+      getRange: function(min, max) {
+        var items = [];
+        if(min === '' && max === '') {
+          return items;
+        }
+
+        if(max === '' && min) {
+          items.push(min);
+          return items;
+        }
+
+        if(min === '' && max) {
+          items.push(max);
+          return items;
+        }
+
+        for(var i = min; i <= max; i++) {
+          items.push(i);
+        }
+
+        return items;
+      }
+    };
+  })
+
+  .controller('testController', ['$scope', 'numbersBuilder', function($scope, numbersBuilder) {
+    function initController() {
+      $scope.items = numbersBuilder.build();
+      $scope.minNumber = '';
+      $scope.maxNumber = '';
+    }
+
+    $scope.displayLeft = function() {
+      $scope.floatRight = false;
+    };
+
+    $scope.displayRight = function() {
+      $scope.floatRight = true;
+    };
+
+    $scope.generateRange = function() {
+      $scope.items = numbersBuilder.getRange($scope.minNumber, $scope.maxNumber);
+    };
+
+    $scope.showAll = function() {
+      $scope.showEvens = false;
+      $scope.showOdds = false;
+    };
+
+    $scope.filterEvens = function() {
+      $scope.showEvens = true;
+      $scope.showOdds = false;
+    };
+
+    $scope.filterOdds = function() {
+      $scope.showEvens = false;
+      $scope.showOdds = true;
+    };
+
+    initController();
+
+  }]);

index.html

@@ -9,24 +9,25 @@
 	<div class="content">
 		<header class="controls-holder container">
 			<div class="numbers-holder">
-				<input type="number" placeholder="Min number">
-				<input type="number" placeholder="Max number">
+				<!--As there are no instructions about numbers validations, I assume minNumber is a valid integer less or equal to maxNumber-->
+				<input type="number" placeholder="Min number" ng-model="minNumber" ng-change="generateRange()">
+				<input type="number" placeholder="Max number" ng-model="maxNumber" ng-change="generateRange()">
 			</div>
 			<div class="buttons-holder">
-				<button>Show all numbers</button>
-				<button>Show even numbers</button>
-				<button>Show odd numbers</button>
+				<button ng-click="showAll()">Show all numbers</button>
+				<button ng-click="filterEvens()">Show even numbers</button>
+				<button ng-click="filterOdds()">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="displayLeft()">Display on the left</button>
+				<button ng-click="displayRight()">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 ng-class="{'float-left': !floatRight, 'float-right': floatRight}"></numbers>
 		</div>
 	</div>
 </body>

numbers.html

@@ -0,0 +1,5 @@
+<div ng-repeat="item in items">
+    <div ng-hide="(showEvens && item %2 !== 0) || (showOdds && item %2 !== 1)">
+        {{item}}
+    </div>
+</div>

styles.css

@@ -24,6 +24,10 @@ html, body {
 	display: inline-block;
 }
 
-.buttons-holder {
+.buttons-holder, .float-right {
 	float: right;
+}
+
+.float-left {
+	float: left;
 }