Ned's Synaesthesia

index.html

<link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

<style>
  body {
    background: #c6c6c6;
  }
  .synesthesia {
    max-width: 720px;
    margin: 40px auto 0;
  }
    .text-in {
      width: 100%;
      height: 200px;
      font-size: 16px;
      font-family: Menlo, Monaco, monospace;
    }
    .colors-out {
      min-height: 100px;
      font-family: Chewy, serif;
      font-size: 45px;
      margin-bottom: 75px;
    }
</style>

<div class="synesthesia">

  <div id="colors-out" class="colors-out"></div>
  
  <textarea id="text-in" class="text-in"></textarea>

</div>

<script>
  var nedColors = {
    'A': '#1055B5',
    'B': '#F7E40C',
    'C': '#4B536E',
    'D': '#4d3019',
    'E': '#9CF52A',
    'F': '#FFB8FE',
    'G': '#720909',
    'H': '#515255',
    'I': '#FFFFFF',
    'J': '#ffb83d',
    'K': '#e8ca6f',
    'L': '#FFFFFF',
    'M': '#c21e57',
    'N': '#d51616',
    'O': '#000000',
    'P': '#ce49d5',
    'Q': '#820D0D',
    'R': '#E36E20',
    'S': '#FFFF00',
    'T': '#FFFFFF',
    'U': '#1B4D16',
    'V': '#6ECC37',
    'W': '#610707',
    'X': '#e8ca6f',
    'Y': '#128008',
    'Z': '#e8ca6f',
    '0': '#000000',
    '1': '#FFFFFF',
    '2': '#10821D',
    '3': '#f69125',
    '4': '#4d3019',
    '5': '#FFB8FE',
    '6': '#E6FF05',
    '7': '#FFFF00',
    '8': '#4d3019',
    '9': '#a427ab'
  };

  var area = document.getElementById('text-in');
  var display = document.getElementById('colors-out');

  area.addEventListener('keyup', function() {
    var input = area.value;

    var letters = input.split('');
    var spans = [];
    for (var i = 0; i < letters.length; i++) {
      var letter = letters[i];
      var color = nedColors[letter.toUpperCase()];
      if (color) {
        spans.push('<span style="color:' + color + '">' + letter + '</span>');
      } else {
        spans.push(letter);
      }
    }

    var output = spans.join('');
    display.innerHTML = output;
  });
</script>