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;