Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 7e9ce36

Browse files
pramit-maratthapramit-marattha
authored
Budget manager and calculator (#49)
1 parent ef771f5 commit 7e9ce36

18 files changed

+11278
-1
lines changed

‎budget-manager-react-web-app-project/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![Budget_manager_and_Calculator](https://user-images.githubusercontent.com/37651620/96116885-e91bcb80-0f08-11eb-8653-b0dbb082f68c.png)
2+
3+
## It's Live 🎉 Visit here ==> https://budget-manager-react.netlify.app/
24

35
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
46

‎budget-manager-react-web-app-project/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "budget-manager-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"react": "^16.13.1",
10+
"react-dom": "^16.13.1",
11+
"react-scripts": "3.4.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎budget-manager-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎budget-manager-react-web-app-project/public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<title>Budget Manager</title>
15+
</head>
16+
<body>
17+
<noscript>You need to enable JavaScript to run this app.</noscript>
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎budget-manager-react-web-app-project/public/logo192.png

5.22 KB
Loading

‎budget-manager-react-web-app-project/public/logo512.png

9.44 KB
Loading

‎budget-manager-react-web-app-project/public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎budget-manager-react-web-app-project/public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎budget-manager-react-web-app-project/src/App.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React,{useState,useEffect} from 'react';
2+
import './styles/App.css';
3+
import Header from "./components/Header"
4+
import BudgetForm from "./components/BudgetForm"
5+
import BudgetList from "./components/BudgetList"
6+
import BudgetCalculator from "./components/BudgetCalculator"
7+
8+
function App() {
9+
const [budget, setBudget]= useState([]);
10+
const [totalBudget,setTotalBudget]= useState(0);
11+
12+
13+
useEffect(()=>{
14+
let temp =0
15+
for(let i=0; i<budget.length; i++){
16+
temp +=parseInt(budget[i].price)
17+
}
18+
setTotalBudget(temp);
19+
},[budget])
20+
21+
22+
23+
24+
return (
25+
<>
26+
27+
<Header />
28+
29+
<BudgetForm budget={budget} setBudget={setBudget} />
30+
31+
<BudgetList budget={budget} setBudget={setBudget}/>
32+
33+
<BudgetCalculator totalBudget={totalBudget}/>
34+
</>
35+
);
36+
}
37+
38+
export default App;

‎budget-manager-react-web-app-project/src/components/BudgetCalculator.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
4+
function BudgetCalculator({totalBudget}) {
5+
return (
6+
<>
7+
<div className="total-budget">Total $.{totalBudget}</div>
8+
</>
9+
)
10+
}
11+
12+
export default BudgetCalculator

‎budget-manager-react-web-app-project/src/components/BudgetForm.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React,{useRef} from 'react'
2+
3+
function BudgetForm({budget,setBudget}) {
4+
5+
const description = useRef(null);
6+
const date = useRef(null);
7+
const price = useRef(null);
8+
9+
const AddBudget = (e)=>{
10+
e.preventDefault();
11+
let d = date.current.value.split("-");
12+
let newDate = new Date(d[0],d[1],d[2]);
13+
14+
setBudget([...budget,{
15+
"description": description.current.value,
16+
"price":price.current.value,
17+
"date": newDate.getTime()
18+
}])
19+
20+
description.current.value="";
21+
price.current.value=null;
22+
date.current.value=null;
23+
}
24+
25+
26+
return (
27+
<form className="budget-form" onSubmit={AddBudget}>
28+
<div className="form-inner">
29+
<input type="text" name="desc" id="desc" placeholder="Item Details" ref={description}/>
30+
<input type="number" name="price" id="price" placeholder="price" ref={price}/>
31+
<input type="date" name="date" id="date" placeholder="Select a date" ref={date}/>
32+
<input type="submit" value="ADD Budget"/>
33+
</div>
34+
</form>
35+
)
36+
}
37+
38+
export default BudgetForm

‎budget-manager-react-web-app-project/src/components/BudgetItem.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
3+
function BudgetItem({budget,index,removeBudget}) {
4+
let date = new Date(budget.date);
5+
let day = date.getDate();
6+
let month = date.getMonth();
7+
let year = date.getFullYear();
8+
9+
const removeHandle = (i) =>{
10+
removeBudget(i);
11+
12+
}
13+
14+
15+
return (
16+
<div className="budget-item">
17+
<button className="remove-item" onClick={()=>{removeHandle(index)}}>Delete <span role="img" aria-label="trash">🗑️</span></button>
18+
<div className="desc">{budget.description}</div>
19+
<div className="price">$.{budget.price}</div>
20+
<div className="date">{month + "/" + day + "/" + year + "/"}</div>
21+
22+
</div>
23+
)
24+
}
25+
26+
export default BudgetItem

‎budget-manager-react-web-app-project/src/components/BudgetList.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import BudgetItem from "./BudgetItem"
3+
4+
function BudgetList({budget,setBudget}) {
5+
6+
const removeBudget = i =>{
7+
let temp = budget.filter((v,index)=>index !== i );
8+
setBudget(temp);
9+
}
10+
11+
const sortByDate = (a,b) =>{
12+
return a.date - b.date
13+
}
14+
15+
return (
16+
<div className="budget-list">
17+
{
18+
budget.sort(sortByDate).map((value,index)=>(
19+
<BudgetItem key={index} budget={value} index={index} removeBudget={removeBudget}/>
20+
))
21+
}
22+
</div>
23+
)
24+
}
25+
26+
export default BudgetList

‎budget-manager-react-web-app-project/src/components/Header.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
function Header() {
4+
return (
5+
<header>
6+
<h1>Budget Calculator & Manager</h1>
7+
</header>
8+
)
9+
}
10+
11+
export default Header

‎budget-manager-react-web-app-project/src/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './styles/index.css';
4+
import App from './App';
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App/>
9+
</React.StrictMode>,
10+
document.getElementById('root')
11+
);
12+

0 commit comments

Comments
 (0)