Stack based Javascript Calc

code ---- stack ---- html / canvas ---- history / print ---- custom buttons ---- normal keys ---- Plan **** build divs Refs **** http://esprima.org you type in the code and it parses and finds the function names. http://esprima.org/demo/parse.html is a great online parse tool.

by Andy Bulka

HTML

<script src="https://raw.github.com/ariya/esprima/master/esprima.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
Stack based Javascript Calc. <INPUT type="button" value="Parse" id="btn_parse" />
<textarea id="code" name="code">
function findSequence(goal) {
  if (goal == "z")
    alert("zzz");
  else
    alert(55);
}
function add(a,b) { return a+b; }
function say_hi() { return "hi"; }
</textarea>
Stack:
<div id="stack">
  <textarea id="stack" name="stack" class="stack" rows="3">
  </textarea>
  <input id="current" class="stack" type="text" value="78"></<input>
</div>
<div id="html_out">
</div>
<div id="history">
</div>
Custom Buttons: <input id="design_mode" type="checkbox" value="aaa" /> (edit)
<div id="div_buttons">
</div>

<ul id="cities"></ul>
Regular Keyboard:    
<div id="built_in_buttons">
<FORM NAME="Calc">    
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"   NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT...

CSS

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 0 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
form { margin-left: 15px; }
.draggablenow { background-color: LightGreen; } 
div#div_buttons {margin-left: 15px; background:#FAD3A9; width:265px;}
.f_button {
    font-size: 0.8em;
    padding: 4px;
    margin-left: 4px;
    margin-top: 4px;
    margin-right: 7px;
    margin-bottom: 5px;
}
#cities li {
    background-color: lightgreen; 
    border: 1px solid darkgreen;
    margin : 2px 0;
    padding: 3px;
    display: list-item;
}

div.CodeMirror-scroll { height: auto!important; overflow: visible; }
.stack {
    width:245px;
    border: 0 none white;
    overflow: auto; /* hidden; */
    margin-left: 15px;
    padding: 5px;
    outline: none;
    background-color: Black;
    color: #09B53D;
    font-weight:700;
    /* resize: none; */
    display:block;
}
input.stack { font-size:1.2em; 
    color: white ;
    border-top: dotted; border-width:2px; border-color:grey;}

JavaScript

var editor = CodeMirror.fromTextArea($("#code")[0], {
    lineNumbers: true,
    matchBrackets: true,
    tabSize: 2,
    mode: {name: "javascript", json: true},
    autoClearEmptyLines: true,
    lineWrapping: true
});
$(editor.getScrollerElement()).height(170);

var stack = [{"type":"number", "value":1},
             {"type":"number", "value":2},
             {"type":"number", "value":3},
             {"type":"string", "value":"hi"},
             ];

var syntax;

function parse() {
    //var thecode = $("#code").val();
    var thecode = editor.getValue();
    
    syntax = esprima.parse(thecode);
    //console.log(syntax);
    
    $("#out").html('');
    $("#div_buttons").html('');
    //$('#ul_function_names').children().remove();
    $('#ul_function_names').empty();
    var i;
    for (i = 0; i < syntax.body.length; ++i) {
        var el = syntax.body[i];
       
        //console.log(el.id.name);
        //$("#out").append(el.id.name);
        //$("#out").append("<br>");
        
        $('#ul_function_names').append($('<li>', {
         text: el.id.name
        }));

        // Build a button
        var element = $("<input>", {
            type: "button",
            val: el.id.name,
            name: "blah",
            "class": "f_button",
        });
        $('#div_buttons').append(element);
        element.on("click", doclickeval);
        element.data("num_params", el.params.length);
        
        //element.data("params", el.params);
        element.data("params", jQuery.extend({}, el.params)); // shallow copy
        
        if ($("#design_mode").is(':checked')) {
            draggable_on(element);
        }
        
        // Add parameters
        if (el.params.length > 0) {
            //console.log(el.params.length);
            /*
            var p;
            for (p = 0; p < el.params.length; ++p) {
                console.log(el.params[p].name);
            }
            */
/*
            $.each(el.params, function(index, value) {
   ...