root-cart

index.html

@@ -32,10 +32,23 @@ <h1>Root Cart</h1>
             <button class="btn btn-remove">Remove</button>
           </td>
         </tr>
+        <tr class="product">
+          <td class="name">
+            <span>SteelSeries Apex 3 RGB Gaming Keyboard</span>
+          </td>
+          <td class="price">$<span>40.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>
+        </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>
@@ -47,7 +60,7 @@ <h1>Root Cart</h1>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
     </table>
     <p class="calculate-total">

js/index.js

@@ -2,41 +2,118 @@
 
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
-
-  //... your code goes here
+  let price = Number(product.querySelector('.price span').innerText);
+  let quantity = Number(product.querySelector('.quantity input').value);
+  let subtotal = price * quantity;
+  product.querySelector('.subtotal span').innerText = subtotal;
+  return subtotal;
 }
 
 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 products = document.getElementsByClassName('product');
+  for (let i = 0; i < products.length; i++) {
+    updateSubtotal(products[i]);
+  }
   // ITERATION 3
-  //... your code goes here
+  let total = 0;
+  for (let i = 0; i < products.length; i++) {
+    total += Number(products[i].querySelector('.subtotal span').innerHTML);
+  }
+  document.querySelector('#total-value span').innerHTML = total;
 }
 
 // ITERATION 4
-
 function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
-  //... your code goes here
+  let targetProduct = target.parentNode.parentNode;
+  let targetCart = targetProduct.parentNode;
+  console.log(targetCart);
+  document.querySelector('#total-value span').innerHTML =
+    Number(document.querySelector('#total-value span').innerHTML) -
+    Number(targetProduct.querySelector('.subtotal span').innerHTML);
+  targetCart.removeChild(targetProduct);
 }
 
 // ITERATION 5
+function createProduct(event) {
+  let target = event.currentTarget;
+  let parentTarget = target.parentNode.parentNode;
+  let proName = parentTarget
+    .getElementsByTagName('td')[0]
+    .getElementsByTagName('input')[0].value;
+  let price = parseFloat(
+    parentTarget.getElementsByTagName('td')[1].getElementsByTagName('input')[0]
+      .value
+  ).toFixed(2);
+
+  let nameHolder = document.createElement('td');
+  let nameTag = document.createElement('span');
+  let nameText = document.createTextNode(proName);
+  nameTag.appendChild(nameText);
+  nameHolder.appendChild(nameTag);
+  nameHolder.className = 'name';
+
+  let priceHolder = document.createElement('td');
+  priceHolder.innerHTML = '$';
+  let priceTag = document.createElement('span');
+  let priceText = document.createTextNode(price);
+  priceTag.appendChild(priceText);
+  priceHolder.appendChild(priceTag);
+  priceHolder.className = 'price';
 
-function createProduct() {
-  //... your code goes here
+  let quantityHolder = document.createElement('td');
+  let qInput = document.createElement('input');
+  qInput.type = 'number';
+  qInput.defaultValue = '0';
+  qInput.min = '0';
+  qInput.placeholder = 'Quantity';
+  quantityHolder.appendChild(qInput);
+  quantityHolder.className = 'quantity';
+
+  let subtotalHolder = document.createElement('td');
+  subtotalHolder.innerHTML = '$';
+  let subtotalTag = document.createElement('span');
+  subtotalTag.innerHTML = 0;
+  subtotalHolder.appendChild(subtotalTag);
+  subtotalHolder.className = 'subtotal';
+
+  let actionHolder = document.createElement('td');
+  let buttonTag = document.createElement('button');
+  buttonTag.innerHTML = 'Remove';
+  actionHolder.appendChild(buttonTag);
+  actionHolder.className = 'action';
+  buttonTag.className = 'btn btn-remove';
+  buttonTag.addEventListener('click', removeProduct);
+
+  let productHolder = document.createElement('tr');
+  productHolder.appendChild(nameHolder);
+  productHolder.appendChild(priceHolder);
+  productHolder.appendChild(quantityHolder);
+  productHolder.appendChild(subtotalHolder);
+  productHolder.appendChild(actionHolder);
+  productHolder.className = 'product';
+
+  let prodList = document.getElementsByTagName('tbody')[0];
+  prodList.appendChild(productHolder);
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  let removeBtns = document.getElementsByClassName('btn-remove');
+  for (let i = 0; i < removeBtns.length; i++) {
+    removeBtns[i].addEventListener('click', removeProduct);
+  }
+
+  let createBtn = document.getElementById('create');
+  createBtn.addEventListener('click', createProduct);
 });