how much qwerty terrible
by gaby de wilde
HTML
<div id="config">
set character temprature:<span id="tempra"></span> <input id="colinc" type="range" name="points" value="2600" min="0" max="10000" style="width:540px">
</div>
<table id="row1"><tr><td>~<br>`</td><td>!<br>1</td><td>@<br>2</td><td>#<br>3</td><td>$<br>4</td><td>%<br>5</td><td>^<br>6</td><td>&<br>7</td><td>*<br>8</td><td>(<br>9</td><td>)<br>0</td><td>_<br>-</td><td>+<br>=</td><td>backspace<br>«-</td></table>
<table id="row2"><tr><td id="tab">tab</td><td>Q</td><td>W</td><td>E</td><td>R</td><td>T</td><td>Y</td><td>U</td><td>I</td><td>O</td><td>P</td><td>{<br><span id="leftSquareBracket">[</span></td><td>}<br>]</td><td id="pipe">|<br>\</td></tr></table>
<table id="row3"><tr><td id="capsLock">Caps<br>Lock</td><td>A</td><td>S</td><td>D</td><td>F</td><td>G</td><td>H</td><td>J</td><td>K</td><td>L</td><td>:<br>;</td><td>"<br>'</td><td id="enter">Enter<br></td></tr></table>
<table id="row4"><tr><td id="leftShift">Shift</td><td>Z</td><td>X</td><td>C</td><td>V</td><td>B</td><td>N</td><td>M</td><td><<br>,</td><td>><br>.</td><td>?<br>/</td><td id="rightShift">Shift</td></tr></table>
<table id="row5"><tr><td id="leftCtrl">Ctrl</td><td id="leftPow"></td><td id="leftAlt">Alt</td><td id="spaceBar">Space</td><td id="rightAlt">Alt</td><td id="rightPow"></td><td id="rightCtrl">Ctrl</td></tr></table>
Insert your code or text here
<textarea name="codewords" id="codewords" cols="82" rows="10" ondblclick="this.value=''">
body{background:white;font-size:14px}
table{width:560px}
td{border:2px black solid;min-width:24px;height:40px;padding:3px;background-color:#ffffff}
#tab{width:44px}
#leftSquareBracket{margin-left:2px}
#pipe{width:44px}
#enter{width:60px}
#capsLock{width:64px}
#leftShift{width:82px;}
#rightShift{width:78px}
#leftCtrl{width:45px}
#leftPow{width:39px;}
#leftAlt{width:39px}
/*#spaceBar{width:190px}*/
#rightAlt{width:39px}
#rightPow{width:39px}
#rightCtrl{width:45px}
#message{background:orange;border:2px red...
CSS
body{background:white;font-size:14px}
table{width:560px}
td{border:2px black solid;min-width:24px;height:40px;padding:3px;background-color:#ffffff}
#tab{width:44px}
#leftSquareBracket{margin-left:2px}
#pipe{width:44px}
#enter{width:60px}
#capsLock{width:64px}
#leftShift{width:82px;}
#rightShift{width:78px}
#leftCtrl{width:45px}
#leftPow{width:39px;}
#leftAlt{width:39px}
/*#spaceBar{width:190px}*/
#rightAlt{width:39px}
#rightPow{width:39px}
#rightCtrl{width:45px}
#message{background:orange;border:2px red solid;color:red;width:560px;margin-top:20px;padding:5px;}
#config{text-align:center;width:560px;border:1px solid #666;margin-top:20px}
JavaScript
// define the tabs here
var tabDefinition = " ";
var row1clear = "`1234567890-= ".split('');
var row1shiftL = "~!@#$%".split('');
var row1shiftR = "^&*()_+ ".split('');
var row2clear = " qwertyuiop[]\ ".split('');
var row2shiftL = " QWERT".split('');
var row2shiftR = "YUIOP{}|".split('');
var row3clear = " asdfghjkl;' ".split('');
var row3shiftL = ' ASDFG" '.split('');
var row3shiftR = 'HJKL:" '.split('');
var row4clear = " zxcvbnm,./ ".split('');
var row4shiftL = " ZXCVB".split('');
var row4shiftR = "NM<>? ".split('');
//var row5clear = " ".split('');
//var row5shift = " ".split('');
var row1 = document.getElementById('row1').getElementsByTagName('td');
var row2 = document.getElementById('row2').getElementsByTagName('td');
var row3 = document.getElementById('row3').getElementsByTagName('td');
var row4 = document.getElementById('row4').getElementsByTagName('td');
var row5 = document.getElementById('row5').getElementsByTagName('td');
function getTdByCharacter(character){
switch(character){
case "tab" : return [row2[0]];
case "enter" : return [row3[12]];
case "shift" : return [row4[0],row4[11]];
case "<" : return [row4[8]];
case ">" : return [row4[9]];
case "ctrl" : return [row5[0],row5[6]];
case "pow" : return [row5[1],row5[5]];
case "alt" : return [row5[2],row5[4]];
case " " : return [row5[3]];
}
if(row1clear.indexOf(character)!=-1){return [row1[row1clear.indexOf(character)]] }
if(row1shiftL.indexOf(character)!=-1){return [row1[row1shiftL.indexOf(character)],row4[11]] }
if(row1shiftR.indexOf(character)!=-1){return [row1[6+row1shiftR.indexOf(character)],row4[0]] }
if(row2clear.indexOf(character)!=-1){return [row2[row2clear.indexOf(character)]] }
if(row2shiftL.indexOf(character)!=-1){return [row2[row2shiftL.indexOf(character)],row4[11]] }
if(row2shiftR.indexOf(character)!=-1){return [row2[6+row2shiftR.indexOf(character)],row4[0]] }
if(row3clear.indexOf(character)!=-1){return...