Calculate the total cost of the products within the shopping cart and displaying it at the bottom rather than manual input

Question

I have made a checkout form that displays the cost of a product, the subtotal, GST cost, delivery cost, and total price. What id like to do is take the cost of each product whic

Answer 1

You do NOT need an ID since IDs need to be unique.

I do not have your delivery on the page so here is the total

Note: You HTML is quite invalid. You cannot have divs in spans. Also I would have the style sheet external and placed in the beginning of the head

const prices = [...document.querySelectorAll(".order-info .price")]
  .map(price => +price.textContent.replace(/[^\d|.]/g, "")) // get rid of text and $

const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // sum the array of prices - if none, then 0
console.log(sum.toFixed(2)); // sum of prices

const costs = [...document.querySelectorAll(".cost_sum div")];
const total = costs.length > 0 ? costs.reduce((acc, cost) => {
  acc += +cost.textContent.replace(/[^\d|.]/g, "");
  return acc;
}, 0) : 0;
console.log(total.toFixed(2))

body {
  background-color: #424242;
}

.icon-container {
  text-align: center;
}

.fa,
.fab {
  font-size: 3.125em;
}

.fa-heart {
  color: #ffffd !important;
}

.fa-cc-apple-pay {
  background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-mastercard {
  background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-visa {
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-paypal {
  background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-cc-amazon-pay {
  background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-google-pay {
  background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.order-info-content .fa-shopping-cart {
  color: #212121;
}


/* Main body of checkout section */

.checkout-tabs {
  height: 59em;
  width: 75.000em;
  background: #fff;
  display: flex;
  border-radius: 2.063em;
}

@media only screen and (max-width: 700px) {
  .checkout-tabs {
    height: 62em;
  }
}


/* 
     ========================================================================================================                                                   
                                             Payment Form                                                              
     ========================================================================================================
      */

.payment-form h2 {
  margin-bottom: 0em;
  margin-top: 1.563em;
  text-align: center;
  font-weight: 200;
  font-size: 1.2em;
}

.order-info-content h2 {
  margin-bottom: 0em;
  text-align: center;
  font-weight: 500;
  font-size: 1.5em;
  color: #212121;
}

.payment-form label {
  margin-bottom: 0.625em;
  display: block;
  color: #ffffd;
}

.payment-form {
  justify-content: center;
  align-items: center;
  display: flex;
}

.order-table .product-name {
  font-weight: 500;
}

.order-table .description {
  font-weight: 200;
  font-size: 0.750em;
  font-size: .8em;
  list-style-type: none;
}

.half-input-table {
  border-collapse: collapse;
  width: 100%;
}

.half-input-table td:first-of-type {
  border-right: 0.625em solid #212121;
  width: 50%;
}

.order-info {
  height: 100%;
  width: 50%;
  padding-left: 1.563em;
  padding-right: 1.563em;
  position: relative;
}

.price {
  bottom: 0em;
  position: absolute;
  right: 0em;
  color: #21212180;
}

.order-table td:first-of-type {
  width: 25%;
}

.order-table {
  position: relative;
}

.devider {
  height: 0.063em;
  width: 100%;
  margin-top: 0.625em;
  margin-bottom: 0.625em;
  background: #21212185;
}

.cost_sum {
  float: right;
  text-align: right;
}

.total-field {
  width: 50%;
  margin-bottom: 20px;
}

.quantity {
  width: 10%;
  margin-left: 5px;
  float: right;
}

.price-right {
  float: right;
}

.checkout-button {
  border: solid;
  border-color: rgba(221, 221, 221, 0.281);
  background: rgb(53, 53, 53);
  padding: 0.7em;
  border-radius: 1.250em;
  font-size: 1.250em;
  color: rgb(255, 255, 255);
  cursor: pointer;
  width: 100%;
}

.checkout-button:hover {
  opacity: 95%;
}

.total-font {
  line-height: 1.2em;
  font-size: 1.000em;
  font-size: 1em;
  font-weight: 400;
}

.input-field {
  background: #ffffd;
  margin-bottom: 0.625em;
  margin-top: 0.188em;
  line-height: 1.5em;
  font-size: 1.250em;
  font-size: 1.3em;
  border: none;
  border-radius: 0.313em;
  padding: 0.313em 0.625em 0.313em 0.625em;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.details-field {
  background: #212121;
  height: 100%;
  width: 50%;
  color: #eee;
  justify-content: center;
  font-size: 0.875em;
  font-size: .9em;
  box-sizing: border-box;
  padding-left: 1.563em;
  padding-right: 1.563em;
  border-radius: 1.875em;
  border-style: solid;
  border-color: white;
}

.details-inputs {
  margin-top: 1.563em;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.details-inputs h3 {
  text-align: center;
  padding: 0em;
  margin-top: 0em;
  font-size: large;
}

.item-btn {
  color: red;
  background-color: transparent;
  border-style: none;
  float: right;
}

.item-btn:hover {
  cursor: pointer;
}

.checkout-form-1 {
  height: 300px;
  width: 400px;
  margin: 20px auto;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}

  
  


  

    


      

        

          
Cart 
          

          


            

              

                

                
                

                  

                  AOC C27G2
                  X
                  
27" Full HD Curved Monitor

                  
Resolution: 1920x1080
                  
Refresh Rate: 165hz
                  
Response Time: 1 ms

                

              
              

                

                  
$429.00 (GST Inc)
                
              
            

          
          

          

            

              

                

                
                

                  
 Logitech G402 Hyperion Fury
                  X
                  
Gaming Mouse

                  
Movement Detection: Optical
                  
Programmable Buttons: 8
                  
Hand Orientation: Right Hand
                  
Maximum DPI: 4,000

                
              
              

                

                  
$94.89 (GST Inc)
                
              
            
          
          

          

            

              

                

                
                

                  
 Logitech G332
                  X
                  
Stereo Gaming Headset

                  
Sound Mode: Stereo
                  
Microphone: Yes
                  
Interface: 3.5mm
                  
Colour: Black

                
              
              

                

                  
$133.00 (GST Inc)
                
              
            
          

          

          

            

              

                

                  
                
                

                  
 GGPC Legend
                  X
                  
RTX 2070 SUPER Gaming PC

                  
CPU: AMD Ryzen 7
                  
GPU: Nvidia RTX 2070 Super
                  
Memory: 16GB

                

              
              


                

                  
$2,413.85 (GST Inc)
                
              
            
          

          


          


            

              
Subtotal
              
GST
              
Delivery
              TOTAL
            
            

              
$2,753.35
              
$398.16
              
$26.97
              
$3,172.11
            
            Checkout