Challenge: Building a Budgeting Application in Vue 3

In this challenge lab, you will be completing a simple budgeting application using the Vue front-end framework. You will be working on 4 files, which are BudgetForm.vue, BudgetItem.vue, BudgetList.vue, and App.vue. Completing this lab will involve the usage of essential Vue concepts such as event emissions, data binding, and interactions between parent and child components.

The app can be run at anytime by clicking the Run button at the bottom right of the terminal or by running the command npm run dev -- --host within the terminal. You can view the app webpage in the Web Browser tab by refreshing the page.

First, you will need to complete the BudgetForm component. This component contains the form and input elements that allow the user to specify a total budget amount and the cost of each item.

Requirements

1. `description` should be set to an empty string. 2. `itemAmount` and `budgetAmount` should be initialized to 0.

Requirements

1. The method should emit the `'set-budget-amount'` event with the correct payload. 2. Reset `this.budgetAmount` after.

Requirements

1. The method should emit the `'add-item'` event with the correct payload. 2. Reset `this.description` and `this.itemAmount` after.

Requirements

1. The `form` should have a submit binding that prevents default behavior. The value of this binding should be `"submitBudgetAmountForm"`. 2. The `input` element should have a two-way number binding for `"budgetAmount"`. 3. The `input` element should have `type` and `required` attributes. It accepts numbers. 4. The `input` element should have a `pattern` element that accepts only numbers and decimals.

Requirements

1. The `form` should have a submit binding that prevents default behavior. The value of this binding should be `"submitItemForm"`. 2. The `input` element with the class `item-desc` should have a two-way binding set to `"description"`. 3. The `input` element with the class `item-desc` needs a `type` and `required` attribute. It accepts text. 4. The `input` element with the class `item-amount` needs a two-way number binding set to `"itemAmount"`. 5. The `input` element with the class `item-amount` also needs a `type` and `required` attribute. It accepts numbers. 6. The `input` element with the class `item-amount` should have a `pattern` attribute that only accepts numbers and decimals.

With the BudgetForm component done, a user can now input a total budget amount as well an item that has a description and amount. Now, you will need a BudgetItem component to display the item that a user inputs.

Requirements

1. `item` should be an `Object` type and have `required` set to `true`.

Requirements

1. The format of the display should look like `exampleDesc - exampleAmount`. 2. Use `toFixed()` on the amount. It should go up to two decimals.

Now that BudgetItem is completed, you will need a component that displays all of them. This is where BudgetList comes into play. As you may notice at the top of BudgetList.vue, the BudgetItem component has been imported.

You will need to make it a child component of the BudgetList so that it can be used by the BudgetList.

Requirements

1. `items` must have a `type` of `Array`. It also needs to be `required` and set to `true`.

Lastly, render the `BudgetItems` as a single element within the `template` section. Although it's a single element, it will actually display all the `BudgetItems` if you use the `v-for` directive to iterate through the `items` prop.

Now that all of the individual components have been completed, it's time to put them all together within App.vue. There's nothing new going on here and will mostly follow the same development paradigms seen in the previous steps.

Requirements

1. `items` should be initialized to an empty array. 2. `totalBudget` should be initialized to 0.

Requirements

1. `setTotalBudget()` should take a single parameter and set the instance variable. 2. `updateTotalBudget()` should first check if there is at least 1 element in `items`. If so, subtract the `itemAmount` of the most recently added item.

Requirements

1. `addItem()` should take a single parameter. 2. `addItem()` should push this `item` to the `items` array and then update the total budget.

Requirements

1. The `BudgetForm` element should have two-way bindings for addItem and setTotalBudget. 2. The `BudgetList` element should have an attribute binding for items.

With these steps completed, your application should be all set and ready to go! Refer back to the introduction on how to *Run* the application and see it for yourself in the *Web Browser*.