https://github.com/VictorMartins1310/W5lab-dom-ironhack-cart.git

css/style.css

@@ -65,3 +65,7 @@ h2,
 .calculate-total {
   text-align: center;
 }
+
+#create {
+  background-color: forestgreen;
+}

index.html

@@ -20,40 +20,48 @@ <h1>Ironhack Cart</h1>
       </thead>
       <tbody>
         <tr class="product">
-          <td class="name">
-            <span>Ironhack Rubber Duck</span>
-          </td>
+          <td class="name"><span>Ironhack Rubber Duck</span></td>
           <td class="price">$<span>25.00</span></td>
-          <td class="quantity">
-            <input type="number" value="0" min="0" placeholder="Quantity" />
-          </td>
-          <td class="subtotal">$<span>0</span></td>
-          <td class="action">
-            <button class="btn btn-remove">Remove</button>
-          </td>
+          <td class="quantity"><input type="number" value="0" min="0" placeholder="Quantity" /></td>
+          <td class="subtotal">$<span>0.00</span></td>
+          <td class="action"><button class="btn btn-remove">Remove</button></td>
+        </tr>
+        <tr class="product">
+          <td class="name"><span>Ironhack Rubber Dog</span></td>
+          <td class="price">$<span>13.00</span></td>
+          <td class="quantity"><input type="number" value="0" min="0" placeholder="Quantity" /></td>
+          <td class="subtotal">$<span>0.00</span></td>
+          <td class="action"><button class="btn btn-remove">Remove</button></td>
+        </tr>
+        <tr class="product">
+          <td class="name"><span>Spotify</span></td>
+          <td class="price">$<span>7.00</span></td>
+          <td class="quantity"><input type="number" value="0" min="0" placeholder="Quantity" /></td>
+          <td class="subtotal">$<span>0.00</span></td>
+          <td class="action"><button class="btn btn-remove">Remove</button></td>
         </tr>
-        <!-- Iteration 2: Add more products here -->
       </tbody>
       <tfoot>
-        <!-- <tr class="create-product">
+        <tr class="create-product">
           <td>
             <input type="text" placeholder="Product Name" />
           </td>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input type="number" min="0" value="0" step="0.01" placeholder="Product Price" />
           </td>
           <td></td>
           <td></td>
           <td>
-            <button id="create" class="btn">Create Product</button>
+            <button id="create" class="btn">Create</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
     </table>
     <p class="calculate-total">
       <button id="calculate" class="btn btn-success">Calculate Prices</button>
     </p>
-    <h2 id="total-value">Total: $<span>0</span></h2>
+    <h2 id="total-value">Total: $<span>0.00</span></h2>
     <script type="text/javascript" src="./src/index.js"></script>
+    <!-- <script type="text/javascript" src="./src/asyncJS.js"></script> -->
   </body>
 </html>

src/index.js

@@ -4,20 +4,32 @@ function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
   //... your code goes here
+  const price = product.querySelector('.price span');
+  const quantity = product.querySelector('.quantity input');
+  let total = quantity.value * price.innerText;
+  let totalHTML = product.querySelector('.subtotal span');
+  totalHTML.innerText = total;
+  return total;
 }
 
 function calculateAll() {
   // code in the following two lines is added just for testing purposes.
   // it runs when only iteration 1 is completed. at later point, it can be removed.
-  const singleProduct = document.querySelector('.product');
-  updateSubtotal(singleProduct);
+  // const singleProduct = document.querySelector('.product');
+  // updateSubtotal(singleProduct);
   // end of test
 
   // ITERATION 2
-  //... your code goes here
+  let total = 0;
+  const multipleProducts = document.getElementsByClassName("product");
+  for (let i = 0; i < multipleProducts.length; i++) {
+    total += updateSubtotal(multipleProducts[i]);
+  }
 
+
   // ITERATION 3
-  //... your code goes here
+  document.querySelector('#total-value span').innerText = total;
+
 }
 
 // ITERATION 4
@@ -26,17 +38,113 @@ function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
   //... your code goes here
+  const elementRemove = target.parentNode.parentNode;
+  elementRemove.remove();
 }
 
 // ITERATION 5
 
+function addLine(name, cost){
+  let table = document.getElementById('cart');
+  let line, cell, input;
+
+  // Defining a line of the Table
+  line = document.createElement('tr');
+  line.setAttribute("class", "product");
+
+  //First Cell
+  cell = document.createElement('td');
+  cell.setAttribute("class", "name");
+
+  input = document.createElement('span');
+  input.innerText = name
+
+  cell.appendChild(input);
+  line.appendChild(cell);
+
+  // Second Cell
+  cell = document.createElement('td');
+  cell.innerText = "$";
+  cell.setAttribute("class", "price");
+
+
+  input = document.createElement('span');
+  input.innerText = parseFloat(cost).toFixed(2);
+
+
+  cell.appendChild(input);
+  line.appendChild(cell);
+
+  // Third Cell
+  cell = document.createElement('td');
+  cell.setAttribute("class", "quantity");
+
+  input = document.createElement('input');
+  input.setAttribute("type", "number");
+  input.setAttribute("min", "0.00");
+  input.value = 0;
+
+
+  cell.appendChild(input);
+  line.appendChild(cell);
+
+  // Fourth Cell
+  cell = document.createElement('td');
+  cell.innerText = "$"
+  cell.setAttribute("class", "subtotal");
+  input = document.createElement('span');
+  input.innerText = 0;
+
+  cell.appendChild(input);
+  line.appendChild(cell);
+
+  // Fith Cell
+  cell = document.createElement('td');
+  cell.setAttribute("class", "action");
+
+  input = document.createElement('button');
+  input.innerText = "Remove";
+  input.setAttribute("class", "btn btn-remove");
+  input.addEventListener('click', removeProduct)
+
+  cell.appendChild(input);
+  line.appendChild(cell);
+
+  console.log(line);
+  table.appendChild(line);
+
+}
+
+
 function createProduct() {
   //... your code goes here
+  const newProduct = document.getElementsByClassName("create-product");
+  let productName = newProduct[0].querySelectorAll('td input')[0];
+  let productValue = newProduct[0].querySelectorAll('td input')[1];
+
+
+  if (productName.value !== "" && productValue.value !== ""){
+    console.log(productName.value + " and costs " + productValue.value);
+
+    let newLine = document.createElement('h3');
+    addLine(productName.value, productValue.value);
+
+    productName.value = "";
+    productValue.value = "";
+  }
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
   //... your code goes here
+
+  const removeButtons = document.querySelectorAll('.action .btn.btn-remove');
+  for (let i = 0; i < removeButtons.length; i++) {
+   removeButtons[i].addEventListener('click', removeProduct);
+  }
+
+  const addProductButton = document.getElementById("create");
+  addProductButton.addEventListener('click', createProduct)
 });