Lingutla Prem Kumar Internship

index.html

@@ -35,7 +35,7 @@ <h1>Root Cart</h1>
         <!-- 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 +47,7 @@ <h1>Root Cart</h1>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
     </table>
     <p class="calculate-total">

jest-puppeteer.config.js

@@ -1,6 +1,5 @@
 module.exports = {
-  server: {
-    command: 'serve . -l 4444',
-    port: 4444
-  }
-};
+  preset: 'jest-puppeteer',
+  testMatch: ['**/tests/**/*.spec.js'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'], // Optional: if you have a setup file
+};

js/index.js

@@ -1,42 +1,74 @@
 // ITERATION 1
-
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
-  //... your code goes here
+  const price = parseFloat(product.querySelector('.price span').innerText);
+  const quantity = product.querySelector('.quantity input').value;
+  const subtotal = price * quantity;
+
+  product.querySelector('.subtotal span').innerText = subtotal.toFixed(2);
+  return subtotal;
 }
 
+// ITERATION 2
 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);
-  // end of test
+  const products = document.querySelectorAll('.product');
+  let total = 0;
 
-  // ITERATION 2
-  //... your code goes here
+  products.forEach(product => {
+    total += updateSubtotal(product);
+  });
 
-  // ITERATION 3
-  //... your code goes here
+  document.querySelector('#total-value span').innerText = total.toFixed(2);
 }
 
 // ITERATION 4
-
 function removeProduct(event) {
   const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
+  const productRow = target.closest('.product');
+
+  productRow.remove(); 
+  calculateAll(); 
 }
 
 // ITERATION 5
-
 function createProduct() {
-  //... your code goes here
+  const nameInput = document.querySelector('input[placeholder="Product Name"]');
+  const priceInput = document.querySelector('input[placeholder="Product Price"]');
+
+  if (nameInput.value && priceInput.value) {
+    const cartTableBody = document.querySelector('#cart tbody');
+    const newRow = document.createElement('tr');
+    newRow.classList.add('product');
+
+    newRow.innerHTML = `
+      <td class="name"><span>${nameInput.value}</span></td>
+      <td class="price">$<span>${parseFloat(priceInput.value).toFixed(2)}</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>
+    `;
+
+    cartTableBody.appendChild(newRow);
+
+    newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);
+
+    nameInput.value = '';
+    priceInput.value = '0';
+
+    calculateAll();
+  }
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
-});
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  removeButtons.forEach(button => {
+    button.addEventListener('click', removeProduct);
+  });
+
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
+});

package.json

@@ -10,8 +10,8 @@
     "jest": "^26.6.3",
     "jest-html-reporter": "^3.3.0",
     "jest-junit": "^12.0.0",
-    "jest-puppeteer": "^5.0.3",
-    "puppeteer": "^9.1.1",
+    "jest-puppeteer": "^10.1.4",
+    "puppeteer": "^23.7.1",
     "serve": "^11.3.2"
   },
   "jest": {