index2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Addition Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container mt-9">
      <form>
        <div class="form-group">
          <label for="num1">Enter the first number:</label>
          <input type="number" class="form-control" id="num1">
        </div>
        <div class="form-group">
          <label for="num2">Enter the second number:</label>
          <input type="number" class="form-control" id="num2">
        </div>
        <button type="button" class="btn btn-primary" onclick="add()">Add</button>
      </form>
      <br>
      <h4>The result is: <span id="sum"></span></h4>
    </div>

    <script>
      function add() {
        let num1 = parseInt(document.getElementById("num1").value);
        let num2 = parseInt(document.getElementById("num2").value);
        let sum = num1 * num2;
        document.getElementById("sum").innerHTML = sum;
      }
    </script>
  </body>
</html>