From b1c724e614ebb69409d57d7201ef5251b9d574cb Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 14:59:51 +0800 Subject: [PATCH 01/25] modified to support auto refresh --- .env | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 00000000..8c519632 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +FAST_REFRESH=false\n diff --git a/package.json b/package.json index a100866d..5be8c8c1 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "react-scripts": "5.0.1" }, "scripts": { - "start": "react-scripts start", + "start": "WATCHPACK_POLLING=true react-scripts start", "build": "react-scripts build" }, "eslintConfig": { From 6d2eaaa97d72e6bca2995a37ed4654e591c1144b Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 15:00:25 +0800 Subject: [PATCH 02/25] minor change to tab title --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index bd669818..fb307ff3 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Rocket Bootcamp Project + 🅾💲🅿💲 app 💰 From a51a0059e2e7813c989659df45e9f7fdc4527e78 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 15:02:09 +0800 Subject: [PATCH 03/25] first working version with very simplistic features --- src/App.js | 38 +++++++++++++---- src/components/DisplayExpense.js | 14 ++++++ src/components/ExpenseForm.js | 73 ++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 8 deletions(-) create mode 100644 src/components/DisplayExpense.js create mode 100644 src/components/ExpenseForm.js diff --git a/src/App.js b/src/App.js index 4a6f800f..8fd7bcf7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,39 @@ import React from "react"; -import logo from "./logo.png"; +// import logo from "./logo.png"; import "./App.css"; +import DisplayExpense from "./components/DisplayExpense"; +import ExpenseForm from "./components/ExpenseForm"; class App extends React.Component { + constructor(props) { + super(props); + this.state = { + expenses: [ + { + item: "Burger", + amount: 4.2, + spenders: ["patrick", "spongebob"], + }, + ], + }; + } + + addRecord = (record) => { + let newArray = [...this.state.expenses, record]; + this.setState({ + expenses: newArray, + }); + }; + render() { + let listOfExpenses = [...this.state.expenses]; return ( -
-
- logo -

- Edit src/App.js and save to reload. -

-
+
+ +

Display all expenses

+ {listOfExpenses.map((entry) => ( + + ))}
); } diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js new file mode 100644 index 00000000..7d1e0418 --- /dev/null +++ b/src/components/DisplayExpense.js @@ -0,0 +1,14 @@ +import React from "react"; + +export default class DisplayExpense extends React.Component{ + render(){ + return ( +
+

+ {this.props.item} - ${this.props.amount} +

+

Spent by - {this.props.spenders}

+
+ ); + } +} \ No newline at end of file diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js new file mode 100644 index 00000000..ea28d89f --- /dev/null +++ b/src/components/ExpenseForm.js @@ -0,0 +1,73 @@ +import React from "react"; + +export default class ExpenseForm extends React.Component { + constructor(props) { + super(props); + this.state = { + item: "", + amount: "", + spenders: [], + }; + } + + handleChange = (e) => { + const { name, value } = e.target; + this.setState({ + [name]: value, + }); + }; + + handleSubmit = (e) => { + e.preventDefault(); + const record = this.state; + this.props.action(record); + this.setState({ + item: "", + amount: "", + spenders: [], + }); + }; + + render() { + return ( +
+
+ +
+ +
+ +
+ +
+
+ ); + } +} From eb488d008c4185d5effc79687fa2d3eb103402a1 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 15:04:21 +0800 Subject: [PATCH 04/25] first working version to add and display records only, very simplistic --- src/App.js | 38 +++++++++++++---- src/components/DisplayExpense.js | 14 ++++++ src/components/ExpenseForm.js | 73 ++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 8 deletions(-) create mode 100644 src/components/DisplayExpense.js create mode 100644 src/components/ExpenseForm.js diff --git a/src/App.js b/src/App.js index 4a6f800f..8fd7bcf7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,39 @@ import React from "react"; -import logo from "./logo.png"; +// import logo from "./logo.png"; import "./App.css"; +import DisplayExpense from "./components/DisplayExpense"; +import ExpenseForm from "./components/ExpenseForm"; class App extends React.Component { + constructor(props) { + super(props); + this.state = { + expenses: [ + { + item: "Burger", + amount: 4.2, + spenders: ["patrick", "spongebob"], + }, + ], + }; + } + + addRecord = (record) => { + let newArray = [...this.state.expenses, record]; + this.setState({ + expenses: newArray, + }); + }; + render() { + let listOfExpenses = [...this.state.expenses]; return ( -
-
- logo -

- Edit src/App.js and save to reload. -

-
+
+ +

Display all expenses

+ {listOfExpenses.map((entry) => ( + + ))}
); } diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js new file mode 100644 index 00000000..7d1e0418 --- /dev/null +++ b/src/components/DisplayExpense.js @@ -0,0 +1,14 @@ +import React from "react"; + +export default class DisplayExpense extends React.Component{ + render(){ + return ( +
+

+ {this.props.item} - ${this.props.amount} +

+

Spent by - {this.props.spenders}

+
+ ); + } +} \ No newline at end of file diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js new file mode 100644 index 00000000..ea28d89f --- /dev/null +++ b/src/components/ExpenseForm.js @@ -0,0 +1,73 @@ +import React from "react"; + +export default class ExpenseForm extends React.Component { + constructor(props) { + super(props); + this.state = { + item: "", + amount: "", + spenders: [], + }; + } + + handleChange = (e) => { + const { name, value } = e.target; + this.setState({ + [name]: value, + }); + }; + + handleSubmit = (e) => { + e.preventDefault(); + const record = this.state; + this.props.action(record); + this.setState({ + item: "", + amount: "", + spenders: [], + }); + }; + + render() { + return ( +
+
+ +
+ +
+ +
+ +
+
+ ); + } +} From fe1ce4cb1f87ef6409b3c302a995b15d4dbcd6f0 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 17:07:19 +0800 Subject: [PATCH 05/25] added GroupForm, a feature to store and display all names of the group who borrowed money --- src/App.js | 16 +++++++++- src/components/DisplayExpense.js | 6 ++-- src/components/ExpenseForm.js | 1 + src/components/GroupForm.js | 53 ++++++++++++++++++++++++++++++++ 4 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/components/GroupForm.js diff --git a/src/App.js b/src/App.js index 8fd7bcf7..602c13fd 100644 --- a/src/App.js +++ b/src/App.js @@ -3,11 +3,13 @@ import React from "react"; import "./App.css"; import DisplayExpense from "./components/DisplayExpense"; import ExpenseForm from "./components/ExpenseForm"; +import GroupForm from "./components/GroupForm"; class App extends React.Component { constructor(props) { super(props); this.state = { + group: [], expenses: [ { item: "Burger", @@ -18,6 +20,13 @@ class App extends React.Component { }; } + addName = (name) => { + let newGroup = [...this.state.group, name]; + this.setState({ + group: newGroup, + }); + }; + addRecord = (record) => { let newArray = [...this.state.expenses, record]; this.setState({ @@ -30,10 +39,15 @@ class App extends React.Component { return (
-

Display all expenses

+
+ +

Display all records of expenses here

{listOfExpenses.map((entry) => ( ))} +

Display complete group list

+ {this.state.group.join(' ')} +
); } diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js index 7d1e0418..52d8ff70 100644 --- a/src/components/DisplayExpense.js +++ b/src/components/DisplayExpense.js @@ -1,7 +1,7 @@ import React from "react"; -export default class DisplayExpense extends React.Component{ - render(){ +export default class DisplayExpense extends React.Component { + render() { return (

@@ -11,4 +11,4 @@ export default class DisplayExpense extends React.Component{

); } -} \ No newline at end of file +} diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index ea28d89f..3e4348a1 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -65,6 +65,7 @@ export default class ExpenseForm extends React.Component { />
+
diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js new file mode 100644 index 00000000..98af8cba --- /dev/null +++ b/src/components/GroupForm.js @@ -0,0 +1,53 @@ +import React from "react"; + +export default class GroupForm extends React.Component { + constructor(props) { + super(props); + this.state = { name: "" }; + } + + handleUserInput = (e) => { + this.setState({ + name: e.target.value, + }); + } + + handleSubmit = (e) => { + e.preventDefault(); + if (!this.state.name) { + return; + } + + const newName = this.state.name.toLowerCase(); + + if (this.props.nameList.includes(newName)) { + this.setState({ + name: "", + }); + } else { + this.props.addName(this.state.name) + this.setState({ + name: "", + }); + } + } + + render() { + return ( +
+
+ + +
+
+ ); + } +} From 7c1d1853ad7923690f7c3dba9e6f64d21963efc4 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 18:25:06 +0800 Subject: [PATCH 06/25] Replaced the textbox input field for Spenders under ExpenseForm.js,replaced with checkboxes --- src/App.js | 10 ++++++---- src/components/DisplayExpense.js | 9 +++++++-- src/components/ExpenseForm.js | 25 ++++++++++++++----------- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index 602c13fd..ba7a93e5 100644 --- a/src/App.js +++ b/src/App.js @@ -38,16 +38,18 @@ class App extends React.Component { let listOfExpenses = [...this.state.expenses]; return (
- -
+

Step 1: Include all who borrowed money

+
+

Step 2: Enter item, amount, and select list of spenders

+ +

Display all records of expenses here

{listOfExpenses.map((entry) => ( ))}

Display complete group list

- {this.state.group.join(' ')} - + {this.state.group.join(" ")}
); } diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js index 52d8ff70..037a231a 100644 --- a/src/components/DisplayExpense.js +++ b/src/components/DisplayExpense.js @@ -1,13 +1,18 @@ import React from "react"; +// const getFormattedPrice = (price) => { +// const priceTwoDecimal = price.toFixed(2); +// return `$${priceTwoDecimal}`; +// }; + export default class DisplayExpense extends React.Component { render() { return (

- {this.props.item} - ${this.props.amount} + {this.props.item} - {this.props.amount}

-

Spent by - {this.props.spenders}

+

Spent by - {this.props.spenders.join(" ")}

); } diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 3e4348a1..2d565601 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -29,6 +29,7 @@ export default class ExpenseForm extends React.Component { }; render() { + let copyOfNameList = [...this.props.fullNameList]; return (
@@ -50,20 +51,22 @@ export default class ExpenseForm extends React.Component { name="amount" value={this.state.amount} onChange={this.handleChange} - placeholder="Insert amount" + placeholder="Insert price" />
- +

Select spenders:

+
    + {copyOfNameList.map((i) => ( +
  • + +
    • + ))} +


From a2e68965af5d7910beee8935248e88000b64ed77 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 23:44:42 +0800 Subject: [PATCH 07/25] comment out default hard coded object under constructor and added a console log under render method --- src/App.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index ba7a93e5..6e88fbaf 100644 --- a/src/App.js +++ b/src/App.js @@ -11,11 +11,11 @@ class App extends React.Component { this.state = { group: [], expenses: [ - { - item: "Burger", - amount: 4.2, - spenders: ["patrick", "spongebob"], - }, + // { + // item: "Burger", + // amount: 4.2, + // spenders: ["patrick", "spongebob"], + // }, ], }; } @@ -48,6 +48,7 @@ class App extends React.Component { {listOfExpenses.map((entry) => ( ))} + {console.log(this.state.expenses)}

Display complete group list

{this.state.group.join(" ")}
From 85b84aee841c995ab3177d229198eb2143213924 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 4 Nov 2022 23:46:54 +0800 Subject: [PATCH 08/25] add feature for when checkbox is checked, the name is pushed into the array of spenders for that particular item --- src/components/ExpenseForm.js | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 2d565601..ebbbe609 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -8,13 +8,26 @@ export default class ExpenseForm extends React.Component { amount: "", spenders: [], }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); } handleChange = (e) => { - const { name, value } = e.target; + const { name, value, checked } = e.target; this.setState({ [name]: value, }); + + if (checked) { + const newSpenderList = [...this.state.spenders, value]; + this.setState({ + spenders: newSpenderList, + }); + } else { + this.setState({ + spenders: this.state.spenders.filter((e) => e !== value), + }); + } }; handleSubmit = (e) => { @@ -39,7 +52,7 @@ export default class ExpenseForm extends React.Component { type="text" name="item" value={this.state.item} - onChange={this.handleChange} + onChange={(e) => this.handleChange(e)} placeholder="Insert name of purchase" /> @@ -50,20 +63,22 @@ export default class ExpenseForm extends React.Component { type="text" name="amount" value={this.state.amount} - onChange={this.handleChange} + onChange={(e) => this.handleChange(e)} placeholder="Insert price" />
-

Select spenders:

+ Select spenders:
    {copyOfNameList.map((i) => (
  • - + this.handleChange(e)} + /> + {i}
    • ))}
From fac92555fbf7b53355d628c249a8f6411f50d934 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sat, 5 Nov 2022 12:46:16 +0800 Subject: [PATCH 09/25] add split bill button --- src/App.js | 13 ++++++++++--- src/components/SplitBill.js | 11 +++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 src/components/SplitBill.js diff --git a/src/App.js b/src/App.js index 6e88fbaf..7297fc27 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import "./App.css"; import DisplayExpense from "./components/DisplayExpense"; import ExpenseForm from "./components/ExpenseForm"; import GroupForm from "./components/GroupForm"; +import SplitBill from "./components/SplitBill"; class App extends React.Component { constructor(props) { @@ -34,23 +35,29 @@ class App extends React.Component { }); }; + splitBill = () => { + console.log("this.state.expenses", this.state.expenses); + }; + render() { let listOfExpenses = [...this.state.expenses]; return (
-

Step 1: Include all who borrowed money

+

Step 1: Include all who owes you money


Step 2: Enter item, amount, and select list of spenders


Display all records of expenses here

- {listOfExpenses.map((entry) => ( - + {listOfExpenses.map((entry, i) => ( + ))} {console.log(this.state.expenses)}

Display complete group list

{this.state.group.join(" ")} +

Step 3: Split the Bill

+
); } diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js new file mode 100644 index 00000000..ce4edc21 --- /dev/null +++ b/src/components/SplitBill.js @@ -0,0 +1,11 @@ +import React from "react"; + +export default class SplitBill extends React.Component { + render() { + return ( +
+ +
+ ); + } +} From 2904dd619afb3718f5c6eacec678d91f602fdd1c Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sat, 5 Nov 2022 12:48:21 +0800 Subject: [PATCH 10/25] add validation to go through with submit form only if all fields are filled, edited input fields for checkbox --- src/components/ExpenseForm.js | 41 ++++++++++++++++++++++------------- src/components/GroupForm.js | 6 ++--- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index ebbbe609..815ad400 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -13,10 +13,14 @@ export default class ExpenseForm extends React.Component { } handleChange = (e) => { - const { name, value, checked } = e.target; + const { name, value } = e.target; this.setState({ [name]: value, }); + }; + + handleChangeCheckBox = (e) => { + const { checked, value } = e.target; if (checked) { const newSpenderList = [...this.state.spenders, value]; @@ -32,6 +36,12 @@ export default class ExpenseForm extends React.Component { handleSubmit = (e) => { e.preventDefault(); + + if (this.state.spenders.length < 1) { + alert("Please select spender field"); + return; + } + const record = this.state; this.props.action(record); this.setState({ @@ -52,6 +62,7 @@ export default class ExpenseForm extends React.Component { type="text" name="item" value={this.state.item} + required onChange={(e) => this.handleChange(e)} placeholder="Insert name of purchase" /> @@ -63,25 +74,25 @@ export default class ExpenseForm extends React.Component { type="text" name="amount" value={this.state.amount} + required onChange={(e) => this.handleChange(e)} - placeholder="Insert price" + pattern="^\d*(\.\d{0,2})?$" + placeholder="Insert price up to 2 d.p." />
Select spenders: -
    - {copyOfNameList.map((i) => ( -
  • - this.handleChange(e)} - /> - {i} -
    • - ))} -
+ {copyOfNameList.map((name, i) => ( +
+ this.handleChangeCheckBox(e)} + /> + {name} +
+ ))}

diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index 98af8cba..00cd1e96 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -10,7 +10,7 @@ export default class GroupForm extends React.Component { this.setState({ name: e.target.value, }); - } + }; handleSubmit = (e) => { e.preventDefault(); @@ -25,12 +25,12 @@ export default class GroupForm extends React.Component { name: "", }); } else { - this.props.addName(this.state.name) + this.props.addName(this.state.name); this.setState({ name: "", }); } - } + }; render() { return ( From 0d7f515b045e49723e979b94b6c0a17ccc954a0e Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sun, 6 Nov 2022 16:18:17 +0800 Subject: [PATCH 11/25] version 1 of barebones working version --- src/App.js | 36 ++++++++++++++++++++++++++++++++---- src/components/GroupForm.js | 2 +- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 7297fc27..3b0085ac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,26 @@ import React from "react"; -// import logo from "./logo.png"; import "./App.css"; import DisplayExpense from "./components/DisplayExpense"; import ExpenseForm from "./components/ExpenseForm"; import GroupForm from "./components/GroupForm"; import SplitBill from "./components/SplitBill"; +const calcSplitBill = (expenseArray) => { + const tally = {}; + for (let i = 0; i < expenseArray.length; i++) { + let amountPayable = + expenseArray[i]["amount"] / expenseArray[i]["spenders"].length; + for (const spender of expenseArray[i]["spenders"]) { + if (spender in tally) { + tally[spender] += amountPayable; + } else { + tally[spender] = amountPayable; + } + } + } + return tally; +}; + class App extends React.Component { constructor(props) { super(props); @@ -18,6 +33,7 @@ class App extends React.Component { // spenders: ["patrick", "spongebob"], // }, ], + billTally: "", }; } @@ -36,28 +52,40 @@ class App extends React.Component { }; splitBill = () => { - console.log("this.state.expenses", this.state.expenses); + let copyOfExpenses = [...this.state.expenses]; + console.log("copyofExpenses", copyOfExpenses); + this.setState({ + billTally: calcSplitBill(copyOfExpenses), + }); }; render() { let listOfExpenses = [...this.state.expenses]; + const showSplitBill = this.state.billTally; + + let txtBill = ""; + for (let x in showSplitBill) { + //txtBill += x + " → " + showSplitBill[x] + " me\n"; + txtBill += `${x} → ${showSplitBill[x]} me
`; + } + return (

Step 1: Include all who owes you money


-

Step 2: Enter item, amount, and select list of spenders

+

Step 2: Enter item, price, and select list of spenders


Display all records of expenses here

{listOfExpenses.map((entry, i) => ( ))} - {console.log(this.state.expenses)}

Display complete group list

{this.state.group.join(" ")}

Step 3: Split the Bill

+
{txtBill}
); } diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index 00cd1e96..6377eb3d 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -25,7 +25,7 @@ export default class GroupForm extends React.Component { name: "", }); } else { - this.props.addName(this.state.name); + this.props.addName(newName); this.setState({ name: "", }); From b9573779cc0dfccbe3bc0fff0cce37fd54df8078 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Mon, 7 Nov 2022 22:15:48 +0800 Subject: [PATCH 12/25] add CSS styling --- public/index.html | 4 + src/App.css | 51 +++++++++- src/App.js | 148 +++++++++++++++++++++++++----- src/components/DisplayExpense.css | 47 ++++++++++ src/components/DisplayExpense.js | 31 +++++-- src/components/ExpenseForm.js | 86 +++++++++-------- src/components/Forms.css | 44 +++++++++ src/components/GroupForm.js | 21 +++-- src/components/SplitBill.css | 23 +++++ src/components/SplitBill.js | 5 +- 10 files changed, 378 insertions(+), 82 deletions(-) create mode 100644 src/components/DisplayExpense.css create mode 100644 src/components/Forms.css create mode 100644 src/components/SplitBill.css diff --git a/public/index.html b/public/index.html index fb307ff3..29d61a8a 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,10 @@ + { + let filteredGroup = this.state.group.filter((x) => x !== name); + + this.setState({ + group: filteredGroup, + }); + }; + + deleteRecord = (e) => { + // e is the event, e.target is the button, + let key = e.target.value; + let newexpenses = [...this.state.expenses]; + newexpenses.splice(key, 1); + this.setState({ + expenses: newexpenses, + }); + }; + addRecord = (record) => { let newArray = [...this.state.expenses, record]; this.setState({ @@ -53,39 +74,118 @@ class App extends React.Component { splitBill = () => { let copyOfExpenses = [...this.state.expenses]; - console.log("copyofExpenses", copyOfExpenses); this.setState({ billTally: calcSplitBill(copyOfExpenses), }); }; render() { + let copyGroup = [...this.state.group]; let listOfExpenses = [...this.state.expenses]; const showSplitBill = this.state.billTally; - let txtBill = ""; + let txtBill = []; for (let x in showSplitBill) { - //txtBill += x + " → " + showSplitBill[x] + " me\n"; - txtBill += `${x} → ${showSplitBill[x]} me
`; + txtBill.push(`${x} → $${showSplitBill[x].toFixed(2)}`); } return (
-

Step 1: Include all who owes you money

- -
-

Step 2: Enter item, price, and select list of spenders

- +
+
+
+

Add person

+
+ +
+ +
+
+

Add item

+
+ +
+ +
+
+

Pay Up!

+
+
+ {txtBill.map((entry) => ( +

{entry}

+ ))} +
+ +
+ +
+
+

Edit Group List

+
+
+ {copyGroup.map((k) => ( +

+ {k}{" "} + +

+ ))} +
+
+

-

Display all records of expenses here

- {listOfExpenses.map((entry, i) => ( - - ))} -

Display complete group list

- {this.state.group.join(" ")} -

Step 3: Split the Bill

- -
{txtBill}
+
+
+

ALL EXPENSES RECORDS

+
+
+ {listOfExpenses.map((entry, i) => ( + + ))} +
+
); } diff --git a/src/components/DisplayExpense.css b/src/components/DisplayExpense.css new file mode 100644 index 00000000..b6aa96ee --- /dev/null +++ b/src/components/DisplayExpense.css @@ -0,0 +1,47 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, Helvetica, sans-serif; +} + +/* Float four columns side by side */ +.column { + float: left; + width: 25%; + padding: 0 10px; +} + +/* Remove extra left and right margins, due to padding in columns */ +.row { + margin: 0 -5px; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Style the counter cards */ +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */ + padding: 16px; + text-align: center; + background-color: #f1f1f1; +} + +/* Responsive columns - one column layout (vertical) on small screens */ +@media screen and (max-width: 600px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; + } +} + +.bangers { + font-family: "Bangers"; +} \ No newline at end of file diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js index 037a231a..4f0f7eb2 100644 --- a/src/components/DisplayExpense.js +++ b/src/components/DisplayExpense.js @@ -1,18 +1,31 @@ import React from "react"; +import "./DisplayExpense.css"; -// const getFormattedPrice = (price) => { -// const priceTwoDecimal = price.toFixed(2); -// return `$${priceTwoDecimal}`; -// }; +const getFormattedPrice = (price) => { + const priceTwoDecimal = Number(price).toFixed(2); + return priceTwoDecimal; +}; export default class DisplayExpense extends React.Component { render() { + const pricePerPax = () => { + let output = (this.props.amount / this.props.spenders.length).toFixed(2); + return output; + }; return ( -
-

- {this.props.item} - {this.props.amount} -

-

Spent by - {this.props.spenders.join(" ")}

+
+
+

{this.props.item.toUpperCase()}

+

+ ${getFormattedPrice(this.props.amount)} (${pricePerPax()}/px) +

+

+

{this.props.spenders.join(" ")}

+

+ +
); } diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 815ad400..2791a1c9 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -1,4 +1,5 @@ import React from "react"; +import "./Forms.css"; export default class ExpenseForm extends React.Component { constructor(props) { @@ -7,6 +8,7 @@ export default class ExpenseForm extends React.Component { item: "", amount: "", spenders: [], + start: true, }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); @@ -26,10 +28,12 @@ export default class ExpenseForm extends React.Component { const newSpenderList = [...this.state.spenders, value]; this.setState({ spenders: newSpenderList, + start: false, }); } else { this.setState({ spenders: this.state.spenders.filter((e) => e !== value), + start: false, }); } }; @@ -48,6 +52,7 @@ export default class ExpenseForm extends React.Component { item: "", amount: "", spenders: [], + start: true, }); }; @@ -56,46 +61,55 @@ export default class ExpenseForm extends React.Component { return (
- + this.handleChange(e)} + placeholder="Enter Item Name" + />
- + this.handleChange(e)} + pattern="^\d*(\.\d{0,2})?$" + placeholder="Enter Price (Up 2 d.p.)" + />
- Select spenders: - {copyOfNameList.map((name, i) => ( -
- this.handleChangeCheckBox(e)} - /> - {name} -
- ))}
+ Split amongst: +
+ {copyOfNameList.map((name, i) => ( +
+ {this.state.start ? ( + this.handleChangeCheckBox(e)} + /> + ) : ( + this.handleChangeCheckBox(e)} + /> + )} + {name} +
+ ))}{" "} +

- +
+
); diff --git a/src/components/Forms.css b/src/components/Forms.css new file mode 100644 index 00000000..c32c126b --- /dev/null +++ b/src/components/Forms.css @@ -0,0 +1,44 @@ +.flex-spender { + display: flex; + align-content:space-between; + flex-flow: row wrap; +} + +.btn { + background: #7986cb; + font-size: 20px; + color: white; + border-radius: 7px; + box-shadow: 0 7px 0px #3f51b5; + display: inline-block; + transition: all 0.2s; + position: relative; + padding: 20px 25px; + position: relative; + top: 0; + cursor: pointer; + margin: 0 20px; +} + +.btn:active { + top: 3px; + box-shadow: 0 2px 0px #3f51b5; + transition: all 0.2s; +} + +.input-field { + margin: 5px; + display: block; + width: 100%; + height: calc(1.5em + 0.75em + 2px); + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: white; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index 6377eb3d..882a4ac9 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -1,4 +1,5 @@ import React from "react"; +import "./Forms.css"; export default class GroupForm extends React.Component { constructor(props) { @@ -36,16 +37,16 @@ export default class GroupForm extends React.Component { return (
- - + +
+
+
); diff --git a/src/components/SplitBill.css b/src/components/SplitBill.css new file mode 100644 index 00000000..1e2dd0fe --- /dev/null +++ b/src/components/SplitBill.css @@ -0,0 +1,23 @@ +.split_btn { + background: #51a3b8; + font-size: 20px; + color: white; + border-radius: 7px; + box-shadow: 0 7px 0px #387796; + display: inline-block; + transition: all 0.2s; + position: relative; + padding: 20px 25px; + position: relative; + top: 0; + cursor: pointer; + margin: 0 20px; +} + +.split_btn:active { + top: 3px; + box-shadow: 0 2px 0px #387796; + transition: all 0.2s; +} + +/* https://webdeasy.de/en/top-css-buttons-en/ */ diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js index ce4edc21..ca95ee82 100644 --- a/src/components/SplitBill.js +++ b/src/components/SplitBill.js @@ -1,10 +1,13 @@ import React from "react"; +import "./SplitBill.css"; export default class SplitBill extends React.Component { render() { return (
- +
); } From b6ebf56b6b4e188000f96d8cf1af312960ab40de Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Wed, 9 Nov 2022 10:29:35 +0800 Subject: [PATCH 13/25] update css and add functions for toolkit --- src/App.css | 45 ++++---- src/App.js | 166 +++++++++++++++++++++++++----- src/components/DisplayExpense.css | 2 +- src/components/DisplayExpense.js | 21 +++- src/components/ExpenseForm.js | 8 +- src/components/Forms.css | 14 +-- src/components/GroupForm.js | 4 +- src/components/SplitBill.css | 2 +- src/components/SplitBill.js | 8 +- 9 files changed, 207 insertions(+), 63 deletions(-) diff --git a/src/App.css b/src/App.css index 1b7eda3c..ff721848 100644 --- a/src/App.css +++ b/src/App.css @@ -6,17 +6,22 @@ body { display: flex; flex-wrap: wrap; justify-content: space-evenly; - /* align-items: center; */ + padding-top: 20px; } .container { background-color: #004e00; - border: 10px solid black; + border: 10px solid #000000; + width: 400px; border-radius: 50px; padding: 2.5rem; color: white; } +.two-width { + max-width: 26vw; +} + .step { padding: 5px 13px; background-color: #ffc312; @@ -25,7 +30,7 @@ body { font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; - color: black; + color: #000000; font-family: "Bangers"; } @@ -45,22 +50,26 @@ body { cursor: pointer; } -/* .App { - text-align: center; +.tooltip { + position: relative; } -.App-logo { - height: 40vmin; - pointer-events: none; +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; + top: -5px; + left: 105%; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} */ +.tooltip:hover .tooltiptext { + visibility: visible; +} diff --git a/src/App.js b/src/App.js index 95e364cc..26c45a7a 100644 --- a/src/App.js +++ b/src/App.js @@ -25,18 +25,31 @@ class App extends React.Component { constructor(props) { super(props); this.state = { - group: ["anya", "bella", "cass", "darren", "patrick", "spongebob"], + group: ["anya", "bella", "cass", "darren"], expenses: [ - { item: "Burger", amount: 4.2, spenders: ["patrick", "spongebob"] }, - { item: "Burger1", amount: 4.8, spenders: ["patrick", "spongebob"] }, - { item: "Burger2", amount: 9.6, spenders: ["patrick", "spongebob"] }, - { item: "Burger3", amount: 4.2, spenders: ["patrick", "spongebob"] }, - { item: "Burger4", amount: 4.8, spenders: ["patrick", "spongebob"] }, - { item: "Burger5", amount: 9.6, spenders: ["patrick", "spongebob"] }, - { item: "Burger6", amount: 4.8, spenders: ["patrick", "spongebob"] }, - { item: "Burger7", amount: 9.6, spenders: ["patrick", "spongebob"] }, + { item: "Burger 1", amount: 4.2, spenders: ["patrick", "spongebob"] }, + { item: "Burger 2", amount: 4.8, spenders: ["anya", "bella", "cass"] }, + { + item: "Burger 3", + amount: 9.6, + spenders: ["patrick", "spongebob", "darren"], + }, + { item: "Burger 4", amount: 4.2, spenders: ["anya", "spongebob"] }, + { + item: "Burger 5", + amount: 4.8, + spenders: ["bella", "darren", "patrick", "spongebob"], + }, + { + item: "Burger 6", + amount: 9.6, + spenders: ["patrick", "spongebob", "bella"], + }, + { item: "Burger 7", amount: 4.8, spenders: ["patrick", "anya"] }, + { item: "Burger 8", amount: 9.6, spenders: ["cass"] }, ], billTally: "", + hover: -1, }; } @@ -79,6 +92,15 @@ class App extends React.Component { }); }; + onMouseEnter = (e) => { + this.setState({ hover: e.target.value }); + }; + + onMouseLeave = (e) => { + console.log(e.target); + this.setState({ hover: -1 }); + }; + render() { let copyGroup = [...this.state.group]; let listOfExpenses = [...this.state.expenses]; @@ -89,8 +111,60 @@ class App extends React.Component { txtBill.push(`${x} → $${showSplitBill[x].toFixed(2)}`); } + const allSpenders = () => { + let fullList = []; + for (let i = 0; i < listOfExpenses.length; i++) { + fullList = [...fullList, ...listOfExpenses[i].spenders]; + } + let uniqueList = [...new Set(fullList)]; + return uniqueList; + }; + + const uniqueNames = allSpenders(); + + const makeReceipt = () => { + let newReceipt = []; + for (let k = 0; k < uniqueNames.length; k++) { + var purchase = []; + var cost = []; + for (let j = 0; j < listOfExpenses.length; j++) { + if (listOfExpenses[j]["spenders"].includes(uniqueNames[k])) { + purchase.push(listOfExpenses[j]["item"]); + cost.push( + listOfExpenses[j]["amount"] / listOfExpenses[j]["spenders"].length + ); + } + + var record = { + name: uniqueNames[k], + purchases: purchase, + costprice: cost, + }; + } + newReceipt.push(record); + } + return newReceipt; + }; + + const receipt = makeReceipt(); + + const showBreakdown = (input) => { + var output = input; + for (let z = 0; z < receipt.length; z++) { + if (receipt[z].name === input) { + for (let t = 0; t < receipt[z]["purchases"].length; t++) { + output += `
${receipt[z]["purchases"][t]} -- ${receipt[z]["costprice"][t]}`; + } + } + } + return output; + }; + return (
+
+

A Bill Splitting App

+
@@ -99,7 +173,7 @@ class App extends React.Component {
-
+

Add item

@@ -115,7 +189,10 @@ class App extends React.Component {
{txtBill.map((entry) => ( -

{entry}

+
+ {entry} + Insert text +
))}
@@ -125,13 +202,16 @@ class App extends React.Component {

Edit Group List

-
- {copyGroup.map((k) => ( -

+

+ {copyGroup.map((k, i) => ( +
{k}{" "} -

+
))}
@@ -173,7 +287,7 @@ class App extends React.Component {
-

ALL EXPENSES RECORDS

+

📜RECORDS OF EXPENSES📜

{listOfExpenses.map((entry, i) => ( diff --git a/src/components/DisplayExpense.css b/src/components/DisplayExpense.css index b6aa96ee..feac3762 100644 --- a/src/components/DisplayExpense.css +++ b/src/components/DisplayExpense.css @@ -44,4 +44,4 @@ body { .bangers { font-family: "Bangers"; -} \ No newline at end of file +} diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js index 4f0f7eb2..54428b7f 100644 --- a/src/components/DisplayExpense.js +++ b/src/components/DisplayExpense.js @@ -6,6 +6,15 @@ const getFormattedPrice = (price) => { return priceTwoDecimal; }; +const getRandomColor = () => { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + export default class DisplayExpense extends React.Component { render() { const pricePerPax = () => { @@ -15,15 +24,19 @@ export default class DisplayExpense extends React.Component { return (
-

{this.props.item.toUpperCase()}

+

+ {this.props.item.toUpperCase()} +

- ${getFormattedPrice(this.props.amount)} (${pricePerPax()}/px) + ${getFormattedPrice(this.props.amount)} (${pricePerPax()}/px)

-

{this.props.spenders.join(" ")}

+

+ {this.props.spenders.join(" ")}{" "} +

diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 2791a1c9..cd8586fe 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -83,7 +83,9 @@ export default class ExpenseForm extends React.Component { />

- Split amongst: + Split amongst: +
+
{copyOfNameList.map((name, i) => (
@@ -109,7 +111,9 @@ export default class ExpenseForm extends React.Component {


- +
+ +
); diff --git a/src/components/Forms.css b/src/components/Forms.css index c32c126b..4ea7bca0 100644 --- a/src/components/Forms.css +++ b/src/components/Forms.css @@ -1,19 +1,19 @@ .flex-spender { display: flex; - align-content:space-between; + justify-content: space-between; flex-flow: row wrap; } .btn { - background: #7986cb; + background: white; font-size: 20px; - color: white; + color: black; border-radius: 7px; - box-shadow: 0 7px 0px #3f51b5; + box-shadow: 0 7px 0px grey; display: inline-block; transition: all 0.2s; position: relative; - padding: 20px 25px; + padding: 10px 15px; position: relative; top: 0; cursor: pointer; @@ -22,12 +22,12 @@ .btn:active { top: 3px; - box-shadow: 0 2px 0px #3f51b5; + box-shadow: 0 2px 0px darkgrey; transition: all 0.2s; } .input-field { - margin: 5px; + margin: 1px; display: block; width: 100%; height: calc(1.5em + 0.75em + 2px); diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index 882a4ac9..09ef01f9 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -46,7 +46,9 @@ export default class GroupForm extends React.Component { />

- +
+ +
); diff --git a/src/components/SplitBill.css b/src/components/SplitBill.css index 1e2dd0fe..4a004690 100644 --- a/src/components/SplitBill.css +++ b/src/components/SplitBill.css @@ -1,6 +1,6 @@ .split_btn { background: #51a3b8; - font-size: 20px; + font-size: 22px; color: white; border-radius: 7px; box-shadow: 0 7px 0px #387796; diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js index ca95ee82..26e55dfe 100644 --- a/src/components/SplitBill.js +++ b/src/components/SplitBill.js @@ -5,9 +5,11 @@ export default class SplitBill extends React.Component { render() { return (
- +
+ +
); } From 9960c1a23467add2cb404740f48d020da1751e9d Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Wed, 9 Nov 2022 13:27:26 +0800 Subject: [PATCH 14/25] add mouseover tooltip display --- src/App.js | 191 +++++++++++-------------------- src/components/DisplayExpense.js | 13 --- src/components/ReceiptDisplay.js | 50 ++++++++ src/components/TrashBinIcon.js | 68 +++++++++++ 4 files changed, 185 insertions(+), 137 deletions(-) create mode 100644 src/components/ReceiptDisplay.js create mode 100644 src/components/TrashBinIcon.js diff --git a/src/App.js b/src/App.js index 26c45a7a..f3c0de5c 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,8 @@ import DisplayExpense from "./components/DisplayExpense"; import ExpenseForm from "./components/ExpenseForm"; import GroupForm from "./components/GroupForm"; import SplitBill from "./components/SplitBill"; +import TrashBinIcon from "./components/TrashBinIcon"; +import ReceiptDisplay from "./components/ReceiptDisplay"; const calcSplitBill = (expenseArray) => { const tally = {}; @@ -25,6 +27,8 @@ class App extends React.Component { constructor(props) { super(props); this.state = { + uniqueNames: [], + overallreceipt: {}, group: ["anya", "bella", "cass", "darren"], expenses: [ { item: "Burger 1", amount: 4.2, spenders: ["patrick", "spongebob"] }, @@ -85,13 +89,58 @@ class App extends React.Component { }); }; - splitBill = () => { + splitBill1 = () => { let copyOfExpenses = [...this.state.expenses]; this.setState({ billTally: calcSplitBill(copyOfExpenses), }); }; + splitBill = () => { + let expensesList = [...this.state.expenses]; + let fullList = []; + for (let i = 0; i < expensesList.length; i++) { + fullList = [...fullList, ...expensesList[i].spenders]; + } + let uniqueNames = [...new Set(fullList)]; + + let newReceipt = {}; + for (let k = 0; k < uniqueNames.length; k++) { + var purchase = []; + var cost = []; + var initialValue = 0; + for (let j = 0; j < expensesList.length; j++) { + if (expensesList[j]["spenders"].includes(uniqueNames[k])) { + purchase.push(expensesList[j]["item"]); + cost.push( + expensesList[j]["amount"] / expensesList[j]["spenders"].length + ); + } + + var record = { + purchases: purchase, + costprice: cost, + total: cost.reduce( + (previousValue, currentValue) => previousValue + currentValue, + initialValue + ), + }; + } + newReceipt[uniqueNames[k]] = record; + } + console.log(newReceipt); + console.log(uniqueNames); + this.setState( + { + overallreceipt: newReceipt, + uniqueNames: uniqueNames, + }, + () => { + console.log(this.state); + } + ); + }; + onMouseEnter = (e) => { this.setState({ hover: e.target.value }); }; @@ -103,63 +152,14 @@ class App extends React.Component { render() { let copyGroup = [...this.state.group]; - let listOfExpenses = [...this.state.expenses]; - const showSplitBill = this.state.billTally; + let copyExpenses = [...this.state.expenses]; + const copyBillTally = this.state.billTally; let txtBill = []; - for (let x in showSplitBill) { - txtBill.push(`${x} → $${showSplitBill[x].toFixed(2)}`); + for (let x in copyBillTally) { + txtBill.push(`${x} → $${copyBillTally[x].toFixed(2)}`); } - const allSpenders = () => { - let fullList = []; - for (let i = 0; i < listOfExpenses.length; i++) { - fullList = [...fullList, ...listOfExpenses[i].spenders]; - } - let uniqueList = [...new Set(fullList)]; - return uniqueList; - }; - - const uniqueNames = allSpenders(); - - const makeReceipt = () => { - let newReceipt = []; - for (let k = 0; k < uniqueNames.length; k++) { - var purchase = []; - var cost = []; - for (let j = 0; j < listOfExpenses.length; j++) { - if (listOfExpenses[j]["spenders"].includes(uniqueNames[k])) { - purchase.push(listOfExpenses[j]["item"]); - cost.push( - listOfExpenses[j]["amount"] / listOfExpenses[j]["spenders"].length - ); - } - - var record = { - name: uniqueNames[k], - purchases: purchase, - costprice: cost, - }; - } - newReceipt.push(record); - } - return newReceipt; - }; - - const receipt = makeReceipt(); - - const showBreakdown = (input) => { - var output = input; - for (let z = 0; z < receipt.length; z++) { - if (receipt[z].name === input) { - for (let t = 0; t < receipt[z]["purchases"].length; t++) { - output += `
${receipt[z]["purchases"][t]} -- ${receipt[z]["costprice"][t]}`; - } - } - } - return output; - }; - return (
@@ -168,14 +168,14 @@ class App extends React.Component {
-

Add person

+

1. Add person

-

Add item

+

2. Add item

-

Pay Up!

+

3. Pay Up!

- {txtBill.map((entry) => ( + {/* {txtBill.map((entry) => (
{entry} Insert text
+ ))} */} + {this.state.uniqueNames.map((name) => ( + ))}
+ {/* {console.log("billtally", this.state.billTally)} */}
@@ -213,71 +220,7 @@ class App extends React.Component { onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} > - - {Number(this.state.hover) === i ? ( - - - - - - - ) : ( - - - - - - - )} - +
))} @@ -290,7 +233,7 @@ class App extends React.Component {

📜RECORDS OF EXPENSES📜

- {listOfExpenses.map((entry, i) => ( + {copyExpenses.map((entry, i) => ( -

- {this.props.item} - ${this.props.amount} -

-

Spent by - {this.props.spenders}

-
- ); - } -} \ No newline at end of file diff --git a/src/components/ReceiptDisplay.js b/src/components/ReceiptDisplay.js new file mode 100644 index 00000000..caaf0b6f --- /dev/null +++ b/src/components/ReceiptDisplay.js @@ -0,0 +1,50 @@ +import React from "react"; + +export default class ReceiptDisplay extends React.Component { + render() { + console.log(this.props.name); + console.log(this.props.receipt); + return ( +
+ {this.props.name} + {"→"} + {this.props.receipt.total.toFixed(2)} + + + + + x + + {this.props.receipt.purchases.map((purchase, i) => ( + + + + + ))} +
PurchaseCost
{purchase}{this.props.receipt.costprice[i].toFixed(2)}
+ +
+ ); + } + + // render() { + // const showBreakdown = (nameInput) => { + // var output = nameInput; + // for (let z = 0; z < receipt.length; z++) { + // if (receipt[z].name === nameInput) { + // for (let t = 0; t < receipt[z]["purchases"].length; t++) { + // output += `
${receipt[z]["purchases"][t]} -- ${receipt[z]["costprice"][t]}`; + // } + // } + // } + // return output; + // }; + + // return ( + //
+ + //
+ + // ); + // } +} diff --git a/src/components/TrashBinIcon.js b/src/components/TrashBinIcon.js new file mode 100644 index 00000000..3fced788 --- /dev/null +++ b/src/components/TrashBinIcon.js @@ -0,0 +1,68 @@ +import React from "react"; + +export default class TrashBinIcon extends React.Component { + render() { + return ( + + {Number(this.props.hover) === this.props.value ? ( + + + + + + + ) : ( + + + + + + + )} + + ); + } +} From 367bec518e88d1091251d64c3fc38c5262aa57d0 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Wed, 9 Nov 2022 22:09:56 +0800 Subject: [PATCH 15/25] tweaks to css; version one of final working copy --- src/App.css | 92 ++++++++++++++++++++++++++++++- src/App.js | 83 ++++++++-------------------- src/components/DisplayExpense.css | 15 ++--- src/components/ExpenseForm.js | 9 ++- src/components/Forms.css | 44 --------------- src/components/GroupForm.js | 3 +- src/components/ReceiptDisplay.js | 30 +--------- src/components/SplitBill.css | 23 -------- src/components/SplitBill.js | 1 - 9 files changed, 129 insertions(+), 171 deletions(-) delete mode 100644 src/components/Forms.css delete mode 100644 src/components/SplitBill.css diff --git a/src/App.css b/src/App.css index ff721848..c546b0a4 100644 --- a/src/App.css +++ b/src/App.css @@ -9,7 +9,23 @@ body { padding-top: 20px; } -.container { +.flex-grouplist { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + padding-top: 5px; +} + +.flex-receipt { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + padding-top: 0.375rem; + padding-bottom: 15px; +} + +.green-container { background-color: #004e00; border: 10px solid #000000; width: 400px; @@ -52,6 +68,7 @@ body { .tooltip { position: relative; + padding: 5px; } .tooltip .tooltiptext { @@ -73,3 +90,76 @@ body { .tooltip:hover .tooltiptext { visibility: visible; } + +/* Styling for ExpenseForm.js and GroupForm.js */ + +.flex-spender { + display: flex; + justify-content: space-between; + flex-flow: row wrap; +} + +.white-btn { + background: white; + font-size: 20px; + color: black; + border-radius: 7px; + box-shadow: 0 7px 0px grey; + display: inline-block; + transition: all 0.2s; + position: relative; + padding: 10px 15px; + position: relative; + top: 0; + cursor: pointer; + margin: 0 20px; +} + +.white-btn:active { + top: 3px; + box-shadow: 0 2px 0px darkgrey; + transition: all 0.2s; +} + +.input-field { + margin: 10px 1px; + display: block; + width: 100%; + height: calc(1.5em + 0.75em + 2px); + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: white; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +/* Styling for button in SplitBill.js button */ + +.split_btn { + background: #51a3b8; + font-size: 22px; + color: white; + border-radius: 7px; + box-shadow: 0 7px 0px #387796; + display: inline-block; + transition: all 0.2s; + position: relative; + padding: 20px 25px; + position: relative; + top: 0; + cursor: pointer; + margin: 0 20px; +} + +.split_btn:active { + top: 3px; + box-shadow: 0 2px 0px #387796; + transition: all 0.2s; +} + +/* https://webdeasy.de/en/top-css-buttons-en/ */ diff --git a/src/App.js b/src/App.js index f3c0de5c..10c434a9 100644 --- a/src/App.js +++ b/src/App.js @@ -7,28 +7,12 @@ import SplitBill from "./components/SplitBill"; import TrashBinIcon from "./components/TrashBinIcon"; import ReceiptDisplay from "./components/ReceiptDisplay"; -const calcSplitBill = (expenseArray) => { - const tally = {}; - for (let i = 0; i < expenseArray.length; i++) { - let amountPayable = - expenseArray[i]["amount"] / expenseArray[i]["spenders"].length; - for (const spender of expenseArray[i]["spenders"]) { - if (spender in tally) { - tally[spender] += amountPayable; - } else { - tally[spender] = amountPayable; - } - } - } - return tally; -}; - class App extends React.Component { constructor(props) { super(props); this.state = { uniqueNames: [], - overallreceipt: {}, + overallReceipt: {}, group: ["anya", "bella", "cass", "darren"], expenses: [ { item: "Burger 1", amount: 4.2, spenders: ["patrick", "spongebob"] }, @@ -52,7 +36,6 @@ class App extends React.Component { { item: "Burger 7", amount: 4.8, spenders: ["patrick", "anya"] }, { item: "Burger 8", amount: 9.6, spenders: ["cass"] }, ], - billTally: "", hover: -1, }; } @@ -89,20 +72,13 @@ class App extends React.Component { }); }; - splitBill1 = () => { - let copyOfExpenses = [...this.state.expenses]; - this.setState({ - billTally: calcSplitBill(copyOfExpenses), - }); - }; - splitBill = () => { let expensesList = [...this.state.expenses]; - let fullList = []; + let spenderList = []; for (let i = 0; i < expensesList.length; i++) { - fullList = [...fullList, ...expensesList[i].spenders]; + spenderList = [...spenderList, ...expensesList[i].spenders]; } - let uniqueNames = [...new Set(fullList)]; + let uniqueNames = [...new Set(spenderList)]; let newReceipt = {}; for (let k = 0; k < uniqueNames.length; k++) { @@ -128,17 +104,12 @@ class App extends React.Component { } newReceipt[uniqueNames[k]] = record; } - console.log(newReceipt); - console.log(uniqueNames); - this.setState( - { - overallreceipt: newReceipt, - uniqueNames: uniqueNames, - }, - () => { - console.log(this.state); - } - ); + console.log("this.state.newReceipt", newReceipt); + console.log("this.state.uniqueNames", uniqueNames); + this.setState({ + overallReceipt: newReceipt, + uniqueNames: uniqueNames, + }); }; onMouseEnter = (e) => { @@ -153,12 +124,8 @@ class App extends React.Component { render() { let copyGroup = [...this.state.group]; let copyExpenses = [...this.state.expenses]; - const copyBillTally = this.state.billTally; - - let txtBill = []; - for (let x in copyBillTally) { - txtBill.push(`${x} → $${copyBillTally[x].toFixed(2)}`); - } + let copyUniqueNames = [...this.state.uniqueNames]; + let copyOverallReceipt = this.state.overallReceipt; return (
@@ -166,14 +133,14 @@ class App extends React.Component {

A Bill Splitting App

-
+

1. Add person

-
+

2. Add item

@@ -183,33 +150,26 @@ class App extends React.Component { />
-
+

3. Pay Up!

-
- {/* {txtBill.map((entry) => ( -
- {entry} - Insert text -
- ))} */} - {this.state.uniqueNames.map((name) => ( +
+ {copyUniqueNames.map((name) => ( ))}
- {/* {console.log("billtally", this.state.billTally)} */}
-
+

Edit Group List

-
+
{copyGroup.map((k, i) => (
{k}{" "} @@ -228,11 +188,12 @@ class App extends React.Component {

+

📜RECORDS OF EXPENSES📜

-
+
{copyExpenses.map((entry, i) => ( this.handleChange(e)} placeholder="Enter Item Name" /> -

-
- Split amongst: + + Split amongst: +

@@ -112,7 +111,7 @@ export default class ExpenseForm extends React.Component {

- +
diff --git a/src/components/Forms.css b/src/components/Forms.css deleted file mode 100644 index 4ea7bca0..00000000 --- a/src/components/Forms.css +++ /dev/null @@ -1,44 +0,0 @@ -.flex-spender { - display: flex; - justify-content: space-between; - flex-flow: row wrap; -} - -.btn { - background: white; - font-size: 20px; - color: black; - border-radius: 7px; - box-shadow: 0 7px 0px grey; - display: inline-block; - transition: all 0.2s; - position: relative; - padding: 10px 15px; - position: relative; - top: 0; - cursor: pointer; - margin: 0 20px; -} - -.btn:active { - top: 3px; - box-shadow: 0 2px 0px darkgrey; - transition: all 0.2s; -} - -.input-field { - margin: 1px; - display: block; - width: 100%; - height: calc(1.5em + 0.75em + 2px); - padding: 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - background-color: white; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: 0.25rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index 09ef01f9..e20cc684 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -1,5 +1,4 @@ import React from "react"; -import "./Forms.css"; export default class GroupForm extends React.Component { constructor(props) { @@ -47,7 +46,7 @@ export default class GroupForm extends React.Component {

- +
diff --git a/src/components/ReceiptDisplay.js b/src/components/ReceiptDisplay.js index caaf0b6f..04917b10 100644 --- a/src/components/ReceiptDisplay.js +++ b/src/components/ReceiptDisplay.js @@ -2,23 +2,20 @@ import React from "react"; export default class ReceiptDisplay extends React.Component { render() { - console.log(this.props.name); - console.log(this.props.receipt); return (
{this.props.name} - {"→"} - {this.props.receipt.total.toFixed(2)} + {" → "}${this.props.receipt.total.toFixed(2)} - x + {this.props.receipt.purchases.map((purchase, i) => ( - + ))}
PurchaseCostCost
{purchase}{this.props.receipt.costprice[i].toFixed(2)}${this.props.receipt.costprice[i].toFixed(2)}
@@ -26,25 +23,4 @@ export default class ReceiptDisplay extends React.Component {
); } - - // render() { - // const showBreakdown = (nameInput) => { - // var output = nameInput; - // for (let z = 0; z < receipt.length; z++) { - // if (receipt[z].name === nameInput) { - // for (let t = 0; t < receipt[z]["purchases"].length; t++) { - // output += `
${receipt[z]["purchases"][t]} -- ${receipt[z]["costprice"][t]}`; - // } - // } - // } - // return output; - // }; - - // return ( - //
- - //
- - // ); - // } } diff --git a/src/components/SplitBill.css b/src/components/SplitBill.css deleted file mode 100644 index 4a004690..00000000 --- a/src/components/SplitBill.css +++ /dev/null @@ -1,23 +0,0 @@ -.split_btn { - background: #51a3b8; - font-size: 22px; - color: white; - border-radius: 7px; - box-shadow: 0 7px 0px #387796; - display: inline-block; - transition: all 0.2s; - position: relative; - padding: 20px 25px; - position: relative; - top: 0; - cursor: pointer; - margin: 0 20px; -} - -.split_btn:active { - top: 3px; - box-shadow: 0 2px 0px #387796; - transition: all 0.2s; -} - -/* https://webdeasy.de/en/top-css-buttons-en/ */ diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js index 26e55dfe..8e8a9069 100644 --- a/src/components/SplitBill.js +++ b/src/components/SplitBill.js @@ -1,5 +1,4 @@ import React from "react"; -import "./SplitBill.css"; export default class SplitBill extends React.Component { render() { From c97211241194e97564a3a44751e631aeddcc990d Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Wed, 9 Nov 2022 22:33:30 +0800 Subject: [PATCH 16/25] minor changes to css to first working draft, for first deploy --- package.json | 4 ++++ src/App.js | 7 +++++-- src/components/ReceiptDisplay.js | 6 ++++-- src/components/SplitBill.js | 7 +++++++ 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 5be8c8c1..295622a4 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,17 @@ { "name": "project1-bootcamp", "version": "0.1.0", + "homepage": "https://lazyhazydaze.github.io/project1-bootcamp/", "private": true, "dependencies": { + "gh-pages": "^3.2.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1" }, "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -b master -d build", "start": "WATCHPACK_POLLING=true react-scripts start", "build": "react-scripts build" }, diff --git a/src/App.js b/src/App.js index 10c434a9..c9dbaed8 100644 --- a/src/App.js +++ b/src/App.js @@ -162,7 +162,10 @@ class App extends React.Component { /> ))}
- +
@@ -188,7 +191,7 @@ class App extends React.Component {

- +

📜RECORDS OF EXPENSES📜

diff --git a/src/components/ReceiptDisplay.js b/src/components/ReceiptDisplay.js index 04917b10..fd0bd39c 100644 --- a/src/components/ReceiptDisplay.js +++ b/src/components/ReceiptDisplay.js @@ -4,8 +4,10 @@ export default class ReceiptDisplay extends React.Component { render() { return (
- {this.props.name} - {" → "}${this.props.receipt.total.toFixed(2)} + + {this.props.name} + {" → "}${this.props.receipt.total.toFixed(2)} + diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js index 8e8a9069..fefc2b49 100644 --- a/src/components/SplitBill.js +++ b/src/components/SplitBill.js @@ -8,6 +8,13 @@ export default class SplitBill extends React.Component { +
+
+ {this.props.uniqueName.length > 0 && ( + + (mouse over each person for breakdown) + + )} ); From 06062b74ef96de0b5136431557181710923b1571 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Wed, 9 Nov 2022 22:38:52 +0800 Subject: [PATCH 17/25] add github pages --- package-lock.json | 291 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 291 insertions(+) diff --git a/package-lock.json b/package-lock.json index c205fc57..f34fc72d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "project1-bootcamp", "version": "0.1.0", "dependencies": { + "gh-pages": "^3.2.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1" @@ -4121,6 +4122,14 @@ "node": ">=8" } }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/array.prototype.flat": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz", @@ -5950,6 +5959,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz", "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw==" }, + "node_modules/email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -7073,6 +7087,30 @@ "node": ">=10" } }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -7508,6 +7546,87 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "dependencies": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gh-pages/node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/gh-pages/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -11470,6 +11589,33 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "dependencies": { + "pinkie": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/pirates": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", @@ -14216,6 +14362,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", @@ -14680,6 +14837,17 @@ "node": ">=8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", @@ -18750,6 +18918,11 @@ "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==" }, + "array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==" + }, "array.prototype.flat": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz", @@ -20080,6 +20253,11 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz", "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw==" }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, "emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -20909,6 +21087,21 @@ } } }, + "filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==" + }, + "filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "requires": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + } + }, "filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -21202,6 +21395,70 @@ "get-intrinsic": "^1.1.1" } }, + "gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "dependencies": { + "array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "requires": { + "array-uniq": "^1.0.1" + } + }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + } + } + }, "glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -24068,6 +24325,24 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==" + }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==" + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "requires": { + "pinkie": "^2.0.0" + } + }, "pirates": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", @@ -25940,6 +26215,14 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==" }, + "strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", @@ -26286,6 +26569,14 @@ "punycode": "^2.1.1" } }, + "trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", From 22fce678c04abdcba47535556729ee8ac36d7197 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Thu, 10 Nov 2022 10:23:46 +0800 Subject: [PATCH 18/25] minor css edit: removed vw style to second container --- src/App.css | 4 ---- src/App.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/App.css b/src/App.css index c546b0a4..5347f828 100644 --- a/src/App.css +++ b/src/App.css @@ -34,10 +34,6 @@ body { color: white; } -.two-width { - max-width: 26vw; -} - .step { padding: 5px 13px; background-color: #ffc312; diff --git a/src/App.js b/src/App.js index c9dbaed8..3cb68181 100644 --- a/src/App.js +++ b/src/App.js @@ -140,7 +140,7 @@ class App extends React.Component { -
+

2. Add item

From 14056b8cf50a6b8033e1cf5f04d030904ecebd71 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 11 Nov 2022 11:29:45 +0800 Subject: [PATCH 19/25] added GST feature --- src/App.css | 7 +++ src/App.js | 25 ++------- src/components/ExpenseForm.js | 96 +++++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 20 deletions(-) diff --git a/src/App.css b/src/App.css index 5347f828..340302c0 100644 --- a/src/App.css +++ b/src/App.css @@ -25,6 +25,13 @@ body { padding-bottom: 15px; } +.flex-tax { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + font-size: smaller; +} + .green-container { background-color: #004e00; border: 10px solid #000000; diff --git a/src/App.js b/src/App.js index 3cb68181..ef0df86a 100644 --- a/src/App.js +++ b/src/App.js @@ -17,24 +17,8 @@ class App extends React.Component { expenses: [ { item: "Burger 1", amount: 4.2, spenders: ["patrick", "spongebob"] }, { item: "Burger 2", amount: 4.8, spenders: ["anya", "bella", "cass"] }, - { - item: "Burger 3", - amount: 9.6, - spenders: ["patrick", "spongebob", "darren"], - }, - { item: "Burger 4", amount: 4.2, spenders: ["anya", "spongebob"] }, - { - item: "Burger 5", - amount: 4.8, - spenders: ["bella", "darren", "patrick", "spongebob"], - }, - { - item: "Burger 6", - amount: 9.6, - spenders: ["patrick", "spongebob", "bella"], - }, { item: "Burger 7", amount: 4.8, spenders: ["patrick", "anya"] }, - { item: "Burger 8", amount: 9.6, spenders: ["cass"] }, + { item: "Burger 8", amount: 9.6, spenders: ["cass", "darren"] }, ], hover: -1, }; @@ -125,6 +109,7 @@ class App extends React.Component { let copyGroup = [...this.state.group]; let copyExpenses = [...this.state.expenses]; let copyUniqueNames = [...this.state.uniqueNames]; + let sortUniqueNames = copyUniqueNames.sort(); let copyOverallReceipt = this.state.overallReceipt; return ( @@ -152,10 +137,10 @@ class App extends React.Component {
-

3. Pay Up!

+

3. View Receipt

- {copyUniqueNames.map((name) => ( + {sortUniqueNames.map((name) => (
-

Edit Group List

+

4. Edit Group List

{copyGroup.map((k, i) => ( diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 03e1397e..4f4e2fe1 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -1,5 +1,20 @@ import React from "react"; +const calcGST = (price) => { + let output = (price * 1.07).toFixed(2); + return output; +}; + +const calcSvcChrg = (price) => { + let output = (price * 1.1).toFixed(2); + return output; +}; + +const calcGstSc = (price) => { + let output = (price * 1.1 * 1.07).toFixed(2); + return output; +}; + export default class ExpenseForm extends React.Component { constructor(props) { super(props); @@ -8,13 +23,45 @@ export default class ExpenseForm extends React.Component { amount: "", spenders: [], start: true, + taxOption: "notax", }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.handleChangeCheckBox = this.handleChangeCheckBox.bind(this); } handleChange = (e) => { const { name, value } = e.target; + + if (name === "taxOption") { + let baseprice = this.state.amount; + + if (this.state.taxOption === "gst") { + baseprice = baseprice / 1.07; + } else if (this.state.taxOption === "sc") { + baseprice = baseprice / 1.1; + } else if (this.state.taxOption === "gstsc") { + baseprice = baseprice / 1.177; + } + + if (value === "gst") { + this.setState({ + amount: calcGST(baseprice), + }); + } else if (value === "sc") { + this.setState({ + amount: calcSvcChrg(baseprice), + }); + } else if (value === "gstsc") { + this.setState({ + amount: calcGstSc(baseprice), + }); + } else { + this.setState({ + amount: baseprice.toFixed(2), + }); + } + } this.setState({ [name]: value, }); @@ -52,6 +99,7 @@ export default class ExpenseForm extends React.Component { amount: "", spenders: [], start: true, + taxOption: "notax", }); }; @@ -79,6 +127,54 @@ export default class ExpenseForm extends React.Component { pattern="^\d*(\.\d{0,2})?$" placeholder="Enter Price (Up 2 d.p.)" /> + +
+ + + + + + + +
+ +

Split amongst: From 4b67a0623cda1292a3ce3f1a6697ec6dea9f6640 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 11 Nov 2022 14:29:45 +0800 Subject: [PATCH 20/25] edit flex and margin properties for green containers --- src/App.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 340302c0..e9e45aca 100644 --- a/src/App.css +++ b/src/App.css @@ -4,7 +4,7 @@ body { .flex-container { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; justify-content: space-evenly; padding-top: 20px; } @@ -14,6 +14,7 @@ body { flex-wrap: wrap; justify-content: space-evenly; padding-top: 5px; + max-width: 300px; } .flex-receipt { @@ -34,11 +35,11 @@ body { .green-container { background-color: #004e00; - border: 10px solid #000000; - width: 400px; + border: 5px solid #000000; border-radius: 50px; padding: 2.5rem; color: white; + margin: 2px; } .step { @@ -100,6 +101,7 @@ body { display: flex; justify-content: space-between; flex-flow: row wrap; + max-width: 300px; } .white-btn { @@ -166,3 +168,4 @@ body { } /* https://webdeasy.de/en/top-css-buttons-en/ */ +/* https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/ */ From d17c82e2a94668fbe46698faacee9368dd2d692e Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Fri, 11 Nov 2022 15:29:22 +0800 Subject: [PATCH 21/25] set limit to no. of characters accepted by input fields, responsive sizing for small screens --- src/App.css | 11 ++++++++++- src/components/ExpenseForm.js | 1 + src/components/GroupForm.js | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index e9e45aca..9a47c261 100644 --- a/src/App.css +++ b/src/App.css @@ -77,7 +77,6 @@ body { .tooltip .tooltiptext { visibility: hidden; - width: 120px; background-color: black; color: #fff; text-align: center; @@ -167,5 +166,15 @@ body { transition: all 0.2s; } +/* Responsive columns - one column layout (vertical) on small screens */ +@media screen and (max-width: 600px) { + .flex-container { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + padding-top: 20px; + } +} + /* https://webdeasy.de/en/top-css-buttons-en/ */ /* https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/ */ diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 4f4e2fe1..3983a2c0 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -112,6 +112,7 @@ export default class ExpenseForm extends React.Component { className="input-field" type="text" name="item" + maxLength={24} value={this.state.item} required onChange={(e) => this.handleChange(e)} diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js index e20cc684..d016aedf 100644 --- a/src/components/GroupForm.js +++ b/src/components/GroupForm.js @@ -40,6 +40,7 @@ export default class GroupForm extends React.Component { className="input-field" type="text" placeholder="Enter Person Name" + maxLength={15} onChange={this.handleUserInput} value={this.state.name} /> From 81dec3b92e186203e0547e1c8499e69dbc1a7940 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sat, 12 Nov 2022 00:12:51 +0800 Subject: [PATCH 22/25] minor styling updates to second container, third container, records of expenses --- src/App.css | 9 +++++++++ src/App.js | 15 ++++++--------- src/components/ExpenseForm.js | 4 +++- src/components/ReceiptDisplay.js | 8 ++++---- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index 9a47c261..cbff1b74 100644 --- a/src/App.css +++ b/src/App.css @@ -26,6 +26,15 @@ body { padding-bottom: 15px; } +.flex-arrow { + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: bold; + width: 200px; + color: #fffbc1; +} + .flex-tax { display: flex; flex-flow: row wrap; diff --git a/src/App.js b/src/App.js index ef0df86a..9da2c9e3 100644 --- a/src/App.js +++ b/src/App.js @@ -13,13 +13,8 @@ class App extends React.Component { this.state = { uniqueNames: [], overallReceipt: {}, - group: ["anya", "bella", "cass", "darren"], - expenses: [ - { item: "Burger 1", amount: 4.2, spenders: ["patrick", "spongebob"] }, - { item: "Burger 2", amount: 4.8, spenders: ["anya", "bella", "cass"] }, - { item: "Burger 7", amount: 4.8, spenders: ["patrick", "anya"] }, - { item: "Burger 8", amount: 9.6, spenders: ["cass", "darren"] }, - ], + group: [], + expenses: [], hover: -1, }; } @@ -115,7 +110,7 @@ class App extends React.Component { return (
-

A Bill Splitting App

+

Split âš¡ My âš¡ Bill

@@ -179,7 +174,9 @@ class App extends React.Component {
-

📜RECORDS OF EXPENSES📜

+ {this.state.expenses.length > 0 && ( +

📜RECORDS OF EXPENSES📜

+ )}
{copyExpenses.map((entry, i) => ( diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js index 3983a2c0..32adb99a 100644 --- a/src/components/ExpenseForm.js +++ b/src/components/ExpenseForm.js @@ -178,7 +178,9 @@ export default class ExpenseForm extends React.Component {

- Split amongst: + + Split amongst: +

diff --git a/src/components/ReceiptDisplay.js b/src/components/ReceiptDisplay.js index fd0bd39c..e683d6f7 100644 --- a/src/components/ReceiptDisplay.js +++ b/src/components/ReceiptDisplay.js @@ -4,10 +4,10 @@ export default class ReceiptDisplay extends React.Component { render() { return (
- - {this.props.name} - {" → "}${this.props.receipt.total.toFixed(2)} - +
+
{this.props.name}
+
${this.props.receipt.total.toFixed(2)}
+
From b61449793250fa5e0ba9844b8f1879487edbee84 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sun, 13 Nov 2022 14:01:40 +0800 Subject: [PATCH 23/25] add default values for testing and clear records function --- src/App.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 9da2c9e3..9dd03419 100644 --- a/src/App.js +++ b/src/App.js @@ -13,8 +13,13 @@ class App extends React.Component { this.state = { uniqueNames: [], overallReceipt: {}, - group: [], - expenses: [], + group: ["adeline","bella","cassandra","daryl lee"], + expenses: [ + { item: "Apple Juice", amount: 4.2, spenders: ["anya", "bella"] }, + { item: "Burger", amount: 4.2, spenders: ["anya", "bella"] }, + { item: "Cheese", amount: 4.2, spenders: ["anya", "bella"] }, + { item: "Dango", amount: 4.2, spenders: ["anya", "bella"] }, + ], hover: -1, }; } @@ -51,6 +56,12 @@ class App extends React.Component { }); }; + clearRecords = () => { + this.setState({ + expenses: [], + }); + }; + splitBill = () => { let expensesList = [...this.state.expenses]; let spenderList = []; @@ -189,6 +200,12 @@ class App extends React.Component { ))} +
+ {this.state.expenses.length > 0 && ( +
+ +
+ )} ); } From 38358df39bb804ffcc013a53f7b11844ec3129a7 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sun, 13 Nov 2022 15:27:46 +0800 Subject: [PATCH 24/25] NA --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 9dd03419..c18d20c6 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,7 @@ class App extends React.Component { this.state = { uniqueNames: [], overallReceipt: {}, - group: ["adeline","bella","cassandra","daryl lee"], + group: ["adeline", "bella", "cassandra", "daryl lee"], expenses: [ { item: "Apple Juice", amount: 4.2, spenders: ["anya", "bella"] }, { item: "Burger", amount: 4.2, spenders: ["anya", "bella"] }, From 109a831ad2160a95383a2c1c9a751c7f9a65db50 Mon Sep 17 00:00:00 2001 From: lazyhazydaze Date: Sun, 13 Nov 2022 18:29:00 +0800 Subject: [PATCH 25/25] rubber ducky quack quack quack --- src/App.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index c18d20c6..11cd228c 100644 --- a/src/App.js +++ b/src/App.js @@ -13,17 +13,22 @@ class App extends React.Component { this.state = { uniqueNames: [], overallReceipt: {}, - group: ["adeline", "bella", "cassandra", "daryl lee"], - expenses: [ - { item: "Apple Juice", amount: 4.2, spenders: ["anya", "bella"] }, - { item: "Burger", amount: 4.2, spenders: ["anya", "bella"] }, - { item: "Cheese", amount: 4.2, spenders: ["anya", "bella"] }, - { item: "Dango", amount: 4.2, spenders: ["anya", "bella"] }, - ], + group: [], + expenses: [], hover: -1, }; } + componentDidMount() { + let state = localStorage.getItem("state"); + state = JSON.parse(state); + this.setState(state); + } + + componentDidUpdate() { + localStorage.setItem("state", JSON.stringify(this.state)); + } + addName = (name) => { let newGroup = [...this.state.group, name]; this.setState({ @@ -40,7 +45,8 @@ class App extends React.Component { }; deleteRecord = (e) => { - // e is the event, e.target is the button, + // deleteRecord takes in a parameter (like addName or deleteName) + // e is the event, e.target is the button, the value in e.target.value is defined in Line 38 of dispay expense which takes its value from the id which is an index. let key = e.target.value; let newexpenses = [...this.state.expenses]; newexpenses.splice(key, 1);