Choose random color pallet from the list on page load

user_12148410 0
Viewed 1448

Need some help with Javascript.

Description: there are 3 different color combinations (pallets). Every combination has 3 colors.

Goal: randomly choose color combination on page load and change elements like: background-color, font-color, underline-color.

Problem: can't figure out how to make it for color combination, but not a 1 color like in code example below.

Example:

  • Pallet-1: red, blue, green
  • Pallet-2: yellow, cyan, orange

  • Pallet-3: cyan, orange, blue

    1. Script randomly choosing Pallet-2.
    2. Change background-color to yellow, font-color to cyan, border-color to orange.

Sorry if it's too simple, but I spent a day and found a solution for random color pick of 1 color only from the list, but can't make it work with color combinations.

Thanks in advance.

JS:

$(document).ready(function(){ 
  var colors = ['red','blue','green','yellow','cyan','orange'];
  var new_color = colors[Math.floor(Math.random()*colors.length)];
  $('#color-div').css('background-color',new_color);
});

CSS:

#color-div{
  border:1px solid gray;
  width:50px;
  height:50px;
}

HTML:

<div id="container">
  <div id="color-div">
  </div>
</div>

Fiddle

css html javascript
3 Answers

Updated answer after clarification (picking a random colour set):

$(document).ready(function() {
  var palettes = [
    ['red', 'blue', 'green'],
    ['yellow', 'cyan', 'orange'],
    ['cyan', 'orange', 'blue']
  ];
  var randomPalette = palettes[Math.floor(Math.random() * palettes.length)];
  
  var new_bgcolor = randomPalette[0];
  var new_textcolor = randomPalette[1];
  var new_bordercolor = randomPalette[2];

  $('#color-div').css({
    'background-color': new_bgcolor,
    'color': new_textcolor,
    'border-color': new_bordercolor
  });
});
#color-div {
  border: 1px solid gray;
  width: 50px;
  height: 50px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="color-div">
    test
  </div>
</div>

Old answer before the clarification (picking three random but unique colours):

You have to remove the randomly selected colour from the array of colours before picking the next one. You can do so by using Array.prototype.splice().

As there is no css property for text underline colour, I changed the border colour in this example.

$(document).ready(function() {
  var colors = ['red', 'blue', 'green', 'yellow', 'cyan', 'orange'];
  var new_bgcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
  var new_textcolor = colors.splice(Math.floor(Math.random() * colors.length), 1);
  var new_bordercolor = colors.splice(Math.floor(Math.random() * colors.length), 1);

  $('#color-div').css({
    'background-color': new_bgcolor,
    'color': new_textcolor,
    'border-color': new_bordercolor
  });
});
#color-div {
  border: 1px solid gray;
  width: 50px;
  height: 50px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="color-div">
    test
  </div>
</div>

user_9958000

Gonna leave this just in case somebody wants the code without jQuery

window.onload = () => {

  const palettes = [
    ["red", "blue", "green"],
    ["yellow", "cyan", "orange"],
    ["cyan", "orange", "blue"]
  ];
  const randomPalette =
    palettes[Math.floor(Math.random() * palettes.length)];

  let bgColor = randomPalette[0];
  let textColor = randomPalette[1];
  let borderColor = randomPalette[2];

  const div = document.getElementById("color-div").style;

  div.backgroundColor = bgColor;
  div.borderColor = borderColor;
  div.color = textColor;
};
user_112853950

Perhaps you can do something like this:

var colors = ['red','blue','green','yellow','cyan','orange'];
var getRandomColor = () => colors[Math.floor(Math.random()*colors.length)];
var color1 = getRandomColor(); 
var color2 = getRandomColor());
var color3 = getRandomColor();
$(document).ready(function(){ 
  $('#color-div-1').css('background-color', color1);
  $('#color-div-2').css('background-color', color2);
  // etc...
}

and your HTML would contain these new classes of course:

<div id="container">
  <div id="color-div-1" />
  <div id="color-div-2" />
</div>
user_36485240
Related