I was trying to get the price calculator to work in my shopping cart but I can’t understand why it doesn’t work. I entered the price, the quantity and I wanted to calculate the price of the product in the last column.

I attach the HTML and Css code. I thank everyone who will help me. Thanks a lot to everyone!!!

body,
html {
  height: 100%;
  width: 100%;
}

html,
body {
  margin: auto;
  padding: 0%;
  font-family: Arial;
}


/*
  Topnav
*/

.topnav {
  background-color: #fff;
  overflow: auto;
  padding-left: 1em;
}

.topnav a {
  float: left;
  color: #707070;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  font-family: Arial;
}

.topnav a:hover {
  color: #D4988E;
}

.topnav a.active {
  background-color: #fff;
  color: #D4988E;
}

.topnav-right {
  float: right;
  padding-right: 1em;
}


/*
  Cart
*/

.title {
  font-family: Arial;
  margin-left: 100px;
  color: #403F3F;
  margin-top: 50px;
}

hr.new2 {
  height: 4px;
  color: #D4988E;
  background-color: #D4988E;
  border: none;
  margin-right: 1280px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.cartcontainer {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
  overflow-x: auto;
}

.cartcontainer table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
}

.cartcontainer table thead {
  font-weight: 700;
  font-family: Arial;
}

.cartcontainer table thead td {
  background: #D4988E;
  color: #ffffff;
  border: none;
  padding: 6px 0;
}

.cartcontainer table td {
  border: 1px solid #b6b3b3;
  text-align: center;
}

.cartcontainer table td:nth-child(1) {
  width: 100px;
}

.cartcontainer table td:nth-child(2),
.cartcontainer table td:nth-child(3) {
  width: 200px;
}

.cartcontainer table td:nth-child(4),
.cartcontainer table td:nth-child(5),
.cartcontainer table td:nth-child(6) {
  width: 170px;
}

.cartcontainer table tbody img {
  width: 100px;
  height: 80px;
  object-fit: cover;
}

.cartcontainer table tbody i {
  color: #8d8c89;
}

.coupon-code {
  margin-top: 20px;
}

.total {
  margin-left: 650px;
  margin-top: -174px;
  margin-right: 100px;
}

h6,
p {
  display: inline;
}

.price {
  margin-top: -15px;
  margin-bottom: 10px;
}

.cartbottom .coupon>div,
.cartbottom .total>div {
  border: 1px solid #b6b3b3;
  border-top: 20px;
}

.cartbottom .coupon>div {
  margin-left: 100px;
  margin-right: 800px;
}

.border {
  margin-top: 20px;
}

.cartbottom .coupon h5,
.cartbottom .total h5 {
  background: #D4988E;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  font-weight: 700;
}

.cartbottom .coupon p,
.cartbottom .coupon input {
  padding: 0 12px;
}

.cartbottom .coupon input {
  height: 44px;
  width: 220px;
}

.cartbottom .coupon input {
  margin: 0 10 20px 12px;
  margin-left: 10px;
  margin-bottom: 15px;
}

.cartbottom .total div>div {
  padding: 0 12px;
}

.cartbottom .total h6 {
  color: #2a2a2a;
}

.second-hr {
  height: 4px;
  color: #D4988E;
  background-color: #D4988E;
  border: none;
  margin-right: 580px;
}

.cartbottom .total div>button {
  margin: 20px 12px 20px 10px;
}

.button1 {
  padding: 3%;
  width: 200px;
  background-color: #D4988E;
  border: none;
  color: white;
  border-radius: 10px;
  margin-left: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.button1:hover {
  background-color: #BD847A;
  color: white;
}

.button2 {
  padding: 2%;
  width: 650px;
  background-color: #D4988E;
  border: none;
  color: white;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition-duration: 0.4s;
}

.button2:hover {
  background-color: #BD847A;
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://stackoverflow.com/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/cart.css">
  <script src="https://kit.fontawesome.com/e8f8804c71.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="cart.js" async></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <title>Shopping Cart</title>
</head>

<body>

  <!-- topnav======================================== -->
  <div class="topnav-logo">
  </div>

  <div class="topnav">
    <a href="index.html">Homepage</a>
    <a href="CustomOrders.html">Custom Order</a>
    <a href="ContactUs.html">Contact</a>
    <a href="AboutUs.html">About</a>

    <div class="topnav-right">
      <a href="#"><i class="fa-brands fa-instagram"></i></a>
      <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
      <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
      <a class="active" href="#home"><i class="fa-solid fa-cart-shopping"></i></a>
      <a href="#"><i class="fa-solid fa-user"></i></a>
    </div>
  </div>

  <hr>



  <div class="title">
    <h2 class="font-weight-bold pt-5">Shopping Cart</h2>
    <hr class="new2">
  </div>
  <div class="cartcontainer">
    <table width="100%">
      <thead>
        <tr>
          <td>Remove</td>
          <td>Image</td>
          <td>Product</td>
          <td>Price</td>
          <td>Quantity</td>
          <td>Total</td>
        </tr>
      </thead>

      <tbody>

        <tr>


          <td><a class="btn-remove" href="#"><i class="fas fa-trash-alt"></i></a></td>
          <td><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang2.jpg" alt=""></td>
          <td>
            <h5>Big Bang Standard</h5>
          </td>
          <div data-ng-app="" data-ng-init="quantity=1; price=33.00">
            <td><input type="number" ng-model="price"></td>
            <td><input type="number" ng-model="quantity"></td>
            <td>
              <h5>{{quantity * price}}
                <h5>
            </td>
        </tr>
        </div>

        <tr>
          <td><a class="btn-remove" href="#"><i class="fas fa-trash-alt"></i></a></td>
          <td><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt=""></td>
          <td>
            <h5>Big Bang Premium</h5>
          </td>
          <div data-ng-app="" data-ng-init="quantity=1; price=39.00">
            <td><input type="number" ng-model="price"></td>
            <td><input type="number" ng-model="quantity"></td>
            <td>
              <h5>{{quantity * price}}
                <h5>
            </td>
        </tr>
        </div>

        <tr>
          <td><a class="btn-remove" href="#"><i class="fas fa-trash-alt"></i></a></td>
          <td><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang4.jpg" alt=""></td>
          <td>
            <h5>Big Bang Deluxe</h5>
          </td>
          <div data-ng-app="" data-ng-init="quantity=1; price=42.00">
            <td><input type="number" ng-model="price"></td>
            <td><input type="number" ng-model="quantity"></td>
            <td>
              <h5>{{quantity * price}}
                <h5>
            </td>
        </tr>
        </div>

      </tbody>

    </table>
  </div>





  <div class="cartbottom" class=" container">
    <div class="row">
      <div class=" coupon col-lg-6 col-md-6 col-12 mb-4">
        <div>
          <h5>COUPON</h5>
          <p>Enter your coupon code if you have one.</p>
          <input class="coupon-code" type="text" placeholder="Coupon Code">
          <button type="button" onclick="alert('Your coupon code has been authenticated!')" class="button1">APPLY COUPON</button>
        </div>
      </div>



      <div class="total col-1g-6 col-md-6 col-12">
        <div>
          <h5>CART TOTAL</h5>
          <div class="d-flex justify-content-between">
            <h6>Subtotal</h6>
            <div class="price" style="text-align: right;">
              <p>$215.00</p>
            </div>
          </div>
          <div class="d-flex justify-content-between">
            <h6>Shipping</h6>
            <div class="price" style="text-align: right;">
              <p>$215.00</p>
            </div>
          </div>
          <hr class="second-hr">
          <div class="d-flex justify-content-between">
            <h6>Total</h6>
            <div class="price" style="text-align: right;">
              <p>$215.00</p>
            </div>
          </div>
          <button type="button" class="button2">PROCEED TO CHECKOUT</button>
        </div>
      </div>

    </div>
  </div>

1