Scribd
Upload
4 views3 pages

Money Tracker

Uploaded by

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

Money Tracker

Uploaded by

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

create client and server side

in clientb side:
create some content like money we have and a form consisting of name of the
product, date of purchased, description
and below that there will be items you purchased and to be purchased because we
have enough money.and go to styling
useState is used for changing the value in the form
like for name:
const[name, setName] = useState(initialstate: "")
in the form value={name} onChange = {event => setName(event.target.value)}
same for dataandtime and description
and in the form create onSubmit= {addNewTransaction}

create env file to save the backend url as react_app_url;

function addNewTransaction(ev){
ev.preventDefault();
const url = process.env.react_app_url;
const price= name.split(separator:'')[0];
fetch(url,unit:{
method:"POST",
headers: {"content-type":"application/json"},
body:JSON.stringify(value:{price,
name:name.substring(price.length+1),
description,
datetime})
})
.then(res => {
res.json().then(json = > {
console.log("result",json);
})
})
}

create backend
require express
const app = express();
app.get("/api/test",(req,res) => {
res.json(body: "test ok")
});
//endpoint

app.post(path:"/api/transaction",async(req,res)=> {
await mongoose.connect(process.env.MONGO_URL)
const[name,datetime,description,price] = req.body;
const transaction= await Transaction.create({name,datetime,description,price})
res.json(transaction);
})

app.listen(port: 5000);

install and require cors in the backend and app.use(cors());


go to mongodb and create a database and copy the pathof the url

install mongoose

create models: inside create transaction.js:


create schema:
import schema form mongoose
const TransactionSchema = new Schema({
name:{type:"String", required:"True"},
price:{type:"number", required:"True"},
datetime:{type:"date", required:"True"},
description:{type:"String", required:"True"}
}):
const TransactionModel = model(name:"Transaction", TransactionSchema );
module.export = TransactionModel;

import models in index.js

connect with db
install and require("dotenv").config();

app.get('/api/transaction',(req,res)=> {
await mongoose.connect(process.env.MONGO_URL);
await transaction = Transaction.find();
res.json(transaction)
})

const[transaction,setTransaction]=useState(initialState:"")
useEffect({
getTransaction().then(transaction => {

})
},deps:[])
async function getTransaction(){
const url = process.env.react_app_url+'/transaction '
const response = await fetch(url);
const json = await response.json();
return json;
}

in transaction
{transaction.length > 0 && transaction.map(transaction => {
//contents{transaction.name}
{transaction.description}
in classname={"price"+ (transaction.price<0?'red':'green')}>
})}
let balance=0;
for(const transaction of transaction)
balance = balance + transaction.price;
in the first part

You might also like