form event excercise

<!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>

  Deposit calculator.

  <form name="calculator">
    <table>
      <tr>
        <td>Initial deposit</td>
        <td>
          <input name="money" type="number" value="10000" required>
        </td>
      </tr>
      <tr>
        <td>How many months?</td>
        <td>
          <select name="months">
            <option value="3">3 (minimum)</option>
            <option value="6">6 (half-year)</option>
            <option value="12" selected>12 (one year)</option>
            <option value="18">18 (1.5 years)</option>
            <option value="24">24 (2 years)</option>
            <option value="30">30 (2.5 years)</option>
            <option value="36">36 (3 years)</option>
            <option value="60">60 (5   years)</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Interest per year?</td>
        <td>
          <input name="interest" type="number" value="5" required>
        </td>
      </tr>
    </table>


  </form>