2026-10-07 13:19:45 +02:00
parent fc5c2ad59e
commit 1fe62103a8
2 changed files with 32 additions and 2 deletions
@@ -49,11 +49,34 @@
    const { name, price } = product;
    const tdNameEl = createTd(name, 'td-name');
    const tdPriceEl = createTd(price, 'td-price');
-    const trEl = createTr(tdNameEl, tdPriceEl);
+    const tdActionsEl = createTdWithActions();
+
+    const trEl = createTr(tdNameEl, tdPriceEl, tdActionsEl);

    DOM.tbody.appendChild(trEl);
  };

+  const createTdWithActions = () => {
+    const td = document.createElement('td');
+    td.classList.add('td-actions');
+
+    const btnRemove = document.createElement('button');
+    const icon = document.createElement('i');
+    const span = document.createElement('span');
+
+    btnRemove.classList.add('btn', 'btn-danger', 'button-product-remove');
+    icon.classList.add('fas', 'fa-trash-can');
+    span.classList.add('visually-hidden');
+    span.textContent = 'Remove Product';
+
+    btnRemove.appendChild(icon);
+    btnRemove.appendChild(span);
+
+    td.appendChild(btnRemove);
+
+    return td;
+  };
+
  const createTd = (text, ...classNames) => {
    const td = document.createElement('td');
    td.classList.add(...classNames);
@@ -22,17 +22,24 @@
              <tr>
                <th class="th-name">Name</th>
                <th class="th-price">Price in &euro;</th>
+                <th class="th-actions">Actions</th>
              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <td class="td-name">{PRODUCT_NAME}</td>
                <td class="td-price">{PRODUCT_PRICE}</td>
+                <td class="td-actions">
+                  <button class="btn btn-danger button-product-remove">
+                    <i class="fas fa-trash-can"></i>
+                    <span class="visually-hidden">Remove Product</span>
+                  </button>
+                </td>
              </tr> -->
            </tbody>
            <tfoot>
              <tr>
-                <td colspan="2">
+                <td colspan="3">
                  <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                      <input