andy4thehuynh
andy4thehuynh

Reputation: 2172

Compare variables that correspond to a result in Javascript

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

Answers (2)

transcranial
transcranial

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

jordiburgos
jordiburgos

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

Related Questions