how to change multiple squares color all in once?-CodePudding

so i want to change 6 squares colors all in once and each with a diff color,

    function randomNum() {
        return Math.floor(Math.random() * 256);
}
function randomRGB() {
    var red = randomNum();
    var green = randomNum();
    var blue = randomNum();
    return [red,green,blue];
}

I have this JavaScript code that generates random RGB colors values, how can I make it that each square gets a random color each time I refresh, I can do it with 6 lines of code, but I'm trying to learn easier ways to code, if anyone can do it in a simpler code, I would be grateful!

thank u in advance

[1] https://i.stack.imgur.com/Zx7f6.png

CodePudding user response：

Your current code is reasonably short and quite readable. Consider sticking with it.

Alternatives include

Using (and immediately returning) Array.from with randomNum as a mapper function to construct an array with 3 random values
Using arrow functions for concise return

const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);

console.log(randomRGB());

If you want to do this 6 times, then you might use another Array.from.

const randomNum = () => Math.floor(Math.random() * 256);
const randomRGB = () => Array.from({ length: 3 }, randomNum);
const randomSquares = numSquares => Array.from({ length: numSquares }, randomRGB);

console.log(randomSquares(6));

CodePudding user response：

You can simply grid a six digit hexadecimal number and then use them for your color. Like the following number for example: #ffffff (which is white)

function random hexColor() {
   return ((Math.random() * 0xfffff * 1000000).toString(16)).slice(0,6);
}

CodePudding user response：

A simple approach: use the hsl() color function and generate a random Hue color (from 0 to 360)

const rand = (min, max) => ~~(Math.random() * (max - min)   min);

document.querySelectorAll(".grid > div").forEach(elBox => {
  elBox.style.background = `hsl(${rand(0, 360)}, 100%, 50%)`;
});

.grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid > * {
  margin: 0.5rem;
  height: 3rem;
  width: 3rem;
}

<div >
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>

The nice thing about it is that you only change the Hue (color), but the saturation and lightness remain the same for all your elements.

Example with desaturated, darker colors:

const rand = (min, max) => ~~(Math.random() * (max - min)   min);

document.querySelectorAll(".grid > div").forEach(elBox => {
  elBox.style.background = `hsl(${rand(0, 360)}, 70%, 30%)`;
});

.grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid > * {
  margin: 0.5rem;
  height: 3rem;
  width: 3rem;
}

<div >
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>

Eventually you can generate also a random value in range for the Lightness and Saturation (0 to 100 %)