Reputation: 2172
I'm fascinated by this diagram and am curious how I would write the logic in Javascript.
For example, I choose porcelain
for skin type, ash blonde
for hair and grey
for eyes. The Light Summer color palette (light green) would bode well for me because there's a match of light green across each type.
So far, I have stored all the color palettes in an array and assigned each skin/hair/eye variables with an object with its corresponding color dots. Is there a better way to approach this then what I've got?
Thanks! You'll be the first to try out my app when it's done :)
Upvotes: 1
Views: 42
Reputation: 381
If you store color palettes as arrays and then skin/hair/eye colors as objects with keys as the different options, you can easily use the intersection of these arrays to find the best palette. For example, the following outputs 'light summer'
.
function commonPalette(skinTone, hairColor, eyeColor) {
return skinTone.filter(function (color) {
if (hairColor.indexOf(color) !== -1 && eyeColor.indexOf(color) !== -1) {
return true;
}
return false;
});
}
var skinTone = {
'porcelain': ['clear spring', 'clear winter', 'warm spring', 'light summer', 'light spring']
},
hairColor = {
'ash blonde': ['light summer', 'light spring']
},
eyeColor = {
'grey': ['cool summer', 'light summer', 'soft summer']
};
commonPalette(skinTone['porcelain'], hairColor['ash blonde'], eyeColor['grey']);
Upvotes: 1
Reputation: 6302
You can do it with dictionaries.
When you click the button porcelain, the the value of colors from the skin dictionary:
skin['porcelain']
And so on for all the other options.
Upvotes: 0