JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<h1><span class=m>A</span><span class=r>a</span><span class=o>a</span><span class=y>a</span><span class=d>h</span><span class=v>s </span><span class=t>A</span><span class=m>n</span><span class=r>g</span><span class=o>e</span><span class=y>l</span><span class=d>s </span><span class=v>(</span><span class=t>A</span><span class=m>a</span><span class=r>A</span><span class=o>)</span> <sup>color generator (with &lt;3)</sup></h1>

<div>
  <input type=checkbox id=random  /> Aléatoire
</div>
<input type=text name=colorme id=colorme value placeholder="Texte here" />

<pre><code id=multicolor></code></pre>

CSS

sup {
  font-size: 10px;  
}
.m {
  color: magenta;
}

.r {
  color: red;
}

.o {
  color: orange;
}

.y { color: yellow;}
.d { color: green; }
.v { color: turquoise; }
.t { color: blue; }

JavaScript

var colorme = document.getElementById('colorme'),
  multicolor = document.getElementById('multicolor'),
  colors = 'm,r,o,y,d,v,t'.split(','),
  randomEl = document.getElementById('random');

function balise(c) {
  return '&lt;' + c + '&gt;';
}
colorme.addEventListener('keyup', function() {
  var value = colorme.value,
  	random = !!randomEl.checked,
    valueLength = value.length,
    colorLength = colors.length,
    index = 0,
    num = 0,
    result = '';

  for (var i = 0; i < valueLength; i++) {
    if (value.charAt(i) !== ' ') {
      num = random ? Math.floor(Math.random() * colorLength) : index % colorLength;
      result += balise(colors[num]);
      index++;
    }
    result += value.charAt(i);
  }

  if (result.length) {
    result += balise('n');
  }

  multicolor.innerHTML = result;
});