Feat/budget

src/components/Budget/BudgetBox.vue

@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter();
-
 const props = defineProps({
   title: {
     type: String,
@@ -19,16 +18,26 @@ const props = defineProps({
   }
 })
 
+// Calculated balance variable
 let balance = props.budget - props.expenses
-
+// Reactive variable for determining background color
 const iRef = ref(null)
 
+/**
+ * Checks if the balance is positive, and depending on the value
+ * changes background color to green (positive) or red (negative)
+ */
 onMounted(() => {
   if (balance >= 0) {
+    // By default, the background is set to red
     iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
   }
 })
 
+// TODO consider store chosen budget in a pinia store
+/**
+ * Navigates to the pressed budget
+ */
 const onBudgetContainerPressed = () => {
   router.push('/budget')
 }