Bill Splitting App

Developer
Ajala Comfort
Size
6,825 Kb
Views
4,048
  1. Bill Splitting App Previews
  2. Bill Splitting App HTML Codes
  3. Bill Splitting App CSS Codes
  4. Bill Splitting App JS Codes

How do I make an bill splitting app?

What is a bill splitting app? How do you make a bill splitting app? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Bill Splitting App Previews
IQ Test

Bill Splitting App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bill Splitting App</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div id="space"></div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bill Splitting App - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css";
body{padding:0;margin:0;width:100%;}
div{background-repeat:no-repeat;background-position:center;background-size:cover;}
/*************************SPACE ***************************/
#space{font-family: 'Roboto', sans-serif;}
#space > #parent > div{min-height:700px;width:100%;clear:both;padding-top:50px;}
#space div{cursor:pointer;}
#parent > button{background:white;border:1px solid #f1c40f;width:100px;height:50px;position:fixed;z-index:2;}
#parent > button:hover{background:gold;color:white;}
/****************************HOWMANY**************/
#howmany input, #howmany p{display:inline-block;margin-top:250px;font-size:4vw;height:55px;font-weight:200;text-align:center;}
#howmany div{width:50px;margin:auto;margin-top:200px;}
#howmany > div > i{text-align:center;color:#27ae60;position:absolute;top:90%;}
#howmany > div > i > span{font-size:15px;display:block;}
#howmany p{width:60%;padding-left:2.5%;}
#howmany input{width:20%;margin-left:5%;border:none;border-bottom:1px solid black;}
#howmany > div > i{animation-name:jumpy;animation-duration:1s;animation-iteration-count: infinite;}
/**********************ORDER **********************************/
#getorder > div{width:70%;margin:auto;}
#getorder > div {float:left;min-height:250px;margin-top:5%;}
#getorder > div .fa{display:block;text-align:center;color:gray;}
#getorder > div > input,#getorder .minicards p{width:80%;margin-left:10%;}
#getorder .foodItems{width:90%;margin-left:10%;}
.foodItems li{color:#16a085;margin-top:10px;}
#getorder button{width:200px;height:50px;margin:auto;margin-left:35%;margin-top:50px;margin-bottom:50px;background:rgba(26, 188, 156,0.5);border:none;color:white;box-shadow:5px 5px gray;}
#getorder button:hover{box-shadow:none;}
#getorder .minicards p{height:20px;background:rgba(189, 195, 199,0.5);text-align:center;}
/**********************TOTAL*************************************/
#showtotal > p{font-size:1.5vw;text-align:center;font-weight:200;}
#showtotal > p > span{display:block;font-weight:500}
#showtotal > i{width:100%;text-align:center;} /** ANIMATE THIS ELEMENT**/
/*************************DisplayBill************************/
#displaybill > div{width:450px;min-height:700px;margin:auto;}
#displaybill > div > div{width:70%;margin-left:15%;}
#displaybill > div > div > p{width:100%;height:50px;text-align:center;font-size:1.5vw;}
.line_dotted{width:100%;margin-top:10px;border-top:1px dashed;margin-bottom:10px;}
#displaybill > div > div > ul{width:100%;}
#displaybill > div > div li > span{padding-left:70%;}
.client{padding-top:20px;}
.total{text-align:center;margin-top:50px;font-weight:600;font-size:25px;}
/***************************SVG************************/
#BARSVG{margin-left:75px;margin-top:5%;}
/**************KEYFRAMES*******************************/
@keyframes jumpy{ 0%{top:90%;} 50%{top:85%;} 0%{top:90%;}
}

Bill Splitting App - Script Codes JS Codes

"use strict";
var HowMany = React.createClass({ displayName: "HowMany", updateNumber: function updateNumber() { var val = $("#number_of_friends").val(); if (!val.length || val.length <= 0) { return false; } return isNaN(val) ? true : this.props.updateNumber(parseInt(val)); }, render: function render() { return React.createElement( "div", { id: "howmany" }, React.createElement( "p", null, "How many Friends " ), React.createElement("input", { type: "text", id: "number_of_friends", placeholder: "0" }), React.createElement( "div", { onClick: this.updateNumber }, React.createElement( "i", { className: "fa fa-arrow-down" }, React.createElement( "span", null, "Scroll" ) ) ) ); }
});
/************************************MANY *************************************/
var GetOrder = React.createClass({ displayName: "GetOrder", getInitialState: function getInitialState() { return { splitters: this.props.num, bill: [] }; }, getList: function getList(n) { var list = []; var icon_style = { fontSize: "55px" }, div_style = { border: "1px solid transparent", width: "40%", marginLeft: "5%" }; for (var i = 0; i < n; i++) { list.push(React.createElement( "div", { style: div_style, className: "minicards" }, React.createElement("i", { className: "fa fa-smile-o", "aria-hidden": "true", style: icon_style }), React.createElement("input", { type: "text", placeholder: "Food Item", id: i + "food" }), React.createElement("input", { type: "text", placeholder: "Price", id: i + "price" }), React.createElement( "p", { onClick: this.addItem.bind(null, i) }, "Add" ), React.createElement( "div", { className: "foodItems" }, React.createElement( "ul", null, this.state.bill[i] ? Object.keys(this.state.bill[i]).map(function (key) { return React.createElement( "li", null, key + ":" + this.state.bill[i][key] ); }.bind(this)) : null ) ) )); } return list; }, addItem: function addItem(person) { var food = $("#" + person + "food").val(); var price = $("#" + person + "price").val(); if (!food.length || food.length <= 0 || !price.length || price.length <= 0) { return false; } var obj = {};obj[food] = price; if (this.state.bill[person]) { this.state.bill[person][food] = price;; } else { this.state.bill[person] = obj; } $("#" + person + "food").val("");$("#" + person + "price").val(""); return this.setState({ bill: this.state.bill }); }, Createother: function Createother() { return this.state.bill.map(function (person) { var keys = Object.keys(person); var total = 0; keys.forEach(function (prev) { total += parseInt(person[prev]); }); return total; }); }, submit: function submit(bill, other) { return this.props.submitOrder(this.state.bill, this.Createother()); }, render: function render() { var list = this.getList(this.state.splitters); return React.createElement( "div", { id: "getorder" }, list, React.createElement( "button", { onClick: this.submit }, " DONE " ) ); }
});
/************************************DisplayBill**************************/
var DisplayBill = React.createClass({ displayName: "DisplayBill", getInitialState: function getInitialState() { return { bill: this.getBillArray(), total: this.getTotal() }; }, getTotal: function getTotal() { return this.props.other.reduce(function (pre, cur) { return pre + cur; }); }, getBillArray: function getBillArray() { return this.props.bill.map(function (person, i) { var each_order = Object.keys(person).map(function (key) { return React.createElement( "li", null, key, React.createElement( "span", { className: "price" }, person[key] ) ); }.bind(this)); return React.createElement( "div", null, React.createElement( "p", { className: "client" }, "Friend ", i ), React.createElement("div", { className: "line_dotted" }), React.createElement( "ul", null, each_order ), React.createElement( "p", { className: "eachtotal" }, "Total: ", this.props.other[i] ), React.createElement("div", { className: "line_dotted" }) ); }.bind(this)); }, getSVGBars: function getSVGBars() { var shift = 0, colors = ["#1abc9c", "rgba(189, 195, 199,0.5)", "rgba(241, 196, 15,0.5)"], count = 0; var bars = this.props.other.map(function (client, i) { var percentage_height = client / this.state.total * 100 + 50; shift = 25 * i; count = count >= colors.length ? 0 : count + 1; return React.createElement( "g", { className: "bar" }, React.createElement("rect", { width: "25", height: percentage_height, x: shift, fill: colors[count] }), React.createElement( "text", { x: shift + 20, y: percentage_height - 12.5, transform: "rotate(90," + shift + "," + percentage_height + ")", "font-size": "1.2vw" }, "Friend " + i + ": " + client + " euros" ) ); }.bind(this)); return bars; }, render: function render() { return React.createElement( "div", { id: "displaybill" }, React.createElement( "div", { className: "card" }, this.state.bill, React.createElement( "p", { className: "total" }, "Total: ", this.state.total + " Euros" ), React.createElement( "div", { id: "bye" }, React.createElement( "p", null, "Thanks for purchasing at Mcdunolds " ) ), React.createElement( "svg", { width: "300", height: "300", id: "BARSVG" }, this.getSVGBars() ) ) ); }
});
/************************************PARENT *************************************/
var Parent = React.createClass({ displayName: "Parent", getInitialState: function getInitialState() { return { number: undefined, bill: undefined, other: undefined, status: "update" }; }, updateNumber: function updateNumber(num) { return this.setState({ number: num, status: "order" }); }, submitOrder: function submitOrder(bill, other) { return this.setState({ bill: bill, other: other, status: "bill" }); }, goBack: function goBack() { if (this.state.status == "order") { this.state.status = "update"; } else if (this.state.status == "bill") { this.state.status = "order"; } return this.setState({ status: this.state.status }); }, render: function render() { return React.createElement( "div", { id: "parent" }, React.createElement( "button", { onClick: this.goBack }, React.createElement("i", { className: "fa fa-undo" }) ), this.state.status == "update" ? React.createElement(HowMany, { updateNumber: this.updateNumber }) : null, this.state.status == "order" ? React.createElement(GetOrder, { num: this.state.number, submitOrder: this.submitOrder }) : null, this.state.status == "bill" ? React.createElement(DisplayBill, { bill: this.state.bill, other: this.state.other }) : null ); }
});
ReactDOM.render(React.createElement(Parent, null), document.getElementById("space"));
Bill Splitting App - Script Codes
Bill Splitting App - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 6,825 Kb
Views 4,048
Do you need developer help for Bill Splitting App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Math using Stacks
Intermediate Todo List with React.js
Second Website
Recipe Book
Calculator with ReactJs
My Porfolio
Material Chat app Interface with ReactJS
Slide Show with ReactJs
SVG Clock Practice
Calender Update
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!