make web UI work with rpnCalculator

	      rpnTestNumberErrorHandling();

	  };

	  /**

	   * update web UI to match the state of th rpnCalculator.

	   *

	   * currently it syncs rpnCalculator.currentNumber and rpnCalculator.numberStack.

	   */

	  const updateUI = function (rpnCalculator) {

	      $('#number-display').text(rpnCalculator.currentNumber);

	      const stack = rpnCalculator.numberStack;

	      const stackSize = stack.length;

	      $("#stack-content").children().remove();

	      for (i = 0; i < stackSize; ++i) {

		  $("#stack-content").append($('<pre>').text((stackSize - i) + ': ' + stack[i]));

	      }

	      $("#stack-content").append($('<pre>').text('   .'));

	  };

	  // page init

	  showDumbData();

	  // showDumbData();

	  runTests();

	  const rpnCalculator = new fsm.RPNCalculator();

	  // init web UI

	  updateUI(rpnCalculator);

	  // setup event handler

	  $('.keyboard td').click(function (evt) {

	      var i;

	      const target = evt.target;

	      console.log("user clicked on button: " + $(target).attr('data-bt-name'));

	      const keyName = $(target).attr('data-bt-name');

	      console.log("user clicked on button: " + keyName);

	      rpnCalculator.sendKey(keyName);

	      // update UI

	      updateUI(rpnCalculator);

	  });

      }());

    </script>

    	    return this.currentState;

    	};

	// run all tests;

	const runTests = function () {

	    testChangeNumberString();

	};

	// run all tests;

	runTests();

    };

    return {

	matchesSubstringAbb: matchesSubstringAbb,

	RPNCalculator: RPNCalculator,

Time-stamp: <2017-01-27>

#+STARTUP: content

* notes                                                               :entry:

* later                                                               :entry:

** 2017-01-26 make the whole thing a polymer web component

<rpn-calculator trail="true"></rpn-calculator>

User can also set height and width on the element, which will resize the

elements inside. When there is no room, show a scrollbar.

shadow dom should make all HTML/CSS/Javascript work together without affecting

the parent DOM.

* current                                                             :entry:

** 

** 2017-01-26 when testing the fsm, always sync this.numberStack and this.currentNumber with the web UI.

** 2017-01-26 handle error for every this.numberStack.pop()

** 2017-01-26 design data structure for the calculator.

- this can be written and tested independently from the web UI.

- basic data:

  - when number already has a dot in it, future dot will just show error and

    not modify the number.

** 2017-01-26 make basic number input and arithmetic work

- DONE make event work.

  - TODO add some visual feedback when clicking a button. like in material design.

- design data structure for the calculator.

- add unit test for the data structure and functions.

- make number input and simple calculation work.

* later                                                               :entry:

** 2017-01-26 make the whole thing a polymer web component

<rpn-calculator trail="true"></rpn-calculator>

User can also set height and width on the element, which will resize the

elements inside. When there is no room, show a scrollbar.

shadow dom should make all HTML/CSS/Javascript work together without affecting

the parent DOM.

* current                                                             :entry:

** 

** 2017-01-26 handle error for every this.numberStack.pop()

** 2017-01-26 make trail persistent

trail is a sized fifo queue, it just store recent 1k entries.

- make DUP and SWP work

- make trail work

* done                                                                :entry:

** 2017-01-26 make basic number input and arithmetic work

- DONE make event work.

  - TODO add some visual feedback when clicking a button. like in material design.

- DONE design data structure for the calculator.

- DONE add unit test for the data structure and functions.

- DONE make number input and simple calculation work.

** 2017-01-27 make RPNCalculator work with web UI.

- make event handler work with RPNCalculator.

- sync this.numberStack and this.currentNumber with the web UI.

** 2017-01-26 what to do with negate operator?

emacs use n (change sign)

add this button. move divide button to somewhere else.