[Deadfish][1]
===

I'm not proficient in JS/HTML/CSS, so I thought I'd take something easy so that we can experiment a little with the input/output layout. <strike>For starters, I've tried a 2-column layout like W3schools/JS-fiddle.</strike> *(2-column didn't work out well on my mobile)*

Obviously, all of these interpreters will probably work best if you full page them.

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    function run() {
      var code = document.getElementById("code").value
      var ascii = document.getElementById("ascii").checked
      var n = 0;
      var output = "";

      for (var i = 0; i < code.length; ++i) {
        switch (code[i]) {
          case "i":
            n += 1;
            break;
          case "d":
            n -= 1;
            break;
          case "s":
            n *= n;
            break;
          case "o":
            if (ascii) {
              output += String.fromCharCode(n)
            } else {
              output += n
              output += "\n"
            }
            break;
          default:
            output += "\n";

            if (n == -1 || n == 256) {
              n = 0;
            }
        }
      }

      document.getElementById('output').value = output;
    }

<!-- language: lang-html -->

    <h1>Deadfish interpreter</h1>
    <h2>Code</h2>
    <textarea id="code" rows="12" cols="80" style="overflow:scroll;overflow-x:hidden;resize:none" wrap="hard"></textarea>
    <p><input id="ascii" type="checkbox" value="ASCII">Use ASCII mode</input></p>
    <p><input id='run' type='button' value='Run' onclick='run()'></p>
    <br>
    <h2>Output</h2>
    <textarea id="output" rows="12" cols="80" style="overflow:scroll"></textarea>

<!-- end snippet -->

To pre-initialise the code box, just put something in between the textarea tags. Similarly, you can add `checked="true"` for the checkbox tag to have ASCII mode on by default.

Example from the [Happy Birthday][2] topic:

<!-- begin snippet: js hide: true -->

<!-- language: lang-js -->

    function run() {
      var code = document.getElementById("code").value
      var ascii = document.getElementById("ascii").checked
      var n = 0;
      var output = "";

      for (var i = 0; i < code.length; ++i) {
        switch (code[i]) {
          case "i":
            n += 1;
            break;
          case "d":
            n -= 1;
            break;
          case "s":
            n *= n;
            break;
          case "o":
            if (ascii) {
              output += String.fromCharCode(n)
            } else {
              output += n
              output += "\n"
            }
            break;
          default:
            output += "\n";

            if (n == -1 || n == 256) {
              n = 0;
            }
        }
      }

      document.getElementById('output').value = output;
    }

<!-- language: lang-html -->

    <h1>Deadfish interpreter</h1>
    <h2>Code</h2>
    <textarea id="code" rows="12" cols="80" style="overflow:scroll;overflow-x:hidden;resize:none" wrap="hard">iiisdsiiiiiiiioiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiiiiiiiiooiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiioiioddddddddddddoddddodddoiiiiiiiiiiiiiiiiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddsdddddodddddodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddddsiiiiiiiioiiiiiiiiiiiiiiiiiiiiiioiiiiiiofdddddddddddddddddddddddddddddddddddddddddddddoiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiiiiiiiiooiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiioiioddddddddddddoddddodddoiiiiiiiiiiiiiiiiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddsdddddodddddodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddddsiiiiiiiioiiiiiiiiiiiiiiiiiiiiiioiiiiiiofdddddddddddddddddddddddddddddddddddddddddddddoiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiiiiiiiiooiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiioiioddddddddddddoddddodddoiiiiiiiiiiiiiiiiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiiiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioddddoiiiiiiiiiiiiiiiiioddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiiiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioddddoiiioiioiiioiiiiiiiiiiodddddddddddofddddddddddddddddddddddddddddddddoiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiiiiiiiiooiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddoddddddddddddddddddddddddsiioiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioiiiiiiiiioiioddddddddddddoddddodddoiiiiiiiiiiiiiiiiiiiiiiiiodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddsdddddodddddodddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddodddddddddddddddddddddddsiiiiiiiioiiiiiiiiiiiiiiiiiiiiiioiiiiiio </textarea>
    <p><input id="ascii" type="checkbox" checked="true" value="ASCII">Use ASCII mode</input></p>
    <p><input id='run' type='button' value='Run' onclick='run()'></p>
    <br>
    <h2>Output</h2>
    <textarea id="output" rows="12" cols="80" style="overflow:scroll"></textarea>

<!-- end snippet -->

  [1]: http://esolangs.org/wiki/Deadfish
  [2]: http://codegolf.stackexchange.com/a/39820/21487