Skip to content

Instantly share code, notes, and snippets.

@sheminanto
Last active November 24, 2022 10:21
Show Gist options
  • Save sheminanto/2a547e7ae30d064be53e4e087e291fe6 to your computer and use it in GitHub Desktop.
Save sheminanto/2a547e7ae30d064be53e4e087e291fe6 to your computer and use it in GitHub Desktop.
Generate random colours for status's
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="status">currentStatus</div>
<script>
const statusElement = document.getElementById("status");
const assignedStatusColors = {};
const getStatusColor = (status) => {
if (assignedStatusColors.hasOwnProperty(status))
return assignedStatusColors[status];
assignedStatusColors[status] =
generateUniqueRgbColor(assignedStatusColors);
return assignedStatusColors[status];
};
const generateRandomInteger = (max) =>
Math.floor(Math.random() * (max + 1));
const generateUniqueRgbColor = (assignedColors) => {
const red = generateRandomInteger(255);
const green = generateRandomInteger(255);
const blue = generateRandomInteger(255);
const color = `rgb(${red}, ${green}, ${blue})`;
if (Object.values(assignedColors).includes(color))
return generateUniqueRgbColor(assignedColors);
else return color;
};
statusElement.style.color = getStatusColor("shipped");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment