I am attempting to understand how to use an input and retrieve a response using Angular all within the script. I'm new to it and pulled this script from codepen. I've included the call I'm attempting to make at the end of the code, but I haven't quite figured it out. This script compares an input color to an array of predetermined colors and spits out the closest match. I apologize in advance if I'm not using the correct terminology, I'm still learning.
angular.module('myApp', [])
.controller('control', function($scope, $filter){
var colors = ["27b69d", "23a68f", "1aa48c", "17846f", "0f8b7d", "0e7e72", "0a876e", "097b64", "0a584d", "095046", "ffffff", "000000", "7e888e", "737c81", "383d40", "33373a", "272727", "018391", "017784", "db1e39", "c71b34", "fffee8", "ffb661", "fafafa", "e8e8e8", "d8d8d8", "e7f5f3", "5d6468", "4c5256", "31343b", "2f3335"];
$scope.colors = colors;
$scope.submit = function() {
$scope.new = $scope.newColor;
var res = [];
angular.forEach(colors, function(value, key) {
res.push(getDiffColor(value, $scope.newColor));
});
$scope.colors = $filter('filter')(colors, colors[res.indexOf(Math.min.apply(null, res))]);
};
$scope.raz = function () {
$scope.newColor = null;
$scope.colors = colors;
}
getDiffColor = function(cola, colb) {
a = hexToRgb(cola);
b = hexToRgb(colb);
return Math.sqrt(Math.pow((a.r - b.r),2) + Math.pow((a.g - b.g),2) + Math.pow((a.b - b.b),2));
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
var input = "FFFFFF";
var result = $scope.submit(input)
console.log(result);
}) ; `
I've added this to the end, and I know it's not correct, but it's essentially what I'm trying to accomplish. The issue is I'm not sure what to put in "result".