Randomly assigning an object prop from a file to inline-css

Question

I have a file let's say Colors.js which contains some hex values as follows:

module.exports = {

  red50:    '#ffebee',
  red100:   '#ffcdd2',
  red200:   '#ef9a9a',
  red300:   '#e57373',
  red400:   '#ef5350',
  red500:   '#f44336',
  red600:   '#e53935',
  red700:   '#d32f2f',
  red800:   '#c62828',
  red900:   '#b71c1c'

};

What I'm trying in another file is is to randomly take the above-defined objects and assign them as inline-css backgroundColor after importing Colors.js file

So eventually instead of defining one of them manually as follows:

import Colors from "../Colors";
module.exports = function() {
    return {
        someStyle: {
            background: Colors.red500
        },
    };
};

I can return a random Color object

import Colors from "../UI/Colors";
module.exports = function() {
    return {
        someStyle: {
            background: `Randomly picked object from Color.js file`
        },
    };
};

I'm pretty much clueless on how to achieve this.

Possible duplicate - http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array — ggdx, Sep 03 '15 at 12:18
Is your question on how to get a random color or assigning it to the prop? — BradByte, Sep 03 '15 at 12:29
@BradBumbalough: Perhaps I wasn't clear enough in my question description. I would like to take a random color from Colors.js and assigning it to the background prop. — zaq, Sep 03 '15 at 12:36

score 0 · Answer 1 · answered Sep 03 '15 at 12:30

This is very Easy...

Use Math.random() function of javascript to get a random Value and add that

say background: funtion(){return module.exports[Math.floor((Math.random() * 10) + 1);]

this will return any random value between 1 to 10 as an index. make exports an array and pull that value using this random index and then finally return that value.

shreesha · Answer 2 · 2015-09-03T12:50:11.810

0

try this.create a hex random number and return it as background color.i hope you do not want it to be fetched from your file. Edit:check the logic.not sure about syntax

import Colors from "../Colors";
    module.exports = function() {
                      var num=Math.floor((Math.random() * 100) + 1);
                      var color='red'+num;
        return {
            someStyle: {

                         background: colors[color];
            },
        };
    };

edited Sep 03 '15 at 12:50

answered Sep 03 '15 at 12:35

shreesha

1,648
1
20
29

well, I would like to get only the predefined colors from Colors.js file – zaq Sep 03 '15 at 12:38
Doesn't work. The styles are not applied to the element. let num=Math.floor((Math.random() * 100) + 1); someStyle: { background: Colors[num]; }, – zaq Sep 03 '15 at 13:00
check the code.it is not Colors[num].it is **Colors[color]** – shreesha Sep 03 '15 at 13:19
oh well, I am using the first variable. I don't need to append `red` prefix. – zaq Sep 03 '15 at 13:25

Randomly assigning an object prop from a file to inline-css

2 Answers2