THE ‘WASD’ TEXT EDITOR
This is a simple text editor that allows you to type with just the WASD keys. It was used as an example of some basic Javascript functions and event handlers for students. I briefly considered adding a function to list your typing speed but I think this is already more than enough time that I want to spend on something silly. See if your PC video game skills translate into a faster WASD key typing speed! Try the WASD key text editor.
JAVASCRIPT CODE
<!DOCTYPE html>
<html>
<head>
<title>WASD Text Editor</title>
<style>
body {
background-color: #1013d4;
}
.container {
width: 1154px;
height: 700px;
overflow: hidden;
margin: auto;
}
#textWindow {
border: 2px solid black;
width: 850px;
height: 600px;
float:left;
overflow: hidden;
color: black;
font-size: 22px;
background-color: white;
padding: 10px;
box-shadow: 5px 5px black;
}
#keys {
background-color: #333333;
width: 240px;
height: 600px;
float:left;
padding: 10px;
box-shadow: 5px 5px black;
margin-right: 10px;
}
.dropdown-content {
position: absolute;
display: block;
}
#dropDownA {
margin-left: 62px;
}
#dropDownS {
margin-left: 124px;
}
#dropDownD {
margin-left: 186px;
}
.option {
font-size: 25px;
background-color: #eeeeff;
width: 50px;
height: 30px;
border: 2px solid black;
text-align: center;
margin-top:1px;
padding-top:1px;
padding-bottom:1px;
box-shadow: 2px 2px #777777;
}
#textInfo {
text-align: center;
font-size: 20px;
width: 1154px;
height: 86px;
overflow: hidden;
margin: auto;
border: 0px dashed black;
margin-bottom: 10px;
background-color: #59d0ee;
box-shadow: 5px 5px black;
}
#menu {
text-align: left;
font-size: 16px;
width: 1154px;
height: 20px;
overflow: hidden;
background-color: black;
color: white;
margin: auto;
border: 1px solid white;
margin-bottom: 10px;
padding: 3px;
font-weight: bold;
box-shadow: 5px 5px black;
}
h1, h2 {
margin: 3px;
letter-spacing: 3px;
font-size: 32px;
}
.yellowText {
margin: 0px 25px 0px 25px;
background-color: yellow;
box-shadow: 5px 5px black;
float: left;
padding: 5px;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<div id="menu"><center>--------------------------------------------------------------------------WELCOME--------------------------------------------------------------------------</center></div>
<div id="textInfo">
<h2>WASD TEXT EDITOR</h2>
<div class = "yellowText">CYCLE = [WASD KEYS]</div>
<div class = "yellowText">SELECT = [SHIFT]</div>
<div class = "yellowText">DELETE = [CTRL]</div>
<div class = "yellowText">SPACE = [SPACEBAR]</div>
<div class = "yellowText">NEW LINE = [ALT]</div>
</div>
<div class="container">
<div id="keys">
<div id="dropDownW" class="dropdown-content">
<div class='option' id='optionW1' style="background-color: black; color: white;">W</div>
<div class='option' id='optionW2'>X</div>
<div class='option' id='optionW3'>Y</div>
<div class='option' id='optionW4'>Z</div>
<div class='option' id='optionW5'>0</div>
<div class='option' id='optionW6'>1</div>
<div class='option' id='optionW7'>2</div>
<div class='option' id='optionW8'>3</div>
<div class='option' id='optionW9'>4</div>
<div class='option' id='optionW10'>5</div>
<div class='option' id='optionW11'>6</div>
<div class='option' id='optionW12'>7</div>
<div class='option' id='optionW13'>8</div>
<div class='option' id='optionW14'>9</div>
<div class='option' id='optionW15'><</div>
<div class='option' id='optionW16'>></div>
</div>
<div id="dropDownA" class="dropdown-content">
<div class='option' id='optionA1' style="background-color: black; color: white;">A</div>
<div class='option' id='optionA2'>B</div>
<div class='option' id='optionA3'>C</div>
<div class='option' id='optionA4'>!</div>
<div class='option' id='optionA5'>@</div>
<div class='option' id='optionA6'>#</div>
<div class='option' id='optionA7'>$</div>
<div class='option' id='optionA8'>%</div>
<div class='option' id='optionA9'>^</div>
<div class='option' id='optionA10'>&</div>
<div class='option' id='optionA11'>*</div>
<div class='option' id='optionA12'>(</div>
<div class='option' id='optionA13'>)</div>
<div class='option' id='optionA14'>-</div>
<div class='option' id='optionA15'>+</div>
<div class='option' id='optionA16'>=</div>
</div>
<div id="dropDownS" class="dropdown-content">
<div class='option' id='optionS1' style="background-color: black; color: white;">S</div>
<div class='option' id='optionS2'>T</div>
<div class='option' id='optionS3'>U</div>
<div class='option' id='optionS4'>V</div>
<div class='option' id='optionS5'>.</div>
<div class='option' id='optionS6'>?</div>
<div class='option' id='optionS7'>,</div>
<div class='option' id='optionS8'>'</div>
<div class='option' id='optionS9'>"</div>
<div class='option' id='optionS10'>;</div>
<div class='option' id='optionS11'>:</div>
<div class='option' id='optionS12'>[</div>
<div class='option' id='optionS13'>]</div>
<div class='option' id='optionS14'>{</div>
<div class='option' id='optionS15'>}</div>
<div class='option' id='optionS16'>/</div>
</div>
<div id="dropDownD" class="dropdown-content">
<div class='option' id='optionD1' style="background-color: black; color: white;">D</div>
<div class='option' id='optionD2'>E</div>
<div class='option' id='optionD3'>F</div>
<div class='option' id='optionD4'>G</div>
<div class='option' id='optionD5'>H</div>
<div class='option' id='optionD6'>I</div>
<div class='option' id='optionD7'>J</div>
<div class='option' id='optionD8'>K</div>
<div class='option' id='optionD9'>L</div>
<div class='option' id='optionD10'>M</div>
<div class='option' id='optionD11'>N</div>
<div class='option' id='optionD12'>O</div>
<div class='option' id='optionD13'>P</div>
<div class='option' id='optionD14'>Q</div>
<div class='option' id='optionD15'>R</div>
<div class='option' id='optionD16'>\</div>
</div>
</div>
<div id = "textWindow"></div>
</div>
<script>
document.addEventListener('keydown', function(e) {
if (e.key === 'w' || e.key === 'W')
getLetters('W');
else if (e.key === 'a' || e.key === 'A')
getLetters('A');
else if (e.key === 's' || e.key === 'S')
getLetters('S');
else if (e.key === 'd' || e.key === 'D')
getLetters('D');
else if (e.keyCode == 16)
typeLetter();
else if (e.keyCode == 17)
deleteKey();
else if (e.keyCode == 18)
enterKey();
else if (e.keyCode === 32)
document.getElementById('textWindow').innerHTML += ' ';
});
var pos=1;
var oldKey;
var oldColor;
function getLetters(key) {
// if they are pressing the same key, cycle to next letter
if (key == oldKey) {
var x = document.getElementById("option" + key + pos);
x.style.backgroundColor = oldColor;
pos++;
// if the next ID does not exist, go back to 1
if (document.getElementById("option" + key + pos) == null)
{
pos = 1;
}
}
else {
if (oldKey != null ) {
var x = document.getElementById("option" + oldKey + pos);
x.style.backgroundColor = oldColor;
}
pos = 1;
}
oldKey = key;
var x = document.getElementById("option" + key + pos);
oldColor = x.style.backgroundColor;
x.style.backgroundColor = "yellow";
}
function typeLetter() {
var letter = document.getElementById("option" + oldKey + pos).innerHTML;
document.getElementById("textWindow").innerHTML += letter;
document.getElementById("option" + oldKey + pos).style.backgroundColor = oldColor;
pos = 1;
oldKey = null;
}
function deleteKey() {
var text = document.getElementById("textWindow").innerHTML;
document.getElementById("textWindow").innerHTML = text.substring(0, text.length - 1);
}
function tabKey() {
document.getElementById("textWindow").innerHTML += "         ";
}
function enterKey() {
document.getElementById("textWindow").innerHTML += "<br>";
}
</script>
</body>
</html>
<!-- OLD LETTER CONFIG
<div id="dropDownW" class="dropdown-content">
<div class='option' id='optionW1' style="background-color: black; color: white;">W</div>
<div class='option' id='optionW2'>X</div>
<div class='option' id='optionW3'>Y</div>
<div class='option' id='optionW4'>Z</div>
</div>
<div id="dropDownA" class="dropdown-content">
<div class='option' id='optionA1' style="background-color: black; color: white;">A</div>
<div class='option' id='optionA2'>B</div>
<div class='option' id='optionA3'>C</div>
</div>
<div id="dropDownS" class="dropdown-content">
<div class='option' id='optionS1' style="background-color: black; color: white;">S</div>
<div class='option' id='optionS2'>T</div>
<div class='option' id='optionS3'>U</div>
<div class='option' id='optionS4'>V</div>
</div>
<div id="dropDownD" class="dropdown-content">
<div class='option' id='optionD1' style="background-color: black; color: white;">D</div>
<div class='option' id='optionD2'>E</div>
<div class='option' id='optionD3'>F</div>
<div class='option' id='optionD4'>G</div>
<div class='option' id='optionD5'>H</div>
<div class='option' id='optionD6'>I</div>
<div class='option' id='optionD7'>J</div>
<div class='option' id='optionD8'>K</div>
<div class='option' id='optionD9'>L</div>
<div class='option' id='optionD10'>M</div>
<div class='option' id='optionD11'>N</div>
<div class='option' id='optionD12'>O</div>
<div class='option' id='optionD13'>P</div>
<div class='option' id='optionD14'>Q</div>
<div class='option' id='optionD15'>R</div>
</div>
-->