Example game

by huulktya

HTML

<div id="output"></div>
<div id="input"></div>

CSS

#input {
    background-color:cyan;
    width:100%;
}
#input::before {
    content:"$ "
}

JavaScript

var output = document.getElementById("output");
var input = document.getElementById("input");

function printOutput(outputString) {
    output.innerHTML = output.innerHTML + outputString;
}

document.onkeydown = function (evt) {
    if (evt.key.length === 1) {

        //Add code to run just before a user types here
        //For example: 
        var textToAdd = addEmphasis(evt.key);
        //end example
        input.innerHTML = input.innerHTML + textToAdd;
        //Add code to run after a user types here
    } else {
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if (keyCode == 13) {
            //handle the return key
            stepGame(input.innerHTML);
            input.innerHTML = "";
        } else if (keyCode == 16) {
            //Due to the limitations of my browser
            //I can't use Backspace (keyCode: 8).
            //This implementation uses the shift key instead
            input.innerHTML = input.innerHTML.substring(0, input.innerHTML.length - 1);
        } else {
            return true;
        }
    }
};

function addEmphasis(text) {
    if(text === "i") {
        return "<i>i</i>";
    } else {
        return text;
    }
}

function stepGame(input) {
    printOutput("A long time ago... <br/> You said: " + input + "<br/>");
}