Commit af5cfde7 authored by Yuanle Song's avatar Yuanle Song
Browse files

draw the keyboard using HTML and CSS

parent 94bda880

calc.html

0 → 100644
+108 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">



  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>RPN calculator</title>

    <style type="text/css">

      #container {

	  display: flex;

	  flex-flow: row;

	  width: 700px;

	  margin: 10px auto;

	  border: 1px grey dotted;

      }

      #container > div {

	  border: 1px grey dotted;

      }

      #container > div > p {

	  margin-left: 10px;

      }

      #stack {

	  width: 200px;

	  height: 500px

      }

      #keyboard {

	  width: 300px;

	  height: 500px

      }

      #trail {

	  width: 200px;

	  height: 500px

      }

      #stack-content {

	  margin-left: 10px;

      }

      #trail-content {

	  margin-left: 10px;

      }

      .keyboard {

	  font-size: 1.2em;

	  text-align: center;

      }

      .keyboard table {

	  margin: 2px auto;

      }

      .keyboard td {

	  width: 60px;

	  height: 60px;

      }

      #number-display {

	  border: 1px grey solid;

	  width: 100%;

	  text-align: right;

      }

    </style>

  </head>



  <body>

    <div id="container">

      <div id="stack">

	<p>Stack</p>

	<div id="stack-content"></div>

      </div>

      <div id="keyboard">

	<p>Keyboard</p>

	<div class="keyboard">

	  <table>

	    <tr>

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

	    </tr>

	    <tr>

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

	    </tr>

	    <tr>

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

	    </tr>

	    <tr>

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

	    </tr>

	    <tr>

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

	    </tr>

	    <tr>

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

	    </tr>

	  </table>

	</div>

      </div>

      <div id="trail">

	<p>Trail</p>

	<div id="trail-content"></div>

      </div>

    </div>

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

    <script type="text/javascript">

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

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

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

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



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

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

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

    </script>

  </body>



</html>

operational

+1 −0
Original line number Diff line number Diff line
@@ -21,4 +21,5 @@ trail cache. it's not a problem. 
- make DUP and SWP work

- make trail work

* done                                                                :entry:

** 2017-01-26 draw the keyboard using HTML and CSS

* wontfix                                                             :entry:

vendor/jquery.js

0 → 100644
+9814 −0

File added.

Preview size limit exceeded, changes collapsed.

vendor/jquery.min.js

0 → 100644
+4 −0

File added.

Preview size limit exceeded, changes collapsed.

vendor/jquery.min.map

0 → 100644
+1 −0

File added.

Preview size limit exceeded, changes collapsed.