JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div>
  <div class="icon" data-ssn="1302841221">
    A
  </div>
  <div class="icon" data-ssn="0508095171">
    B
  </div>
  <div class="icon" data-ssn="0706126201">
    C
  </div>
</div>

CSS

.icon {
  height: 30px;
  width: 30px;
  background: black;
  border-radius: 50%;
}

JavaScript

function reverseString(text) {
	return text.split("").reverse().join("")
}

function mapValue(value) {
  // Convert string input to numbers
  const inputMin = parseInt(reverseString("0101000000"), 10);
  const inputMax = parseInt(reverseString("3112999990"), 10);
  const outputMin = 0;
  const outputMax = 360;

  // Convert the current value to a number
  const numValue = parseInt(value, 10);

  // Ensure the value is within the input range
  if (numValue < inputMin || numValue > inputMax) {
    throw new Error('Value out of range');
  }

  // Apply the mapping formula
  return ((numValue - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
}

const $elms = document.querySelectorAll(".icon");

[...$elms].forEach(($elm) => {
	const ssn = parseInt(reverseString($elm.dataset.ssn), 10);

  // Example usage
  const mappedValue = mapValue(ssn); // Replace "0151515151" with your actual value
  
  console.log({ mappedValue })

	$elm.style.background = `hsl(${mappedValue}, 60%, 50%)`;
})