kajetans-interpreter/web/brainfuck.php

<div class="container">
    <div class="textContainer">
        Brainfuck is an esoteric programming language, consisting of only 8 
        instructions each represented by one character. Every other character 
        is silently ignored and can be used as comment. 
    </div>

    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">&gt;</div>
        </div>
        <div class="col">
            <div class="textContainer">move the active memory cell to the right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">&lt;</div>
        </div>
        <div class="col">
            <div class="textContainer">move the active memory cell to the left</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">+</div>
        </div>
        <div class="col">
            <div class="textContainer">increase the value in the active memory cell</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">-</div>
        </div>
        <div class="col">
            <div class="textContainer">decrease the value in the active memory cell</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">.</div>
        </div>
        <div class="col">
            <div class="textContainer">print the value in the active memory cell as character</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">,</div>
        </div>
        <div class="col">
            <div class="textContainer">read one charater as input storing its value in the active memory cell (not implemented)</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">[</div>
        </div>
        <div class="col">
            <div class="textContainer">if the value of the active memory cell is 0, jump to the next ]</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <div class="textContainer spacer center">]</div>
        </div>
        <div class="col">
            <div class="textContainer">if the value of the active memory cell is not 0, jump to the previous [</div>
        </div>
    </div>

    <div class="brainfuckTitle">Memory Table</div>
    <div id="memorytable"></div>

    <div class="row">
        <div class="col-lg">
            <div class="brainfuckTitle">Input</div>
            <textarea id="input">++++--+++>++>>++</textarea>
        </div>
        <div class="col-lg">
            <div class="brainfuckTitle">Executing Code</div>
            <div id="outputcode"></div>
        </div>
        <div class="col-lg">
            <div class="brainfuckTitle">Output</div>
            <div id="output"></div>
        </div>
    </div>

    <script src="js/brainfuck.js"></script>

    <button id="start" onClick="start()" class="btn">Start</button>
    <button id="reset" onClick="reset()" class="btn">Reset</button>

    <div style="clear: both;"></div>
    <div id="delaydiv"><input type="range" min="1" max="1000" value="50" id="delay"></div>
</div>