Project 1 - Expense tracker
Project 1 - Expense tracker
APP.JS
import { useState } from 'react';
import { Typography, Box, styled } from '@mui/material';
import './App.css';
import Balance from './component/Balance';
import ExpenseCard from './component/ExpenceCard.jsx';
import Transactions from './component/Transactions';
import NewTransaction from './component/NewTransaction.jsx';
const Header = styled(Typography)`
margin: 10px 0;
color: blue;
font weight: bold;
font-size: 36px;
text-transform: uppercase;
`;
const Component = styled(Box)`
background: #FFF;
padding: 10px;
border-radius: 20px;
display: flex;
justify-content:center;
width: 800px;
margin: 10px 350px;
& > div {
padding: 10px;
width: 50%;
height: 70vh;
}
}
`;
function App() {
const [transactions, setTransactions] = useState([
{ id: 1, text: 'Momos', amount: -20},
{ id: 2, text: 'Salary', amount: 3000},
{ id: 3, text: 'Book', amount: -100},
{ id: 4, text: 'Bonus', amount: 1500 },
]);
const deleteTransaction = (id) => {
console.log(id);
setTransactions(transactions.filter(transaction => transaction.id !== id));
console.log(transactions);
}
const addTransaction = (transaction) => {
setTransactions(transactions => [transaction, ...transactions]);
console.log(transaction);
console.log(transactions);
}
return (
<div className="App">
<Header>Expense Tracker</Header>
<Component>
<Box>
<Balance transactions={transactions} />
<ExpenseCard transactions={transactions} />
<NewTransaction addTransaction={addTransaction}/>
</Box>
<Box>
<Transactions transactions={transactions} deleteTransaction={deleteTransaction}/>
</Box>
</Component>
</div>
);
}
export default App;
- Create an expense tracker application which should perform following operations
- User should be able to add expense for an item for required month
- User Should be able to update expense at any given point of time
- User should be able to delete expense at any given point in time
- User should be able to see comparative analysis of year wide expenses with bar graph visualization
Ans
Creating 5 component for completing this project
1-Balance.jsx
2-ExpenceCard.jsx
3-NewTransactio.jsx
4.Transaction.jsx
5-Transactions.jsx
1-Balance.jsx
import { Typography, styled, Box } from '@mui/material';
const BalanceText = styled(Typography)`
font-size: 25px;
margin-bottom: 20px;
`
const Balance = ({ transactions }) => {
const amount = transactions.map(transaction => transaction.amount);
const total = amount.reduce((amount, item) => (amount += item), 0).toFixed(2);
return (
<Box>
<BalanceText>Balance: ₹{total}</BalanceText>
</Box>
)
}
export default Balance;
2-ExpenceCard.jsx
import { Card, CardContent, styled, Typography, Box } from '@mui/material';
const Container = styled(Box)`
display: flex;
& > div {
flex: 1;
padding: 10px;
}
`;
const ExpenseCard = ({ transactions }) => {
const amount = transactions.map(transaction => transaction.amount);
const income = amount.filter(item => item > 0).reduce((acc, item) => (acc+=item), 0).toFixed(2);
const expense = (amount.filter(item => item < 0).reduce((acc, item) => (acc+=item), 0) * -1).toFixed(2);
return (
<Container>
<Card>
<CardContent>
<Typography>Income</Typography>
<Typography style={{ color: 'green' }}>+₹{income}</Typography>
</CardContent>
</Card>
<Card>
<CardContent>
<Typography>Expense</Typography>
<Typography style={{ color: 'red' }}>-₹{expense}</Typography>
</CardContent>
</Card>
</Container>
)
}
export default ExpenseCard;
3-NewTransactio.jsx
import { useState } from 'react';
import { Typography, Box, TextField, Button, styled } from '@mui/material';
const Container = styled(Box)`
display: flex;
flex-direction: column;
& > h5, & > div, & > button {
margin-top: 30px
}
`;
const StyledButton = styled(Button)`
background: #445A6F;
color: #fff;
`;
const NewTransaction = ({ addTransaction }) => {
const [text, setText] = useState('');
const [amount, setAmount] = useState();
const newTransaction = e => {
const transaction = {
id: Math.floor(Math.random() * 100000000),
text: text,
amount: +amount
}
addTransaction(transaction);
}
return (
<Container>
<Typography variant="h5">New Transaction</Typography>
<TextField value={text} label="Enter Expense" onChange = {(e) => setText(e.target.value)} />
<TextField value={amount} label="Enter Amount" onChange = {(e) => setAmount(e.target.value)} />
<StyledButton variant="contained" onClick={newTransaction}>Add Transaction</StyledButton>
</Container>
)
}
export default NewTransaction;
4.Transaction.jsx
import { ListItemText, ListItem, styled, ListItemIcon } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
const List = styled(ListItem)`
display: flex;
marginTop: 10px;
border: 1px solid #F6F6F6;
`;
const Transaction = ({transaction, deleteTransaction}) => {
const sign = transaction.amount >= 0 ? '₹' : '-₹';
const amount = sign + Math.abs(transaction.amount);
const color = transaction.amount >=0 ? 'Green' : 'Red';
return (
<List style={{background: `${color}`, color: '#fff'}}>
<ListItemIcon>
<DeleteIcon onClick={() => deleteTransaction(transaction.id)} />
</ListItemIcon>
<ListItemText primary={transaction.text} />
<ListItemText primary={amount} />
</List>
)
}
export default Transaction;
5-Transactions.jsx
import { Typography, List, Divider, styled, Box } from '@mui/material';
import Transaction from './Transaction';
const Component = styled(Box)`
& > h5 {
margin-bottom: 10px;
}
`;
const Transactions = ({ transactions, deleteTransaction }) => {
return (
<Component>
<Typography variant="h5">Transaction History</Typography>
<Divider style={{width: '100%'}} />
<List>
{
transactions.map(transaction => {
return <Transaction transaction={transaction} deleteTransaction={deleteTransaction} key={transaction.id} />
})
}
</List>
</Component>
)
}
export default Transactions;