https://github.com/kirankumar-matham96/money-management-app-react

https://github.com/kirankumar-matham96/money-management-app-react

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kirankumar-matham96/money-management-app-react
• Owner: kirankumar-Matham96
• Created: 2022-05-30T16:23:33.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-31T11:54:08.000Z (about 4 years ago)
• Last Synced: 2025-10-10T08:42:27.848Z (10 months ago)
• Language: JavaScript
• Size: 170 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
In this project, let's build a **Money Manager** app by applying the concepts we have learned till now.

### Refer to the image below:






    






### Design Files

Click to view

- [Extra Small (Size < 576px) and Small (Size >= 576px)](https://assets.ccbp.in/frontend/content/react-js/money-manager-sm-output-v2.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/money-manager-lg-output.png)

### Set Up Instructions

Click to view

- Download dependencies by running `npm install`

- Start up the app using `npm start`

### Completion Instructions

Functionality to be added




The app must have the following functionalities

- Initially, Balance Amount, Income Amount, and Expenses Amount should be `0`

- Balance Amount should be calculated by removing the Expenses Amount from the Income Amount in the list of transactions

- Income Amount should be calculated by removing the Expenses Amount in the list of transactions

- Expenses Amount should be calculated by adding only Expenses Amount in the list of transactions

- The `MoneyManager` component is provided with `transactionTypeOptions`. It consists of a list of transaction type objects with the following properties in each object

  |     Key     | Data Type |

  | :---------: | :-------: |

  |  optionId   |  String   |

  | displayText |  String   |

- Initially, the value of the `titleInput` should be empty

- Initially, the value of the `amountInput` should be empty

- Initially, the first option in the list should be selected

- When a transaction is added, by providing the values in the `titleInput`, `amountInput` and `optionId` and **Add** button is clicked,

  - A new transaction should be added to the transaction history list

  - `totalBalance`, `totalIncome` and `totalExpenses` should be updated accordingly

    ```

    totalBalance = totalIncome - totalExpenses

    ```

  - After updating, the values in the `titleInput`,`amountInput` and `optionId` will be updated to their initial values

- When the delete button in the transaction history is clicked,

  - The respective transaction should be deleted from the transaction history list

  - `totalBalance`, `totalIncome` and `totalExpenses` should be updated accordingly

Components Structure






    






Implementation Files




Use these files to complete the implementation:

- `src/App.js`

- `src/components/MoneyManager/index.js`

- `src/components/MoneyManager/index.css`

- `src/components/MoneyDetails/index.js`

- `src/components/MoneyDetails/index.css`

- `src/components/TransactionItem/index.js`

- `src/components/TransactionItem/index.css`

### Important Note

Click to view




**The following instructions are required for the tests to pass**

- The Balance Amount should have the testid as **balanceAmount**

- The Income Amount should have the testid as **incomeAmount**

- The Expenses Amount should have the testid as **expensesAmount**

- The Delete button for each transaction should have the testid as **delete**

### Resources

Image URLs

- [https://assets.ccbp.in/frontend/react-js/money-manager/money-manager-bg.png](https://assets.ccbp.in/frontend/react-js/money-manager/money-manager-bg.png)

- [https://assets.ccbp.in/frontend/react-js/money-manager/balance-image.png](https://assets.ccbp.in/frontend/react-js/money-manager/balance-image.png) alt should be **balance**

- [https://assets.ccbp.in/frontend/react-js/money-manager/income-image.png](https://assets.ccbp.in/frontend/react-js/money-manager/income-image.png) alt should be **income**

- [https://assets.ccbp.in/frontend/react-js/money-manager/expenses-image.png](https://assets.ccbp.in/frontend/react-js/money-manager/expenses-image.png) alt should be **expenses**

- [https://assets.ccbp.in/frontend/react-js/money-manager/delete.png](https://assets.ccbp.in/frontend/react-js/money-manager/delete.png) alt should be **delete**

Colors




Hex: #475569

Hex: #0b69ff

Hex: #ecfccb

Hex: #84cc16

Hex: #cffafe

Hex: #06b6d4

Hex: #ede9fe

Hex: #7c3aed

Hex: #cbd5e1

Hex: #7e858e

Hex: #ffffff

Hex: #1e293b

Hex: #d7dfe9

Hex: #334155


Font-families

- Roboto

> ### _Things to Keep in Mind_

>

> - All components you implement should go in the `src/components` directory.

> - Don't change the component folder names as those are the files being imported into the tests.

> - **Do not remove the pre-filled code**

> - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.