Skip to content

Instantly share code, notes, and snippets.

@jashkenas
Last active Aug 29, 2015
Embed
What would you like to do?
Ned's Synaesthesia
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment