Using a combination of JQuery, HTML, and CSS, create a unique set of random colors for each box simultaneously

Question

Using a combination of JQuery, HTML, and CSS, create a unique set of random colors for each box simultaneously

Seeking assistance in individually changing the color of each square element that is generated one at a time in a row of five, with an id="square" tag. When I click the clickMe() function, I want each square to randomly change color. However, currently only one square changes while the rest remain unchanged after being created. Initial attempt using square as a class led all squares to change colors simultaneously.

Can someone guide me on how to assign a random color to each square separately when the clickMe() function is triggered? For instance, if I have one square and click the button, it should generate a random color for that particular square. Similarly, when two or more squares are present and the button is clicked, each square should receive a different random color simultaneously. This behavior should continue for every additional square cloned using the cloneMe() button.

Thus far, I've encountered issues where only one square can be changed after cloning, or all squares change together (when using a .class element) in synchronization.

View JQuery/JavaScript code

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];

function clickMe(){
var randomize = Math.floor(Math.random()*myColors.length);
$("#square").css("background-color", myColors[randomize]);
}

function cloneMe(){      
    $(document).ready(function(){
        $("#square").clone().appendTo('.orange-square-container');  
        clickMe();
});

View HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>Random Colors!</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="app.js"></script>

<div class="btn-alt-container">
  <a class="btn btn1-alt" onclick='clickMe()'>Push Me</a>
  <div class="btn btn2-alt" onclick='cloneMe()'>Make More</div>
</div>

<div class="container" 
></div>

<div class="orange-square-container">
  <div id="square"> 
         <div class="content">
           Hack Reactor's Awesome :)
         </div>
  </div>
</div>

</body>
</html>enter code here

Preview of the code in browser

Grateful for any advice provided here. Hoping to find solutions to coding challenges without hesitation in the future.

javascript jquery html css

Answer 1

Answer №1

Here is the solution you are looking for:

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];
function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });
}

function cloneMe() {
  $(document).ready(function() {
    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();
  });
}

It's important to note that within your clickMe function, ensure that you have updated $("#square") to $(".square"). I've also adjusted the placement of the randomize variable inside the .each function.

Check out this demo:

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];

function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });

}

function cloneMe() {
  $(document).ready(function() {

    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-alt-container">
  <a class="btn btn1-alt" onclick='clickMe()'>Click Me</a>
  <div class="btn btn2-alt" onclick='cloneMe()'>Clone More</div>
</div>

<div class="container"></div>

<div class="orange-square-container">
  <div class="square">
    <div class="content">
      The Best Coding Experience :)
    </div>
  </div>
</div>

Answer 2

Here is the solution you are looking for:

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];
function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });
}

function cloneMe() {
  $(document).ready(function() {
    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();
  });
}

It's important to note that within your clickMe function, ensure that you have updated $("#square") to $(".square"). I've also adjusted the placement of the randomize variable inside the .each function.

Check out this demo:

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];

function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });

}

function cloneMe() {
  $(document).ready(function() {

    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-alt-container">
  <a class="btn btn1-alt" onclick='clickMe()'>Click Me</a>
  <div class="btn btn2-alt" onclick='cloneMe()'>Clone More</div>
</div>

<div class="container"></div>

<div class="orange-square-container">
  <div class="square">
    <div class="content">
      The Best Coding Experience :)
    </div>
  </div>
</div>

Answer 3

Answer №2

An illustration of how random colors can be assigned to squares using classes rather than IDs.

const colors = ["green", "blue", "red", "yellow", "orange", "pink", "purple"];
const button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {
  /* Convert the HTMLCollection into an array with the spread operator */
  const squares = [...document.getElementsByClassName("square")];
  /* Assign a random background color to each square */
    squares.map( square => {
      const randomize = Math.floor(Math.random()*colors.length);
      square.style.backgroundColor = colors[randomize]; 
    });
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.square {
  width: 20%;
}

<button>Click</button>
<div class="container">
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
</div>

Answer 4

An illustration of how random colors can be assigned to squares using classes rather than IDs.

const colors = ["green", "blue", "red", "yellow", "orange", "pink", "purple"];
const button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {
  /* Convert the HTMLCollection into an array with the spread operator */
  const squares = [...document.getElementsByClassName("square")];
  /* Assign a random background color to each square */
    squares.map( square => {
      const randomize = Math.floor(Math.random()*colors.length);
      square.style.backgroundColor = colors[randomize]; 
    });
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.square {
  width: 20%;
}

<button>Click</button>
<div class="container">
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
</div>

Answer 5

Answer №3

Kindly test the code snippet below

<style>
.orange-square-container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 760px;
}
#square {
  flex: 0 1 20%;
  height: 152px;
}
.btn-alt-container {
  display: flex;
  justify-content: center;
}
.btn-alt-container .btn {
  border: 2px solid purple;
  border-radius: 4px;
  padding: 10px;
  display: table;
  margin:20px 5px;
  cursor: pointer;
}
</style>

Answer 6

Kindly test the code snippet below

<style>
.orange-square-container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 760px;
}
#square {
  flex: 0 1 20%;
  height: 152px;
}
.btn-alt-container {
  display: flex;
  justify-content: center;
}
.btn-alt-container .btn {
  border: 2px solid purple;
  border-radius: 4px;
  padding: 10px;
  display: table;
  margin:20px 5px;
  cursor: pointer;
}
</style>

Using a combination of JQuery, HTML, and CSS, create a unique set of random colors for each box simultaneously

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

I am encountering difficulties with hosting a project that was created using Next.js

Send an HTML form using Django and Ajax for submission

Eliminate the unnecessary blank page from the print preview by incorporating a setTimeout function to efficiently showcase the image

Vuejs dropdown selections are not working as expected due to a bug

Removing a hyperlink and adding a class to a unordered list generated in JavaScript - here's how!

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Experiencing issues with Mvc Ajax form when trying to upload a file and encountering an

Use Node-RED to fetch JSON or CSV data and store it in InfluxDB

Is it possible for you to execute 2 procedures consecutively simply by clicking on a button?

"Learn how to dynamically update the value of a text box using a loop in jQuery when the

Having trouble with a Parsing Syntax Error related to "Export Default" in React Native Typescript?

What steps can I take to address the issue of missing modules in an Angular application?

Tips for effectively showcasing a span class field

Ways to transform a group of strings into an array of separate strings

Solving the issue of "_c is not defined" error in Vue functional component

Element misbehaving after a certain point

Display the console.log output of NodeJs on an HTML webpage

The accuracy of Google Maps is compromised when the width is expanded

Ways to implement collapsible functionality into table rows