Project 1 - Expense tracker
// import logo from './logo.svg';
import './App.css';
import ExpenseTracker from './ExpenseTracker';
import ExpenseForm from './ExpenseForm';
import Balance from './Balance';
import {createContext,useState} from 'react';
import ExpenseList from './ExpenseList';
// import ExpenseChart from "./ExpenseChart"
export const Appcontext=createContext(null);
function App() {
const [name,setname]=useState("")
const [amount,setamount]=useState("")
const [income,setincome]=useState(0);
const [expense,setexpense]=useState(0);
const [elist,setelist]=useState([]);
const [balance,setbalance]=useState(0)
const [editid,seteditid]=useState(null)
const [day,setday]=useState([])
const handlesubmit=()=>{
const Amount=parseInt(amount);
if(name === "" || amount === ""){
alert("Type Name and Amount")
}
if(Amount > 0){
setbalance(Amount+balance)
setincome(Amount+balance)
}
else{
setbalance(balance + Amount);
setexpense(prevCount => prevCount + Amount);
}
if(editid){
const newtransaction=elist.map((t)=>(
t.id === editid ? {id:editid,name,amount}:t
))
setelist( newtransaction)
seteditid(null)
}
else{
setelist([...elist,{id:Date.now(),name:name,amount:amount}]);
setname("");
setamount("");
setday("")
}
}
return (
<div className='expenseelement'>
<Appcontext.Provider value={{name,setname,amount,setamount,income,setincome,expense,setexpense,elist,setelist,handlesubmit,balance,setbalance,seteditid,day,setday}}>
<div className="title">
<ExpenseTracker/>
</div>
<div className='head'>
<div className='body'>
<div className='section2'>
<Balance/>
</div>
<div className="form">
<ExpenseForm />
</div>
</div>
<div className="body1">
<ExpenseList/>
</div>
{/* */}
</div>
</Appcontext.Provider>
</div>
);
}
export default App;
import React from 'react'
export default function ExpenseTracker() {
return (
<div>
<h1>Expense Tracker</h1>
</div>
)
}
import React,{useContext} from 'react'
import {Appcontext} from './App'
export default function ExpenseForm() {
const {setname,setamount,handlesubmit,name,amount,day,setday}=useContext(Appcontext);
const style={
padding:"20px",
width:"400px",
marginLeft:"100px"
}
const style1={
width:"350px",
height:"30px",
borderRadius:"5px",
}
const style2={
marginTop:"30px"
}
const button={
padding:"10px",
borderRadius:"10px",
marginTop:"15px",
}
return (
<div>
<h1>New Transaction</h1>
<div style={style}>
<fieldset >
<legend>Enter Name</legend>
<input type="text" id='Enter Name' placeholder='Enter Name' style={style1} value={name} onChange={(e)=>setname(e.target.value)}/>
</fieldset>
<fieldset style={style2}>
<legend>Enter Amount</legend>
<input type="number" id='Enter amount' placeholder='Enter Amount' style={style1} value={amount} onChange={(e)=>setamount(e.target.value) }/>
</fieldset>
{/*
<input type="text" id='Enter Day' placeholder='Enter Day' style={style1} value={day} onChange={(e)=>setday(e.target.value) }/>
*/}
<button style={button} onClick={handlesubmit}>Add Transaction</button>
</div>
</div>
)
}
import React,{useContext} from 'react'
import {Appcontext} from './App'
export default function Balance() {
const {income,expense,balance}=useContext(Appcontext);
const style={
padding:"10px",
wordSpacing:"250px"
}
return (
<div>
<h1>Balance:{balance}</h1>
<div>
<h3 style={style}>Income:{income} Expense:{expense}</h3>
</div>
</div>
)
}
import React,{useContext} from 'react'
import {Appcontext} from './App'
export default function ExpenseList() {
const {elist,setname,setamount,seteditid,setelist}=useContext(Appcontext);
const handleEdit=(lst)=>{
// e.preventDefault();
seteditid(lst.id)
setname(lst.name)
setamount(lst.amount)
}
const styles={
backgroundColor:"yellow",
padding:"10px",
width:"400px",
marginTop:"20px"
}
const button={
padding:"10px",
borderRadius:"10px",
marginTop:"15px",
marginLeft:"20px",
width:"90px",
backgroundColor:"#FF8C00"
}
const handleDelete=(id)=>{
setelist(elist.filter(lst => lst.id !== id))
}
return (
<>
<div>
<h1>Expense List</h1>
{elist.map((lst,i) => (
<div key={i} style={styles}>
{lst.name} {lst.amount}
<button style={button} onClick={e=>handleEdit(lst)}>Edit</button>
<button style={button} onClick={e=>handleDelete(lst.id)}>Delete</button>
</div>
))}
</div>
</>
);
}