text: <!DOCTYPE html>
  <html>
  
  <head>
    <meta charset="utf-8">
    <style>
      td select,
      td input {
        width: 150px;
      }
      
      #diagram td {
        vertical-align: bottom;
        text-align: center;
        padding: 10px;
      }
      
      #diagram div {
        margin: auto;
      }
    </style>
  </head>
  
  <body>
  
  
    Калькулятор процентов, из расчёта 12% годовых.
    <form name="calculator">
      <table>
        <tr>
          <td>Сумма</td>
          <td>
            <input name="money" type="text" value="10000">
          </td>
        </tr>
        <tr>
          <td>Срок в месяцах</td>
          <td>
            <select name="months">
              <option value="3">3 (минимум)</option>
              <option value="6">6 (полгода)</option>
              <option value="12" selected>12 (год)</option>
              <option value="18">18 (1.5 года)</option>
              <option value="24">24 (2 года)</option>
              <option value="30">30 (2.5 года)</option>
              <option value="36">36 (3 года)</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>С капитализацией</td>
          <td>
            <input name="capitalization" type="checkbox">
          </td>
        </tr>
      </table>
  
  
    </form>
  
  
    <table id="diagram">
      <tr>
        <th>Было:</th>
        <th>Станет:</th>
      </tr>
      <tr>
        <th id="money-before"></th>
        <th id="money-after"></th>
      </tr>
      <td>
        <div style="background: red;width:40px;height:100px"></div>
      </td>
      <td>
        <div style="background: green;width:40px;height:0" id="height-after"></div>
      </td>
    </table>
  
    <script>
      // event.type должен быть keypress
      function getChar(event) {
        if (event.which == null) {
          if (event.keyCode < 32) return null;
          return String.fromCharCode(event.keyCode) // IE
        }
  
        if (event.which != 0 && event.charCode != 0) {
          if (event.which < 32) return null;
          return String.fromCharCode(event.which) // остальные
        }
  
        return null; // специальная клавиша
      }
  
      var form = document.forms.calculator;
  
  
      var moneyElem = form.elements.money;
      moneyElem.onkeypress = function(e) {
        e = e || event;
        var chr = getChar(e);
  
        if (e.ctrlKey || e.altKey || chr == null) return; // специальная клавиша
        if (chr < '0' || chr > '9') return false;
      }
  
      // клавиатура, вставить/вырезать клавиатурой
      moneyElem.onkeyup = calculate;
  
      // любые действия, кроме IE. В IE9 также работает, кроме удаления
      moneyElem.oninput = calculate;
  
      moneyElem.onpropertychange = function() { // для IE8- изменение значения, кроме удаления
        event.propertyName == "value" && calculate();
      }
  
      var capitalizationElem = form.elements.capitalization;
      capitalizationElem.onclick = calculate;
  
      var monthsElem = form.elements.months;
      monthsElem.onchange = calculate;
  
  
      function calculate() {
        var sum = +moneyElem.value;
        if (!sum) return;
  
        var monthlyIncrease = 0.01;
  
        if (!capitalizationElem.checked) {
          sum = sum * (1 + monthlyIncrease * monthsElem.value);
        } else {
  
          for (var i = 0; i < monthsElem.value; i++) {
            // 1000 1010 1020.1
            sum = sum * (1 + monthlyIncrease);
          }
        }
        sum = Math.round(sum);
  
        var height = sum / moneyElem.value * 100 + 'px';
        document.getElementById('height-after').style.height = height;
        document.getElementById('money-before').innerHTML = moneyElem.value;
        document.getElementById('money-after').innerHTML = sum;
      }
  
      calculate();
    </script>
  
  
  </body>
  
  </html>