Skip to content

Finished test #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sergeen wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Finished test #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40884e6
Changed directory structure, file routes and script tags
sergeen Nov 13, 2015
cbc6408
Added all logic to make it functional
sergeen Nov 13, 2015
445094d
deleted filters.js added some comments
sergeen Nov 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions controller.js
View file
Open in desktop

This file was deleted.

67 changes: 40 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,46 @@
<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="controller.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="style/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">
</div>
<div class="buttons-holder">
<button>Show all numbers</button>
<button>Show even numbers</button>
<button>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>
</div>
</div>

<div class="list">
<!-- INSERT THE NUMBERS HERE. YOU ARE ALLOWED THE MODIFY OTHER PARTS OF THE CODE -->
</div>
</div>
<!-- Position init for the directive container div-->
<body ng-app="testApp" ng-controller="testController" ng-init="position={float: 'left',padding: '50px'}">
<!--**********************************************-->
<div class="content">
<header class="controls-holder container">
<div class="numbers-holder" ng-model="displayValues">
<input type="number" placeholder="Min number" ng-change="listArray()" ng-model="minValue">
<input type="number" placeholder="Max number" ng-change="listArray()" ng-model="maxValue">
</div>
<div class="buttons-holder">
<!--Filter buttons: this buttons call the functions on the controller-->
<button ng-click="listArray()">Show all numbers</button>
<button ng-click="evenArray()">Show even numbers</button>
<button ng-click="oddArray()">Show odd numbers</button>
<!--**********************************************-->
</div>
</header>
<div class="results-space container">
<div class="buttons-holder">
<!--Position buttons: this buttons change the style of the test-directive container div-->
<button ng-click="position={float: 'left',padding: '50px'}">Display on the left</button>
<button ng-click="position={float: 'right',padding: '50px'}">Display on the right</button>
<!--**********************************************-->
</div>
</div>
<!--test-directive container div-->
<div ng-style="position">
<!--Directive in charge of displaying the numbers list-->
<test-directive></test-directive>
<!--***************************************************-->
</div>
<!--****************************-->
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/directive.js"></script>
</body>

</html>
0 angular.js → js/angular.js
View file
Open in desktop
File renamed without changes.
4 changes: 4 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
angular.module('testApp', [
'controller',
'directive'
]);
29 changes: 29 additions & 0 deletions js/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
angular.module('controller', [])
.controller('testController', ['$scope', function($scope) {
//creates an array of odd numbers between the 2 input numbers
$scope.oddArray = function() {
$scope.listValues = [];
for (var i = $scope.minValue; i <= $scope.maxValue; i++) {
if (i % 2 !== 0) {
$scope.listValues.push(i);
}
}
};
//creates an array of Even numbers between the 2 input numbers
$scope.evenArray = function() {
$scope.listValues = [];
for (var i = $scope.minValue; i <= $scope.maxValue; i++) {
if (i % 2 === 0) {
$scope.listValues.push(i);
}
}
};
//creates an array of numbers between the 2 input numbers
$scope.listArray = function() {
$scope.listValues = [];
for (var i = $scope.minValue; i <= $scope.maxValue; i++) {
$scope.listValues.push(i);
}
};

}]);
8 changes: 8 additions & 0 deletions js/directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
angular.module('directive', [])
.directive('testDirective', function() {
// This directive display the values calculated in the controller functions
return {
restrict: 'EA', // E = Element, A = Attribute, C = Class, M = Comment
template: '<div ng-repeat = "value in listValues track by $index">{{value}}</div><br>',
};
});
0 styles.css → style/styles.css
View file
Open in desktop
File renamed without changes.