making the list dynamic when a product is purchased ($)

src/App.svelte

@@ -2,23 +2,29 @@
  import ShoppingList from "./ShoppingList.svelte";
  import { Button, Table, Form, FormGroup, Label, Input } from "sveltestrap";
 
- let totalPdt = 0;
- let totalPurchases = 0;
+ let name,
+ qty = 1,
+ price;
+ let totalPdt = 0,
+ totalPurchases = 0;
  let list = JSON.parse(localStorage.getItem("shopping-list")) ?? [];
- let name;
- let qty = 1;
- let price;
 
  $: {
  localStorage.setItem("shopping-list", JSON.stringify(list));
  }
 
- $: outstandingProducts = list.filter((item) => !item.bought).length;
+ $: outstandingProducts = list.filter((pdt) => !pdt.bought).length;
+
+ $: totalPurchases = list.reduce((amount, pdt) => {
+ if (pdt.bought) {
+ return amount + parseFloat(pdt.total);
+ } else {
+ return amount;
+ }
+ }, 0);
 
  function addPdt() {
- console.log("nome: " + name);
  totalPdt = qty * price;
- totalPurchases += totalPdt;
 
  list = [
  ...list,
@@ -102,7 +108,7 @@
  {/if}
 
  <div>Outstanding products: {outstandingProducts}</div>
- <div>Total purchases:</div>
+ <span>Total purchases:</span>
  <span>US$ {totalPurchases.toFixed(2)}</span>
 </main>
 

src/ShoppingList.svelte

@@ -4,11 +4,7 @@
 
  const dispatch = createEventDispatcher();
 
- export let bought;
- export let qty;
- export let name;
- export let price;
- export let total;
+ export let bought, qty, name, price, total;
 </script>
 
 <tr>
@@ -17,7 +13,6 @@
  <td><span>{name}</span></td>
  <td><span>{price}</span></td>
  <td><span>{total}</span></td>
- <td><button class="editBtn"><Icon name="three-dots-vertical" /></button></td>
  <td
  ><button class="trashBtn" on:click={() => dispatch("deletePdt")}
  ><Icon name="trash-fill" /></button
@@ -26,8 +21,7 @@
 </tr>
 
 <style>
- .trashBtn,
- .editBtn {
+ .trashBtn {
  padding: 0;
  border: none;
  background-color: white;