How to pick a random color with vanilla JS
Today, we’re going to look at how to pick a random color from a set of options.
Getting started
For this to work, you need to…
- Create an array of colors.
- Shuffle the array.
- Grab the first item from the now-shuffled array and set your elements background-color to it.
Let’s get started by creating a randomColor() function.
var randomColor = function () {
// Pick a random color...
};
Picking the color
First, let’s create an array of color options.
var randomColor = function () {
// The available colors
var colors = ['blue', 'red', 'yellow', 'orange', 'green', 'rebeccapurple'];
};
Next, we need to shuffle the array of colors. There’s no native JavaScript method for that, but I wrote a helper function for that. And here’s my article explaining how it works.
Once we add that to the code, we can shuffle our array.
var shuffle = function (arr) {
// The helper function code...
// Condensed for space
};
var randomColor = function () {
// The available colors
var colors = ['blue', 'red', 'yellow', 'orange', 'green', 'rebeccapurple'];
// Shuffle the colors
shuffle(colors);
};
Finally, we can return the first color from the now shuffled list.
var randomColor = function () {
// The available colors
var colors = ['blue', 'red', 'yellow', 'orange', 'green', 'rebeccapurple'];
// Shuffle the colors
shuffle(colors);
// Grab the first one
return colors[0];
};