JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<div id="div_content">
  <span style="font-weight:bold;">Step 1:</span> Enter your text:<br /><br />
  <textarea id="input_text" rows="5" cols="50">12345679</textarea>
  <br /><br /><span style="font-weight:bold;">Step 3:</span> Choose the colors:
  <br /><br />
  <div>
    Start color:
    <input id="input_start" class='color {hash:true,caps:true}' value='#55BF3B'>
    <br />Middle color:
    <input id="input_middle" class='color {hash:true,caps:true}' value='#DDDF0D'>
    <br />End color:
    <input id="input_end" class='color {hash:true,caps:true}' value='#DF5353'>
  </div>
  <span style="font-weight:bold;">Step 5:</span> Preview and get code:
  <br /><br />
  <div id="div_preview"></div>
  <textarea id="div_source"></textarea>
</div>

JavaScript

// Text Colorizer by David at stuffbydavid.com, 2011
// Really old code ahead!

function cutHex(h) {
  return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}

function hexToR(h) {
  return parseInt((cutHex(h)).substring(0, 2), 16)
}

function hexToG(h) {
  return parseInt((cutHex(h)).substring(2, 4), 16)
}

function hexToB(h) {
  return parseInt((cutHex(h)).substring(4, 6), 16)
}

function rgbToHex(R, G, B) {
  return toHex(R) + toHex(G) + toHex(B)
}

function toHex(n) {
  n = parseInt(n, 10);
  if (isNaN(n)) return "00";
  n = Math.max(0, Math.min(n, 255));
  return "0123456789ABCDEF".charAt((n - n % 16) / 16) +
    "0123456789ABCDEF".charAt(n % 16);
}

input_start = ""
input_middle = ""
input_end = ""
input_text = ""

function textcolorizer_handle() {

  input_text = document.getElementById("input_text").value;
  input_start = document.getElementById("input_start").value;
  input_middle = document.getElementById("input_middle").value;
  input_end = document.getElementById("input_end").value;


  str_html = "";

  var a, r, g, b, rinc, ginc, binc, ccol;
  r = hexToR(input_start);
  g = hexToG(input_start)
  b = hexToB(input_start)
  rinc = (hexToR(input_middle) - r) / Math.floor(input_text.length / 2)
  ginc = (hexToG(input_middle) - g) / Math.floor(input_text.length / 2)
  binc = (hexToB(input_middle) - b) / Math.floor(input_text.length / 2)
  var r2, g2, b2, rinc2, ginc2, binc2;
  r2 = hexToR(input_middle)
  g2 = hexToG(input_middle)
  b2 = hexToB(input_middle)
  rinc2 = (hexToR(input_end) - r2) / Math.floor(input_text.length / 2)
  ginc2 = (hexToG(input_end) - g2) / Math.floor(input_text.length / 2)
  binc2 = (hexToB(input_end) - b2) / Math.floor(input_text.length / 2)
  
  // console.log(r, g, b, rinc, ginc, binc);
  // console.log(r2, g2, b2, rinc2, ginc2, binc);
  
  for (a = 0; a < input_text.length; a++) {
    ccol = rgbToHex(r, g, b);
    str_html += "<span style='color:#" + ccol + ";'>" + input_text.charAt(a) + "</span>";
    if (a <...