I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors.
Below is the snippet of my code:
$(document).ready(function() {
let y = new Array(20);
let x = new Array(29);
let colors = Array.of('red','green','orange','pink','purple');
let xCoordinate = 20
for (let block of x) {
let randomColor = colors[Math.floor(Math.random() * colors.length)];
let gridBlock = $(`<div class='blockattribute' style=left:${xCoordinate}px></div>`);
gridBlock.addClass('topcoordinate');
gridBlock.css(`{background-color:${randomColor}}`);
$('#colorgrid').append(gridBlock);
xCoordinate += 20;
}
});
The issue lies in this part of the code gridBlock.css({background-color:${randomColor}});. It seems not to be setting the color as intended. Could someone point out what I might be missing here?