Randomize color pairs onclick (CSS, JavaScript)

Question

There is a button on my website that should change the page's background color and the headline text color onclick (simultaneously). What makes it more complex is that the possible color pairs (BG + headline) should be pre-determined, but the pairs themself should be randomized, so each time you click the button you randomly get one of the possible color pairs. Also one should not get the same color pair twice in a row.

How do I do that?

Avoid asking how to questions.

Amini
– Amini

2021-08-03 11:35:10 +00:00
Commented Aug 3, 2021 at 11:35 — Amini
– Amini, Commented Aug 3, 2021 at 11:35

AtanasB · Accepted Answer · 2021-08-04 08:31:33Z

Boilerplate 1

Create a 2D array with the possible combinations of colors E.g. [[red,orange],[pink,purple]]
Choose one randomly with array[Math.floor(Math.random()*array.length)]
Extract the data from the given index by either taking the 0th or 1st item [RandomIndex][0] [RandomIndex][1]`
Append the values to the html elements with document.getElementById(id).style.property = new style
Remove the items from the array or create a new one where you append the already used items and compare using .filter()

Boilerplate 2

Create a 2D array
Create a new array that is equal to the first one, which would hold our avaible for use pairs
If there are items within the avaible pairs array, choose one
Update the avaible items by removing the select pair
Get the colors from the pair and append them to the html

Code

let colorpairs = [
  ["#D49F14", "#FAA555"],
  ["#591647", "#C5008E"],
  ["#BFB41B", "#02733E"]
];
let avaiblePairs = colorpairs
const ChangeColors = () => {
  if (avaiblePairs.length) {
    let colorsChosen =
    avaiblePairs[Math.floor(Math.random() * colorpairs.length)];
    avaiblePairs = avaiblePairs.filter((e) => e !== colorsChosen);
    document.querySelector("#AG").style.color = colorsChosen[0];
    document.querySelector("body").style.backgroundColor = colorsChosen[1];
  } else {
    return "No avaible pairs of colors avaible";
  }
};

body {
  background: rgba(175, 159, 12, 1);
}

.whole {
  margin: 0 auto;
}

.top {
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 46px;
  margin-bottom: 179px;
  text-align: center;
}
h1 {
  margin: auto;
  font-family: Times New Roman;
  font-style: normal;
  font-weight: normal;
  font-size: 150px;
  line-height: 73px;
  text-align: center;
  letter-spacing: -0.1em;
  color: #C5008E;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.project {
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 0px;
  margin-bottom: 10px;
  border-top: 2px solid var(--black);
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

p {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 100%;
  width: 330px;
  letter-spacing: -0.05em;
  color: var(--black);
  margin-right: 51px;
  margin-top: 0;
  flex-basis: 20%
}

p.year {
  min-width: 40px;
  max-width: 100px;
  margin-right: 0px;
  flex-basis: 5%;
}

.slideshow {
  flex: 1;
}

.slideshow img{
  width: 800px;
  display: block;
  margin: auto;
}

.buttons-area {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.buttons {
  display: flex;
  gap: 67px;
  flex-direction: row;
}
.button {
  width: 288px;
  height: 93px;
  background: #C4C4C4;
  border: 1px solid var(--black);
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  text-align: center;
  padding-bottom: 5px;
  cursor: pointer;
}
h2 {
font-family: Times New Roman;
font-style: normal;
font-weight: normal;
font-size: 90px;
text-align: center;
letter-spacing: -0.1em;
color: var(--black);

margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

h2:hover {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

:root {
  --black: #232323;
}

<body>
  <div class="whole">
    <div class="top">
      <h1 id="AG">Andrei Gerasimov</h1>
    </div>

    <div class="project">
      <p><b>Visual identity for the Moscow Cosmist Museum</b> (Student project)<br><br>Moscow Cosmist Museum (MCM) is a fictional museum based on the philosophy of Russian cosmism. The cosmists were proto-avangardists: in XIX century they were writing about their goal to defeat nature and death. According to cosmists, a museum should become the main public institution in a society and a museum&rsquo;s aim should be the resurrection of the humanity&rsquo;s past.</p>
      <p class="year"><b>2020</b></p>
      <div class="slideshow">
        <img src="flag.jpg" style="width: 400px;">
      </div>
    </div>
    <div class="project">
      <p><b>Title</b><br><br>Text</p>
    </div>

    <div class="buttons-area">
      <div class="buttons">
        <div class="button"><h2>link</h2></div>
        <div onClick="ChangeColors()" class="button"><h2>click</h2></div>
      </div>
    </div>

  </div>
</body>

</html>

I'm a total newbie, so I got stuck pretty fast :) Here is the code: codepen.io/andreigerasimov/pen/wvdxjJx. I need the right button (with the text "click" in it) to change the colors of body background and of <h1>. I've added some color pairs in the JS array as an example, but I couldn't figure out how to follow your steps.
I am bit busy right now, so I am going to check the code later, but it seems that you got stuck getting the two pairs from the array on random. To implement the button, you need to wrap the js code in a function that would be called onClick. Regarding the select on random, check out this link:freecodecamp.org/news/… it implements a random quote generator, which is the first step in getting the items from the array. Google if you don't know how to do specific thing :)
I added the code, if you have found my answer useful, consider upvoting and approving it(helps me) and also brings the quality of the thread up

user15254140 · Accepted Answer · 2021-08-03 12:06:44Z

0

actually your question already gives the answer you want. the logic you have in describing the problem is correct, so it's just a matter of implementing it into a line of code. And based on the problems above, here are the results of my problem solving.

1. create a list of colors with an array

let color = ['red','green','blue','yellow','purple','pink','azure']

2. take the button element

const button = document.querySelector('.btn');

3. implement the logic when the button is clicked

button.addEventListener('click', () => {
  let pickRandomColorP = Math.floor(Math.random()*color.length);
  document.body.style.background = color[pickRandomColorP]
})

you could visit the working example via codepen in this link

answered Aug 3, 2021 at 12:06

user15254140

3 Comments

Andrei Over a year ago

As far as I understand, your solution works with pre-determined colors, but not with pre-determined color pairs.

Andrei Over a year ago

Here is my code codepen.io/andreigerasimov/pen/wvdxjJx. I need the right button (with the text "click" in it) to change the colors of body background and of <h1>. I've added some color pairs in the JS array as an example.

user15254140 Over a year ago

hallo @Andrei, i update my solution here codepen.io/nassardhi/pen/ZEKjrgv . the main idea are the same, you just need to manipulate DOM with button event, maybe you want to read this blog freecodecamp.org/news/how-to-manipulate-the-dom-beginners-guide

Collectives™ on Stack Overflow

Randomize color pairs onclick (CSS, JavaScript)

2 Answers 2

Boilerplate 1

Boilerplate 2

Code

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Boilerplate 1

Boilerplate 2

Code

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related