one-on-one · tannerlinsley · Mar 4, 2014 · Mar 4, 2014 · Mar 4, 2014 · Mar 4, 2014
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+partials/.gitkeep
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ to select from the following options with **radio buttons**:
 available via an API. Make a JSONP request to `http://fedtest.aws.af.cm/` and
 populate the options in the form using the result.
 
-### Add JavaScirpt Validation
+### Add JavaScript Validation
 
 As a person filling out the form on the landing page I need to receive feedback
 ensuring I complete the form according to the following validation rules:

diff --git a/index.html b/index.html
@@ -1,51 +1,68 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
+<html lang="en" ng-app="myApp">
+<head>
     <meta charset="utf-8" />
     <title>Front-End Developer Test</title>
     <link rel="stylesheet" href="styles/main.css" />
-  </head>
-  <body>
+</head>
+<body ng-controller="mainController">
     <div class="header">
-      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
+        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
     </div>
     <div class="container">
-      <img class="banner" src="images/banner.jpg" alt="" />
-      <form method="post" action="index.html">
-        <h2>Nibh Hendrerit Sodales</h2>
-        <label>
-          First Name:
-          <input type="text" name="first_name" />
-        </label>
-        <label>
-          Last Name:
-          <input type="text" name="last_name" />
-        </label>
-        <label>
-          Phone Number:
-          <input type="text" name="phone" />
-        </label>
-        <label>
-          Email Address:
-          <input type="text" name="email" />
-        </label>
-        <div class="actions">
-          <button type="submit">Request Information</button>
+        <img class="banner" src="images/banner.jpg" alt="" />
+        <div class="content">
+            <p>
+                Aliquam sed nibh elit. Morbi non augue eu turpis dictum convallis sed et sapien. 
+                Donec ac pretium nisi. Cras ac erat ut nibh hendrerit sodales eget in orci. Duis 
+                pellentesque gravida orci ac ornare. In hac habitasse platea dictumst. Sed justo 
+                sapien, faucibus eu aliquet et, molestie quis orci.
+            </p>
+            <p>
+                Vivamus pulvinar, felis sed porttitor luctus, ligula nisl hendrerit nibh, vitae 
+                lobortis massa odio at elit. Sed et felis metus, nec eleifend dui. Quisque eget 
+                semper eros. Etiam gravida lobortis nibh, vitae viverra velit rhoncus sodales.
+            </p>
         </div>
-      </form>
-      <div class="content">
-        <p>
-          Aliquam sed nibh elit. Morbi non augue eu turpis dictum convallis sed et sapien. 
-          Donec ac pretium nisi. Cras ac erat ut nibh hendrerit sodales eget in orci. Duis 
-          pellentesque gravida orci ac ornare. In hac habitasse platea dictumst. Sed justo 
-          sapien, faucibus eu aliquet et, molestie quis orci.
-        </p>
-        <p>
-          Vivamus pulvinar, felis sed porttitor luctus, ligula nisl hendrerit nibh, vitae 
-          lobortis massa odio at elit. Sed et felis metus, nec eleifend dui. Quisque eget 
-          semper eros. Etiam gravida lobortis nibh, vitae viverra velit rhoncus sodales.
-        </p>
-      </div>
+        <form method="post" ng-model="myForm" name="myForm" ng-submit="submit()" novalidate autocomplete="off">
+            <h2>Nibh Hendrerit Sodales</h2>
+            <label>
+                First Name:<span class="required" ng-show="myForm.first_name.$error.required">*</span>
+                <input type="text" name="first_name" ng-model="first_name" required ng-required="true"/>
+            </label>
+            <label>
+                Last Name:<span class="required" ng-show="myForm.last_name.$error.required">*</span>
+                <input type="text" name="last_name" ng-model="last_name" required ng-required="true"/>
+            </label>
+            <label>
+                Phone Number:<span class="required" ng-show="myForm.phone.$error.pattern || myForm.phone.$error.required">*</span>
+                <input type="tel" name="phone" ng-model="phone" input-mask="{mask: '(999) 999-9999'}" ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/" required ng-required="true"/>
+            </label>
+            <label>
+                Email Address:<span class="required" ng-show="myForm.email.$error.required || myForm.email.$error.pattern">*</span>
+                <input type="email" name="email" ng-model="email" ng-pattern="/[-0-9a-zA-Z.+_]+@[-0-9a-zA-Z.+_]+\.[a-zA-Z]{2,4}/" required ng-required="true"/>
+            </label>
+            Education Level:<span class="required" ng-show="myForm.edu_level.$error.required">*</span>
+            <div ng-repeat="(key, label) in edu_levels.choices">
+                <label ng-click="$parent.edu_level.$valid = true">
+                    <input type="radio" ng-model="$parent.edu_level" name="edu_level" ng-value="key" ng-required='true' /><span style="display:inline;">{{label}}</span>
+                </label>
+            </div>
+            <div class="actions">
+                <button type="submit" ng-disabled="myForm.$invalid || myForm.$pristine">Request Information</button>
+            </div>
+        </form>
     </div>
-  </body>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="lib/jQuery/jquery.inputmask.js"></script>
+
+    <script src="lib/angular/angular.min.js"></script>
+    <script src="lib/angular/angular-route.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/services.js"></script>
+    <script src="js/controllers.js"></script>
+    <script src="js/filters.js"></script>
+    <script src="js/directives.js"></script>
+</body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,11 @@
+'use strict';
+
+
+// Declare app level module which depends on filters, and services
+angular.module('myApp', [
+  'ngRoute',
+  'myApp.filters',
+  'myApp.services',
+  'myApp.directives',
+  'myApp.controllers'
+]);
diff --git a/js/controllers.js b/js/controllers.js
@@ -0,0 +1,29 @@
+'use strict';
+
+/* Controllers */
+
+angular.module('myApp.controllers', []).
+controller('mainController', ['$scope', '$http', function($scope, $http) {
+
+	$scope.edu_levels = {};
+
+	window.jsonp_callback = function(data) {
+		$scope.edu_levels.choices = data;
+	};
+
+	var url = "http://fedtest.aws.af.cm/?callback=jsonp_callback";
+
+	$http.jsonp(url);
+
+	$scope.submit = function(){
+		var submission = {
+			"first_name": $scope.first_name,
+			"last_name": $scope.last_name,
+			"phone": $scope.phone,
+			"email": $scope.email,
+			"edu_level": $scope.edu_level
+		};
+		console.log(submission);
+		//validate form even further, and process information however you want.
+	};
+}]);
diff --git a/js/directives.js b/js/directives.js
@@ -0,0 +1,18 @@
+'use strict';
+
+/* Directives */
+
+
+angular.module('myApp.directives', [])
+.directive('inputMask', function(){
+	return {
+		restrict: 'A',
+		link: function(scope, el, attrs){
+			el.inputmask(scope.$eval(attrs.inputMask));
+			el.on('blur', function(){
+				scope.$eval(attrs.ngModel + "='" + el.val() + "'");
+        // or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
+    });
+		}
+	};
+});
diff --git a/js/filters.js b/js/filters.js
@@ -0,0 +1,5 @@
+'use strict';
+
+/* Filters */
+
+angular.module('myApp.filters', []);
diff --git a/js/services.js b/js/services.js
@@ -0,0 +1,5 @@
+'use strict';
+
+/* Services */
+
+angular.module('myApp.services', []);