admuchoor.github.io/splitty.html at master · admuchoor/admuchoor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splitty</title>

    <link href="splitty_style.css" rel="stylesheet">
</head>

<body>
    <p>
        One day, I went to get food with some friends and I put my card down to pay.
        There were multiple items and each item was split between a different subset of people, so
        I realized that figuring out how much each person owed was quite a tedious process. To solve
        this problem, I decided to automate this process in an easy (at least to me) way. This is Splitty!
    </p>
    <br><br>
    <h1>How many items were there?</h1>
    <input id="numItems"> <br> <br>
    <button id="button" onclick="generateSpreadsheet()">Submit</button>

    <h1 id="message"> </h1>

    <p>
        Note that for the purpose of calculating each person's share of the tax, tip, and other fees,
        Splitty uses a "proportional split". For example, let's say Tom ordered hot wings that cost
        $8, and Jerry ordered a side dish that cost $2. This makes the subtotal $10. Now let's say
        the tax, tip, and additional fees were an extra $10. This makes the total $20. In my opinion,
        it doesn't seem fair for Jerry to have to pay half of the additional fees when they only got
        a side! <a href="https://www.youtube.com/watch?v=EYb9jnt2cv4" target="_blank"> Others may
        agree :)</a> Instead, they should be charged for the proportion of items that they bought.
        If you fed this bill into Splitty, it would report that Tom owes $16 and that Jerry owes $4.
    </p>

    <script>
        function generateSpreadsheet() {
            var result = `
                <table id="spreadsheet">
                <tr>
                <th></th>
                <th>Price of Each Item (only input the number)</th>
                <th>Who Split Each Item (comma separated names)</th>
                <!-- Add more columns as needed -->
                </tr>
            `;

            NUM_ITEMS = parseInt(document.querySelector("#numItems").value);
            for (var i = 0; i < NUM_ITEMS; i++) {
                result += `
                    <tr>
                    <th>Item ${i + 1}</th>
                    <td contenteditable="true"></td>
                    <td contenteditable="true"></td>
                    <!-- Add more cells as needed -->
                    </tr>
                `;
            }

            TOTAL_ROW_STR = `
                <tr>
                <th>What was the total after tax/tip?</th>
                <td colspan="2" contenteditable="true"></td>
                </tr>
            `;
            END_TABLE_STR = '</table>';
            ADD_ROW_STR = '<button id="button2" onclick="addRow()">Add Row</button><br>';
            PROCESS_BUTTON_STR = '<button id="processButton" onclick="processItems()">Split The Bill!</button>';

            ROWS_AFTER_ITEMS = [TOTAL_ROW_STR, END_TABLE_STR, ADD_ROW_STR, PROCESS_BUTTON_STR]
            for (const row of ROWS_AFTER_ITEMS) {
                result += row;
            }

            let message = document.querySelector("#message");
            message.innerHTML = result;
        }

        function processItems() {
            const table = document.getElementById('spreadsheet');
            const cells = table.getElementsByTagName('td');

            var subtotal = 0.0;
            var people = {};
            for (let i = 0; i + 1 < cells.length; i += 2) {
                const cost = parseFloat(cells[i].innerText);

                if (isNaN(cost)) {
                    continue;
                }

                const splitted = cells[i+1].innerText.split(',');

                subtotal += cost;

                var price_per = cost / splitted.length;
                for (const person of splitted) {
                    let name = person.toLowerCase().trim();
                    if (!(name in people)) {
                        people[name] = 0.0;
                    }
                    people[name] += price_per
                }
            }

            const total_cell_idx = cells.length - 1;
            const total = parseFloat(cells[total_cell_idx].innerText);

            var result = '<ul style="list-style: none;">';
            for (var person in people) {
                let this_split = people[person] / subtotal * total;
                result += "<li>" +  person + " owes $" + this_split.toFixed(2) + "</li>";
            }
            result += "</ul>";

            let message = document.querySelector("#message");
            message.innerHTML = result;
        }

        function addRow() {
            let result = document.querySelector("#message").innerHTML;
            var new_row_idx = result.length;
            for (const row of ROWS_AFTER_ITEMS) {
                new_row_idx -= row.length;
            }

            let newRow =  `
                    <tr>
                    <th>Item ${NUM_ITEMS + 1}</th>
                    <td contenteditable="true"></td>
                    <td contenteditable="true"></td>
                    <!-- Add more cells as needed -->
                    </tr>
                `;

            NUM_ITEMS++;
            message.innerHTML = result.substr(0, new_row_idx) + newRow + result.substr(new_row_idx);
        }

    </script>

</html>