CODEWITHSUNDEEP
javascripthtmlcss
Chto Stoic
Chto Stoic

Reputation: 43

Choose random color pallet from the list on page load

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:

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

Upvotes: 4

Views: 2473

Answers (3)

Altair312
Altair312

Reputation: 348

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;
};

Upvotes: 3

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

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>

Upvotes: 3

collardeau
collardeau

Reputation: 820

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>

Upvotes: 0

Related Questions