I'm currently exploring how to utilize an input field and fetch a response using Angular directly within the script. As a beginner, I came across this script on codepen. At the end of the code, I've attempted to make a call but haven't completely grasped it yet. This particular script compares an input color with a set array of colors and outputs the closest match. Please excuse any misuse of terminology as I'm still in the learning process.
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);
}) ; `
In my attempt to achieve this, I appended the following snippet at the end, although I acknowledge it's not correct. The challenge lies in determining what should go inside "result".