JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<title>
  Lab #6</title>

<body>
  <h1>Lab Exercise #6</h1> Enter Sales Amount:
  <br>
  <input type='text' id='textfield'>

  <input type='submit' id='button'>
  <table>
    <tr>
      <td>$200-$299</td>
      <td id='v0'>0</td>
    </tr>
    <tr>
      <td>$300-$399</td>
      <td id='v1'>0</td>
    </tr>
    <tr>
      <td>$400-$499</td>
      <td id='v2'>0</td>
    </tr>
    <tr>
      <td>$500-$599</td>
      <td id='v3'>0</td>
    </tr>
    <tr>
      <td>$600-$699</td>
      <td id='v4'>0</td>
    </tr>
    <tr>
      <td>$700-$799</td>
      <td id='v5'>0</td>
    </tr>
    <tr>
      <td>$800-$899</td>
      <td id='v6'>0</td>
    </tr>
    <tr>
      <td>$900-$999</td>
      <td id='v7'>0</td>
    </tr>
    <tr>
      <td>$1000 and over</td>
      <td id='v8'>0</td>
    </tr>
  </table>
</body>

CSS

td {
  width: 200px;
}

JavaScript

(function() {
  var numSalesPeople = [0, 0, 0, 0, 0, 0, 0, 0, 0];

  function start() {
    var button = document.getElementById("button");
    button.addEventListener("click", buttonPressed, false);
  }

  function buttonPressed() {
    var salary = document.getElementById("textfield").value;
    var goss;
    if (!Number.isNaN(salary)) {
      gross = salary * .09;
      if (Math.floor(gross / 100) > 8) {
        numSalesPeople[8] += 1;
        document.getElementById('v8').innerText = numSalesPeople[8];
      } else {
        numSalesPeople[Math.floor(gross / 100)] += 1;
        document.getElementById('v' + Math.floor(gross / 100)).innerText = numSalesPeople[Math.floor(gross / 100)];
      }

    }

  }


  document.addEventListener("DOMContentLoaded", start, false);
})();