index.html

<!DOCTYPE html><html><head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Math Power!</title>

<link rel="stylesheet" type="text/css" href="./dist/bundle.css" />

</head><body>

<h1>Math Power!</h1>

<label>
  num1 👉🏽
  <input id="num1"
    autofocus
    maxlength="30"
    size="5"
    tXYZype="number(disabled because this means it ignores maxlength and visible size)"
    step="0.01"
  >
</label>

<label>
  <select id="operator">
    <option value="">-- choose operator --</option>
    <option value="to the power of">to the power of</option>
    <option value="plus">plus</option>
    <option value="minus">minus</option>
    <option value="times">times</option>
    <option value="divided by">divided by</option>
  </select>
</label>

<label>
  <input id="num2"
    maxlength="30"
    size="5"
    tXYZype="number(disabled because this means it ignores maxlength and visible size)"
    step="0.01"
  >
  👈🏽 num2
</label>

<div id="container-calculate">
  <button id="calc-button">Equals:</button>
  <input type="text" id="result" readonly>
</div>

<script type="text/javascript" src="./dist/bundle.js"></script>

</body></html>