add event handler for buttons

      }

      #stack-content {

	  margin-left: 10px;

	  font-size: 1.2em;

      }

      #trail-content {

	  margin-left: 10px;

	  font-size: 1.2em;

      }

      .keyboard {

	  font-size: 1.2em;

	<div class="keyboard">

	  <table>

	    <tr>

	      <td colspan="4" id="number-display">789</td>

	      <td colspan="4" data-bt-name="number-display" id="number-display"></td>

	    </tr>

	    <tr>

	      <td>7</td><td>8</td><td>9</td><td>&lt;</td>

	      <td data-bt-name="num7">7</td>

	      <td data-bt-name="num8">8</td>

	      <td data-bt-name="num9">9</td>

	      <td data-bt-name="backspace">&lt;</td>

	    </tr>

	    <tr>

	      <td>4</td><td>5</td><td>6</td><td>*</td>

	      <td data-bt-name="num4">4</td>

	      <td data-bt-name="num5">5</td>

	      <td data-bt-name="num6">6</td>

	      <td data-bt-name="multiply">*</td>

	    </tr>

	    <tr>

	      <td>1</td><td>2</td><td>3</td><td>-</td>

	      <td data-bt-name="num1">1</td>

	      <td data-bt-name="num2">2</td>

	      <td data-bt-name="num3">3</td>

	      <td data-bt-name="subtract">-</td>

	    </tr>

	    <tr>

	      <td>0</td><td>&sol;</td><td>.</td><td>+</td>

	      <td data-bt-name="num0">0</td>

	      <td data-bt-name="divide">÷</td>

	      <td data-bt-name="dot">.</td>

	      <td data-bt-name="plus">+</td>

	    </tr>

	    <tr>

	      <td>SWP</td><td>UNDO</td><td></td><td>RET</td>

	      <td title="swap" data-bt-name="swap">SWAP</td>

	      <td title="undo" data-bt-name="undo">UNDO</td>

	      <td title="confirm or duplicate number" colspan="2" data-bt-name="return">RETURN</td>

	    </tr>

	  </table>

	</div>

    </div>

    <script type="text/javascript" src="vendor/jquery.min.js"></script>

    <script type="text/javascript">

      (function () {

	  /**

	   * show dumb data for UI testing.

	   */

	  const showDumbData = function () {

	      $("#number-display").text('789');

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

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

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

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

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

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

	  };

	  // page init

	  showDumbData();

	  // setup event handler

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

	      const target = evt.target;

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

	  });

      }());

    </script>

  </body>

#+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 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.

** 2017-01-26 make trail persistent

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

when multiple instances of calculator is working. they all write to a single

** 2017-01-26 make stack auto numbering work

** 2017-01-26 make < (backspace) work.

** 2017-01-26 make basic things work.

- draw the keyboard using HTML and CSS

- DONE draw the keyboard using HTML and CSS

- make basic number input and arithmetic work

- make DUP and SWP work

- make trail work