Script to generate CSS properties with random colors

Question

I need to create a bunch (800) CSS properties each with a different color in this format:

#mydiv[terr="T368"] {
  polygon-fill: #F11810;
}

I found this handy script to generate random HEX colors (http://www.paulirish.com/2009/random-hex-color-code-snippets/):

Math.floor(Math.random()*16777215).toString(16);

I'm a bit new to javascript and can't put together a loop that does the following:

The number next to the "T" needs to be incremented from 1 to 800 with each TXXX having a unique color. It's fine if there are duplicates of colors throughout the 800, I can go back and fix that by hand. No need to add a function that ensures there are duplicates.

What I'm looking for is a script that generates 800 css properties like this:

#mydiv[terr="T100"] {
  polygon-fill: #F11810;
}
#mydiv[terr="T101"] {
  polygon-fill: #e2e2e2;
}
#mydiv[terr="T102"] {
  polygon-fill: #6A3D9A;
}
...etc, etc.

Yes, the #mydiv remains the same. This is specific CSS for CartoDB, so the formatting is specific to that.

I just need the 800 CSS properties to generate so I can copy and paste them into CartoDB.

PS: Bonus points for handling the case of all Ts before 100, which are formatted like this, for example: T001 and T050.

EDIT: Got very close on my own, but could use help on my "bonus" question above. H

for (rep = 1; rep <= 800; rep++) {
  var color = Math.floor(Math.random()*16777215).toString(16);  
    document.write('#mydiv[territory="T' + rep + '"] {<br> polygon-fill:#'   +color+';<br>}<br>');
}

How would you give "bonus points"?

LcSalazar
– LcSalazar

2015-02-02 13:14:04 +00:00
Commented Feb 2, 2015 at 13:14 — LcSalazar
– LcSalazar, Commented Feb 2, 2015 at 13:14

kasper Taeymans · Accepted Answer · 2015-02-02 13:28:36Z

2

Here is a simple script that will generate the stuff you want. You can copy the formatted css from the textarea.

JSFiddle demo

HTML:

<textarea id="output"></textarea>

JS:

var output = $("#output");
for (var i = 0; i < 801; i++) {
    var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    var css = "#mydiv[terr='T" + i + "']{\n polygon-fill: " + color + ";\n}\n";
    output.append(css);
}

edited Feb 2, 2015 at 13:28

answered Feb 2, 2015 at 13:14

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

This works, and completely answers the question. Fair warning to the OP, though, using the full numeric range of hex colors might not work well across all browsers, and may result in colors that aren't useful for your use case (too dark, too light, not enough contrast with surrounding colors, etc).

jonmrich · Accepted Answer · 2015-02-02 13:21:25Z

0

Finally got it all (including my bonus question). Of note, occasionally, this random color generator creates a HEX with 5 characters that's invalid, but I can't quite figure out why, so I had to go through each one by hand to find them, but not a big issue for my challenge.

for (rep = 1; rep <= 800; rep++) {
  var color = Math.floor(Math.random()*16777215).toString(16);
  if (rep < 10)  {
    document.write('#mydiv[territory="T00' + rep + '"] {<br> polygon-fill:#' +color+';<br>}<br>');
  }
  if (rep >=10 && rep <100)
  {
    document.write('#mydiv[territory="T0' + rep + '"] {<br> polygon-fill:#' +color+';<br>}<br>');
}
if (rep >= 100)  {
    document.write('#mydiv[territory="T' + rep + '"] {<br> polygon-fill:#' +color+';<br>}<br>');
}
}

answered Feb 2, 2015 at 13:21

jonmrich

4,3738 gold badges52 silver badges96 bronze badges

4 Comments

Rauli Rajande Over a year ago

To avoid 5 letter colours you can use for colour: ('00000'+Math.random().toString(16).replace('.', '')).slice(-6) and for on line 4 similarily ('00' + rep).slice(-3)

Rauli Rajande Over a year ago

PS Instead "for on line 4" read "for rep on line 4" and you dont need if's after that.

jonmrich Over a year ago

@RauliRajande Not quite following what you're suggesting here.

Rauli Rajande Over a year ago

To avoid shorter strings, add zeros to the beginning of the string/number and then cut last n characters from it. This way you don't have to put three ifs there just to check "rep" length and no worries about 5 letter colour codes.

Collectives™ on Stack Overflow

Script to generate CSS properties with random colors

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related