Question

I would like to randomize three arrays for fonts, font size, font weight.
I then need to display the results of the three arrays in a div, with a class name of randomFont.
So each time I use the class randomFont, it will return a random font/size/weight.

Any ideas on how I would go about doing this?

Let’s say I have 3 variables in each array.

• array 1 (fonts) > font 1, font 2, font 3
• array 2 (font weight) > bold, light, 100
• array 3 (font-size) > 12px, 24px, 100px

Then I want an an array to randomly choose one from each and display the output in a div>class called randomFont.

How would I do this?

Answer 1

You can see one approach at http://jsfiddle.net/CrossEye/bwsvy/

var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana'];
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];

var choose = function(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
};

// ...
var text = choose(sizes) + ' ' + choose(weights) + ' '  +  choose(fonts);
output.innerHTML = '<div class="randomFont">' + text + '</div>';
// e.g. '24px bold Tahoma'