JSFiddle - React, Tailwind, and code Playground
JavaScript
/**
* ******************************************************************************************
* Shuffle and re-render the 5 generated colors
* ******************************************************************************************
*/
function shuffleAndRenderColors() {
// Create a copy of the colors array
let shuffledColorsArray = [...colorsArray];
// Shuffle the copied array
for (let i = shuffledColorsArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledColorsArray[i], shuffledColorsArray[j]] = [
shuffledColorsArray[j],
shuffledColorsArray[i],
];
}
// Display them again to the generated colors
addColorsToDom(shuffledColorsArray);
// Update the generatedColorBlocks array
generatedColorBlocks = Array.from($generatedColors.children);
return shuffledColorsArray;
}
// Shuffle the colors array and display them
colorsArray = shuffleAndRenderColors();