sample image

how can I set many different colors in the card background like this picture? I use html, css, js, react js...please help me

CodePudding user response：

The easiest way is that you create an array of colors. ex

const colors = ['red', 'blue'];

Then for each card, you can select a color randomly from the colors array and set it as background color via inline-style. A simple version:

const colors = ["red", "blue"];

// pick random color from colors
const randomColor = colors[Math.floor(Math.random() * colors.length)];

// set background color to random color

<div style={{
    backgroundColor: randomColor
}}>
    
</div>

CodePudding user response：

export default function App() {
  const colors = ["blue", "red", "brown", "black", "yellow"];
  return (
    <div className="App">
      <div style={{ display: "flex" }}>
        {colors.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                height: "100px",
                width: "100px",
                backgroundColor: item,
                marginLeft: "10px"
              }}
            ></div>
          );
        })}
      </div>
    </div>
  );
}