diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/css/ie7.css b/css/ie7.css new file mode 100644 index 0000000..6ec4c5a --- /dev/null +++ b/css/ie7.css @@ -0,0 +1 @@ +//no styles for IE7 use tan hack for the less than handful of styles which aren't compatible. Problem solved. \ No newline at end of file diff --git a/css/test.css b/css/test.css new file mode 100644 index 0000000..23c15db --- /dev/null +++ b/css/test.css @@ -0,0 +1,8 @@ + +body{background:#EFF;color:#122;} +h1 { color: #368; weight: bolder; margin: 20px; display: block; opacity: 80%; } +h1:hover { opacity:1; } +.well{border-radius:8px;background-color: #CDD;border-color:#356;} +.fail, .status{color:#c00;} +.ib{display:inline-block;*display:inline;} +.message{background-color:#fcc;padding:1em;border:1px solid #900;border-radius:8px;} \ No newline at end of file diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 6f5c271..99e7077 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,33 +8,34 @@ - + + - + + + + +
+

The User Interface Developer Test

-
+
  • This Page and results.html should be converted to AngularJS templates.
  • Add a select-all toggle for the checkbox list.
  • Select-all should be checked if all fields are checked, unchecked if all fields are unchecked and indeterminate if some are checked.
    • -
  • Sor the checkboxes by name +
  • Sort the checkboxes by name
  • When submitting the form, if only "Language" is checked, then an error should appear stating " Please choose more items! "
  • Successfully submitting the form takes us to results.html and shows what the user submitted.
  • Maybe the page can look a little better?
    • @@ -42,34 +43,38 @@

    The User Interface Developer Test

-
-
- Select All +
+ {{system.message.status}} +
+ +
+
-
- - - - - - + + + + + + + + +
+
+

+ {{checkedList}} +

+
+
- - - - + + \ No newline at end of file diff --git a/js/TestMe.js b/js/TestMe.js new file mode 100644 index 0000000..072b902 --- /dev/null +++ b/js/TestMe.js @@ -0,0 +1,117 @@ +function indexController($scope, $http) { + $scope.title = "Index Controller"; + var flaggedID = 3; + $scope.errorMessages = [{ + "message": ""}, + { + "message": "Please make a selection!"}, + { + "message": "Please choose more items!"}, + { + "message": "The system is down!" + }]; + + $scope.checks = [{ + "id": 0, + "value": "1", + "label": "Abstract", + "checked": false}, + { + "id": 1, + "value": "2", + "label": "Publication", + "checked": false}, + { + "id": 2, + "value": "3", + "label": "Inventor", + "checked": false}, + { + "id": 3, + "value": "4", + "label": "Language", + "checked": false}, + { + "id": 4, + "value": "5", + "label": "Source", + "checked": false}, + { + "id": 5, + "value": "6", + "label": "Priority", + "checked": false}]; + + $scope.value = []; + $scope.checkedList = []; + $scope.updateServerFail = function(boolHolder){ + $scope.failServer = boolHolder.checked; + } + $scope.updateCheckValues = function(checky){ + answered=[]; + answered = $scope.answered(); + if (answered.length==$scope.checks.length){ + $scope.selectAll = true; + } + if (answered.length<1){ + $scope.selectAll = false; + } + }; + $scope.checkAll = function(){ + $scope.selectAll = !$scope.selectAll; + angular.forEach($scope.checks, function (check) { + check.checked = $scope.selectAll; + }); + answered = []; + angular.forEach($scope.checks, function (check){ + if(check.checked){ + answered.push(check.id); + } + }); + }; + $scope.answered = function(){ + answered = []; + $scope.checkedList = []; + angular.forEach($scope.checks, function (check){ + if(check.checked){ + answered.push(check.id); + $scope.checkedList.push(check.label); + } + }); + return answered; + } + $scope.validation = function(){ + answered = $scope.answered(); + if(answered.length<1){ + $scope.system.message.status = $scope.errorMessages[1].message; + return false; + }else if(answered.indexOf(flaggedID) > -1&&answered.length==1){ + $scope.system.message.status = $scope.errorMessages[2].message; + return false; + }else{ + $scope.system.message.status = $scope.errorMessages[0].message; + return true; + } + } + $scope.processPage = function(){ + if($scope.validation()==true){ + if($scope.failServer){ + $scope.system.message.status = $scope.errorMessages[3].message; + }else{ + /*$http.get('js/mock.json') + .then(function(response) { + console.log('Success', response); + //response.data + }, function(error) { + console.error('ERR', error); + $scope.system.message.status = $scope.errorMessages[3].message; + })*/ + return true; + } + } + + } + + //set-and-get + +}; \ No newline at end of file diff --git a/js/app.js b/js/app.js old mode 100644 new mode 100755 index e81250d..b0184e4 --- a/js/app.js +++ b/js/app.js @@ -1 +1,32 @@ -angular.module('TestMe', []); \ No newline at end of file +var angular = angular; + +var app = angular.module('TestMe', ['ngRoute', 'ngResource']); + + +app.config(function($routeProvider, $locationProvider) { + $routeProvider + .when('/', { + templateUrl: 'index.html', + title: 'Index Page', + controller: 'indexController', + resolve: { + delay: function($q, $timeout) { + var delay = $q.defer(); + $timeout(delay.resolve, 1000); + return delay.promise; + } + } + }) + .when('/results.html', { + templateUrl: 'results.html', + title: 'Results Page', + controller: 'resultsController' + }); + $locationProvider.html5Mode(true); +}); + +app.run(['$rootScope', function($rootScope) { + $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { + $rootScope.title = current.$$route.title; + }); +}]); \ No newline at end of file diff --git a/js/mock.json b/js/mock.json new file mode 100644 index 0000000..529a445 --- /dev/null +++ b/js/mock.json @@ -0,0 +1 @@ +{ "spoon": "moo" } \ No newline at end of file diff --git a/js/results.js b/js/results.js new file mode 100644 index 0000000..4c50d76 --- /dev/null +++ b/js/results.js @@ -0,0 +1,3 @@ +function resultsController($scope, $http) { + $scope.title = "Results Controller"; +} \ No newline at end of file diff --git a/js/route.js b/js/route.js new file mode 100644 index 0000000..e69de29 diff --git a/js/service.js b/js/service.js new file mode 100644 index 0000000..3eccbf5 --- /dev/null +++ b/js/service.js @@ -0,0 +1 @@ +//get/set data \ No newline at end of file diff --git a/results.html b/results.html old mode 100644 new mode 100755 index dfe49cf..36f2ca2 --- a/results.html +++ b/results.html @@ -2,18 +2,23 @@ - TestMe_lite results! - + TestMe results! + + + +