#1 Add Incomes and Expenses

[SophiaLinetti]

Value proposition

As a User I want to insert my income and expenses so that I can track my finances in a list

Description

Acceptance criteria

• [ ] On the homepage, there is a list of current income and expenses.
• [ ] The user can fill in a form with the following information:
• [ ] Date*
• [ ] Amount*
• [ ] Category*
• [ ] Income or expense*
• [ ] Description
• [ ] The user needs to fill in the required fields (marked with *) to submit the form.
• [ ] When submitting, a new entry is created. Every entry contains the required information.
• [ ] The last list item should be at the top of the list.
• [ ] The date is a calendar, so it is possible to pick the exact date for expenses/income.
• [ ] The user can only fill in numbers in the amount field and text in description fields;
• [ ] the category is a dropdown menu with some selected categorys
• [ ] The user can either click a button whether it is an income or an expense, both together are not possible.
• [ ] If the user does not fill in the required field, an error message is shown.

Tasks

• [ ] Create a new Next.js app called Budget App.
• [ ] Create a new file called data.json in the root directory of the app. This file will contain the initial data for the app.
• [ ] Create a new component called Form in the components folder. This component will render a form with the following fields:
• [ ] Date
• [ ] Amount
• [ ] Category
• [ ] Income or expense (implemented as two radio buttons)
• [ ] Description
• [ ] Create a new component called List in the components folder. This component will render a list of current income and expenses.
• [ ] Use a single global useState hook to manage the form data and the list of income and expenses. Here’s an example of how
• [ ] to use useState:

function Form() {
  const [transactions, setTransactions] = useState(data.json);

  // ...
}

• [ ] Implement validation logic to ensure that the user fills in the required fields before submitting the form.
• [ ] Implement logic to create a new entry when the user submits the form.
• [ ] Implement logic to display the last list item at the top of the list.
• [ ] Implement a calendar by using an input field with type "date" to allow the user to pick the exact date for expenses/income.
• [ ] Implement logic to prevent the user from filling in both income and expense fields.
• [ ] Implement error handling to show an error message when the user does not fill in the required fields.

Here’s an example of how to create a new component called List in the components folder:

function List() {
  return (
    <ul>
      {transactions.map((transaction) => (
        <li key={transaction.id}>
          {transaction.date} - {transaction.amount} - {transaction.category} - {transaction.incomeOrExpense} - 
            {transaction.description}
        </li>
      ))}
    </ul>

  );
}

Heres an example of data.js initial entries:

export const transactions = [
    {
      id: "1",
      typ: "income",
      amount: 2500,
      date: "2024-01-15",
      description: "McDonalds with my Grandmother"
      category: "food",

    },
    {
      id: "2",
      typ: "expense",
      amount: 50,
      date: "2024-01-16",
      description : "Yoga Session"
      category: "sports",
    },
   ...
]

[ahohnsen]

Your title is somewhat too generic. There could be several types of forms and lists in your app. Please be more specific so you can easily and quickly assign this user story, for example: Add Incomes and Expenses

Just a small hint: You don't need to implement a calendar. If you choose "date" as the type for your input field, a calendar will automatically be displayed to the user when they click on the input field.

💡 Also, you don't need the example code in your tasks. If it helps you, you can of course keep it, but it's not a must.

Additionally, your data model is not correctly written down. As we discussed yesterday, you will either use a JSON/js file or save the data in a constant directly in the component where your useState is. This constant will then simply contain an array of objects.

Example for data.js file:

export const transactions = [
    {
      id: "1",
      typ: "income",
      amount: 2500,
      date: "2024-01-15",
      description: "McDonalds with my Grandmother"
      category: "food",

    },
    {
      id: "2",
      typ: "expense",
      amount: 50,
      date: "2024-01-16",
      description : "Yoga Session"
      category: "sports",
    },
   ...
]