Add transaction (DOM only)

src/App.vue

@@ -4,7 +4,7 @@
     <Balance :total="total" />
     <IncomeExpenses :income="+income" :expenses="+expenses" />
     <TransactionList :transactions="transactions" />
-    <AddTransaction />
+    <AddTransaction @transactionSubmitted="handleTransactionSubmitted" />
   </div>
 </template>
 
@@ -17,6 +17,10 @@ import AddTransaction from './components/AddTransaction.vue';
 
 import { ref, computed } from 'vue';
 
+import { useToast } from 'vue-toastification';
+
+const toast = useToast();
+
 const transactions = ref([
   { id: 1, text: 'Flower', amount: -19.99 },
   { id: 2, text: 'Salary', amount: 299.97 },
@@ -46,4 +50,20 @@ const expenses = computed(() => {
     .reduce((acc, transaction) => acc + transaction.amount, 0)
     .toFixed(2);
 });
+
+// Submit transaction
+const handleTransactionSubmitted = (transactionData) => {
+  transactions.value.push({
+    id: generateUniqueId(),
+    text: transactionData.text,
+    amount: transactionData.amount,
+  });
+
+  toast.success('Transaction added.');
+};
+
+// Generate unique ID
+const generateUniqueId = () => {
+  return Math.floor(Math.random() * 1000000);
+};
 </script>

src/components/AddTransaction.vue

@@ -31,15 +31,21 @@ const amount = ref('');
 // Get toast interface
 const toast = useToast();
 
+const emit = defineEmits(['transactionSubmitted']);
+
 const onSubmit = () => {
   if (!text.value || !amount.value) {
     // Display a toast error message if either field is empty
     toast.error('Both fields must be filled.');
     return;
   }
 
-  // Proceed with form submission logic here...
-  console.log('Form submitted:', text.value, amount.value);
+  const transactionData = {
+    text: text.value,
+    amount: parseFloat(amount.value),
+  };
+
+  emit('transactionSubmitted', transactionData);
 
   // Clear form fields
   text.value = '';