Scribd
Upload
10 views4 pages

Ex2 App Development

The document describes building a cross platform expense manager application that allows users to enter expenses and income each day and displays a weekly report of total income and expenses by category. It outlines steps to initialize state, add transactions, and calculate a weekly report grouping transactions by category and type.

Uploaded by

Suresh Suresh K
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views4 pages

Ex2 App Development

The document describes building a cross platform expense manager application that allows users to enter expenses and income each day and displays a weekly report of total income and expenses by category. It outlines steps to initialize state, add transactions, and calculate a weekly report grouping transactions by category and type.

Uploaded by

Suresh Suresh K
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

lOMoARcPSD|20362530

BUILD A CROSS PLATFORM APPLICATION FOR A


Ex.No: 2 MPLE EXPENSE MANAGER WHICH ALLOW
Date: ENTERING EXPENSES AND INCOME ON EACH DAY
AND DISPLAY THE CATEGORY WISE WEEKLY
INCOME AND EXPENSES

AIM:
To build a cross platform application for a simple expense manager which allows
entering expenses and income on each day and display category wise weekly income and
expenses.

PROCEDURE:

Step 1: Initialize state variables using `useState` for `transactions`, `amount`, `category`, and
`transactionType`.
Step 2: When the "Add Transaction" button is clicked.
Step 3: Check if both `amount` and `category` fields have values.
Step 4: If they do:
Step 5: Create a new transaction object with type, amount, category, and the current date.
Step 6: Add this transaction to the `transactions` array using `setTransactions`.
Step 7: Reset `amount` and `category` to empty strings.
Step 8: `calculateWeeklyReport` function.
Step 9: Iterate through `transactions`.
Step 10: Group transactions by category, summing their income and expenses separately.
Step 11: Construct an object containing categories with their respective income and expenses
for the week.
Step 12: Display input fields for `amount`, `category`, and a dropdown for `transactionType`.
Step 13: Allow users to input values for these fields.
Step 14: Provide an "Add Transaction" button to add transactions based on user input.
Step 15: Show a categorized list of income and expenses for the week, generated from
`calculateWeeklyReport`.

PROGRAM:

import React, { useState } from 'react';


const ExpenseManager = () => {
const [transactions, setTransactions] = useState([]);
lOMoARcPSD|20362530

const [amount, setAmount] = useState('');


const [category, setCategory] = useState('');
const [transactionType, setTransactionType] = useState('Expense');
const addTransaction = () => {
if (amount && category) {
const newTransaction = {
type: transactionType,
amount: parseFloat(amount),
category,
date: new Date().toISOString(),
};
setTransactions([...transactions, newTransaction]);
setAmount('');
setCategory('');
}
};
const calculateWeeklyReport = () => {
const categories = transactions.reduce((acc, transaction) => {
const { category, type, amount } = transaction;
acc[category] = acc[category] || { income: 0, expense: 0 };
acc[category][type.toLowerCase()] += amount;
return acc;
}, {});
return Object.entries(categories).map(([category, { income, expense }]) => ({
category,
income,
expense,
}));
};
return (
<div>
<h1>Expense Manager</h1>
<label>
Amount:
<input
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
</label>
lOMoARcPSD|20362530

<br />
<label>
Category:
<input
type="text"
value={category}
onChange={(e) => setCategory(e.target.value)}
/>
</label>
<br />
<label>
Transaction Type:
<select
value={transactionType}
onChange={(e) => setTransactionType(e.target.value)}
>
<option value="Expense">Expense</option>
<option value="Income">Income</option>
</select>
</label>
<br />
<button onClick={addTransaction}>Add Transaction</button>
<div>
<h2>Weekly Report:</h2>
<ul>
{calculateWeeklyReport().map((item) => (
<li key={item.category}>
<h3>Category: {item.category}</h3>
<p>Income: {item.income}</p>
<p>Expense: {item.expense}</p>
</li>
))}
</ul>
</div>
</div>
);
};
function App() {
return (
<div className="App">
lOMoARcPSD|20362530

<ExpenseManager />
</div>
);
}
export default App;

OUTPUT:

Result:
The cross platform application for a income-expense displayer using react-native was
built successfully.

You might also like