manikanta251 / reactjs-moneymanager

In this practice let's build a Money Manager by applying the concepts we have learned till now.

Link to the page is given below:

https://mkmoneymanager.ccbp.tech/

Refer to the image below:

Design Files

Click to view the Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Project Set Up Instructions

Click to view the Set Up Instructions

• Download dependencies by running npm install
• Start up the app using npm start

Project Completion Instructions

Click to view the Functionality to be added

Add Functionality

The app must have the following functionalities

• Initially, Balance Amount, Income Amount, and Expenses Amount should display as 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.

• Initially, the value of the titleInput should be empty.

• Initially, the value of the amountInput should be empty.

• Initially, the value of the transaction optionId should be the first option in the transactionTypeOptions

• The transaction options will have the following properties

  Key	Data Type
  optionId	String
  displayText	String

• When the transaction is added, by providing the values in the titleInput, amountInput and optionId and clicked the add button

  • One 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.

Click to view the Implementation Files

• Your task is to complete the implementation of
  • 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

Click to view the Components Structure

Components Structure

Important Note

Click to view Important Note Points

The following HTML attributes are required for the HTML for the tests to pass

• The Balance Amount paragraph element should have the testid as balanceAmount
• The Income Amount paragraph element should have the testid as incomeAmount
• The Expenses Amount paragraph element should have the testid as expensesAmount
• The Delete button for each transaction should have the testid as delete

Resources

Image URLs

Images

• https://assets.ccbp.in/frontend/react-js/money-manager/money-manager-bg.png header background image
• 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 alt should be income
• 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 alt should be delete

Colors

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.