add color picker

Author: d0peCode

public/html/views/main.html

@@ -9,6 +9,8 @@
                 id="colorField"
                 required>
             <input type="submit" class="btn btn-default" value="Let's rock!">
+            <label for="colorPicker">Pick color</label>
+            <color-picker ng-model="selectedColor" options="options"></color-picker>
         </div>
     </form>
 

public/index.html

@@ -10,6 +10,9 @@
     <title>colorReader challenge</title>
 
     <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css" />
+    <link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" />
+
     <link href="css/css/bs3-custom.css" rel="stylesheet">
     <link href="css/css/output.css" rel="stylesheet">
 
@@ -30,6 +33,8 @@
     <script src="node_modules/angular-route/angular-route.js"></script>
     <script src="node_modules/localforage/dist/localforage.js"></script>
     <script src="node_modules/angular-localforage/dist/angular-localForage.js"></script>
+    <script src="node_modules/tinycolor2/dist/tinycolor-min.js"></script>
+    <script src="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js"></script>
     <!-- main app file -->
     <script src="js/app.js"></script>
     <!-- constance -->

public/js/app.js

@@ -4,7 +4,8 @@
     angular
         .module('app', [
             'ngRoute',
-            'LocalForageModule'
+            'LocalForageModule',
+            'color.picker'
         ])
         .config(config);
 

public/js/controllers/mainCtrl.js

@@ -11,6 +11,12 @@
     function Controller($scope, $rootScope, $localForage, colorCheckerService) {
         var vm = $scope;
 
+        vm.selectedColor = '#1E00FF';
+        vm.options = {
+            preserveInputFormat: true,
+            format: 'hex',
+            id: 'colorPicker'
+        };
         vm.convertedColors = [ {} ];
 
         vm.fireColorReader = function() {

public/package-lock.json

@@ -18,6 +18,7 @@
     "angular": "^1.6.5",
     "angular-localforage": "^1.3.7",
     "angular-route": "^1.6.5",
+    "angularjs-color-picker": "^3.4.8",
     "bootstrap": "^3.4.1",
     "localforage": "^1.5.6"
   },