index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <title>Booths-Algorithm</title>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm input-group mt-1">
          <input
            class="form-control"
            type="number"
            id="Multiplicant"
            placeholder="Insert Multiplicant ..."
          />

          <input
            class="form-control mr-0"
            type="number"
            id="Multiplier"
            placeholder="Insert Multiplier ..."
          />

          <!-- <label class="my-1 mr-2" for="inlineFormCustomSelectPref"
            >Input</label
          > -->

          <select class="custom-select" id="inlineFormCustomSelectPref">
            <option value="DEC" selected>Decimal</option>
            <option value="BIN">Binary</option>
          </select>

          <button class="btn btn-primary" id="send" onclick="send()">
            Send
          </button>

          <button
            class="btn btn-outline-secondary"
            id="steps"
            onclick="steps()"
            disabled
          >
            Steps
          </button>

          <button
            class="btn btn-outline-danger"
            id="reset"
            onclick="tableReset()"
          >
            Reset
          </button>

          <div class="mt-2 pb-3">
            <div id="info"></div>

            <div id="start">Start</div>

            <div id="A"></div>
            <div id="Q"></div>
            <div id="QMO"></div>
            <div id="M"></div>
            <div id="count"></div>

            <div id="CQ"></div>
            <div id="CQMO"></div>

            <div id="sub">A <- A - M</div>
            <div id="ASub"></div>

            <div id="sum">A <- A + M</div>
            <div id="ASum"></div>

            <div id="Ashift">
              ARITHMETIC <br />
              SHIFT
            </div>
            <div id="order">A, Q, Q<sub>-1</sub></div>
            <div id="result"></div>
            <div id="countR"></div>

            <div id="counterzero">Count=0?</div>

            <div id="stop">STOP</div>

            <div id="decSub">Q=1<br />Q<sub>-1</sub>=0</div>
            <div id="decSum">Q=0<br />Q<sub>-1</sub>=1</div>
            <div id="decArith">
              Q=0 Q<sub>-1</sub>=0 <br />Q=1 Q<sub>-1</sub>=1
            </div>
            <div id="no">No</div>
            <div id="yes">Yes</div>
            <img
              src="images/Flowchart_background.png"
              alt="FlowChart"
              srcset=""
            />
          </div>
        </div>

        <div id="spacer" class="border border-secundary"></div>

        <div class="col-sm mt-1">
          <table
            class="table table-bordered table-sm table-hover text-center"
            id="table"
          >
            <thead class="thead-dark">
              <tr>
                <th scope="col">Operation</th>
                <th scope="col">A</th>
                <th scope="col">Q</th>
                <th scope="col">Q<sub>-1</sub></th>
                <th scope="col">Reason</th>
              </tr>
            </thead>
            <tbody id="tbody"></tbody>
          </table>
        </div>
      </div>
      <!-- final da row /\ -->
    </div>

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
    <script type="text/javascript" src="scripts/binaryToDecimal.js"></script>
    <script type="text/javascript" src="scripts/decimalToBinary.js"></script>
    <script type="text/javascript" src="scripts/twoComplement.js"></script>
    <script type="text/javascript" src="scripts/arithmeticShift.js"></script>
    <script type="text/javascript" src="scripts/sum.js"></script>
    <script type="text/javascript" src="scripts/send.js"></script>
    <script type="text/javascript" src="scripts/steps.js"></script>
    <script type="text/javascript" src="scripts/tableInsert.js"></script>
    <script type="text/javascript" src="scripts/tableReset.js"></script>
    <script type="text/javascript" src="utils/CheckInputBIN.js"></script>
  </body>
</html>