- Edit src/App.js and save to reload.
-
+
+
+
+ +
+ {this.state.expenses.length > 0 && ( +
+
+
+ )}
);
}
diff --git a/src/components/DisplayExpense.css b/src/components/DisplayExpense.css
new file mode 100644
index 00000000..e0405bb1
--- /dev/null
+++ b/src/components/DisplayExpense.css
@@ -0,0 +1,48 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Float four columns side by side */
+.column {
+ float: left;
+ width: 25%;
+ padding: 5px 5px;
+}
+
+/* Remove extra left and right margins, due to padding in columns */
+.row-flex {
+ margin: 0 -5px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding-top: 20px;
+}
+
+/* Clear floats after the columns */
+.row-flex: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;
+ height: 100%;
+}
+
+/* Responsive columns - one column layout (vertical) on small screens */
+@media screen and (max-width: 600px) {
+ .column {
+ width: 100%;
+ display: block;
+ margin-bottom: 20px;
+ }
+}
diff --git a/src/components/DisplayExpense.js b/src/components/DisplayExpense.js
new file mode 100644
index 00000000..54428b7f
--- /dev/null
+++ b/src/components/DisplayExpense.js
@@ -0,0 +1,45 @@
+import React from "react";
+import "./DisplayExpense.css";
+
+const getFormattedPrice = (price) => {
+ const priceTwoDecimal = Number(price).toFixed(2);
+ 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 = () => {
+ let output = (this.props.amount / this.props.spenders.length).toFixed(2);
+ return output;
+ };
+ return (
+ Split âš¡ My âš¡ Bill
+
+
+
+
+
+
+
+ 1. Add person
+
+
+
+
+
+ 2. Add item
+
+
+
+
+
+ 3. View Receipt
+
+ {sortUniqueNames.map((name) => (
+
+
+
+
+
+ 4. Edit Group List
+
+ {copyGroup.map((k, i) => (
+
+
+ {k}{" "}
+
+
+ ))}
+ + +
+
+ {this.state.expenses.length > 0 && (
+
+
+ 📜RECORDS OF EXPENSES📜
+ )} +
+ {copyExpenses.map((entry, i) => (
+
+ + {this.state.expenses.length > 0 && ( +
+
+ );
+ }
+}
diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js
new file mode 100644
index 00000000..32adb99a
--- /dev/null
+++ b/src/components/ExpenseForm.js
@@ -0,0 +1,219 @@
+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);
+ this.state = {
+ item: "",
+ 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,
+ });
+ };
+
+ handleChangeCheckBox = (e) => {
+ const { checked, value } = e.target;
+
+ if (checked) {
+ 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,
+ });
+ }
+ };
+
+ 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({
+ item: "",
+ amount: "",
+ spenders: [],
+ start: true,
+ taxOption: "notax",
+ });
+ };
+
+ render() {
+ let copyOfNameList = [...this.props.fullNameList];
+ return (
+
+
+ + {this.props.item.toUpperCase()} +
++ ${getFormattedPrice(this.props.amount)} (${pricePerPax()}/px) +
++
+ {this.props.spenders.join(" ")}{" "} +
+ + +
+
+
+ );
+ }
+}
diff --git a/src/components/GroupForm.js b/src/components/GroupForm.js
new file mode 100644
index 00000000..d016aedf
--- /dev/null
+++ b/src/components/GroupForm.js
@@ -0,0 +1,56 @@
+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(newName);
+ this.setState({
+ name: "",
+ });
+ }
+ };
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/src/components/ReceiptDisplay.js b/src/components/ReceiptDisplay.js
new file mode 100644
index 00000000..e683d6f7
--- /dev/null
+++ b/src/components/ReceiptDisplay.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+export default class ReceiptDisplay extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/SplitBill.js b/src/components/SplitBill.js
new file mode 100644
index 00000000..fefc2b49
--- /dev/null
+++ b/src/components/SplitBill.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+export default class SplitBill extends React.Component {
+ render() {
+ return (
+
+
+
+ {this.props.name}
+ ${this.props.receipt.total.toFixed(2)}
+ | Purchase | +Cost | +
|---|---|
| {purchase} | +${this.props.receipt.costprice[i].toFixed(2)} | +
+
+
+
+
+ {this.props.uniqueName.length > 0 && ( + + (mouse over each person for breakdown) + + )} +
+
+ );
+ }
+}
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 (
+
+ );
+ }
+}
+
+ {this.props.uniqueName.length > 0 && ( + + (mouse over each person for breakdown) + + )} +