From fab0bd005e5f0fda65e9336c9bc5d033d61fc5af Mon Sep 17 00:00:00 2001 From: Archiesachin Date: Wed, 7 Aug 2024 11:56:14 +0530 Subject: [PATCH] Added expense splitter extension --- Expense Splitter/index.html | 26 +++++++++++ Expense Splitter/manifest.json | 19 ++++++++ Expense Splitter/script.js | 81 ++++++++++++++++++++++++++++++++++ Expense Splitter/style.css | 66 +++++++++++++++++++++++++++ 4 files changed, 192 insertions(+) create mode 100644 Expense Splitter/index.html create mode 100644 Expense Splitter/manifest.json create mode 100644 Expense Splitter/script.js create mode 100644 Expense Splitter/style.css diff --git a/Expense Splitter/index.html b/Expense Splitter/index.html new file mode 100644 index 00000000..8f324d38 --- /dev/null +++ b/Expense Splitter/index.html @@ -0,0 +1,26 @@ + + + + + + Expense Splitter + + + +
+

Expense Splitter

+
+
+ + + +
+
+ + +
+
+ + + + diff --git a/Expense Splitter/manifest.json b/Expense Splitter/manifest.json new file mode 100644 index 00000000..8f9cef22 --- /dev/null +++ b/Expense Splitter/manifest.json @@ -0,0 +1,19 @@ +{ + "manifest_version": 3, + "name": "Expense Splitter", + "version": "1.0", + "optional_permissions" : ["tabs"], + "action": { + "default_popup": "index.html" + }, + "web_accessible_resources": [ + { + "resources": [ + "index.html" + ], + "matches": [ + "" + ] + } + ] +} \ No newline at end of file diff --git a/Expense Splitter/script.js b/Expense Splitter/script.js new file mode 100644 index 00000000..047d40ec --- /dev/null +++ b/Expense Splitter/script.js @@ -0,0 +1,81 @@ +document.getElementById('add').addEventListener('click', function() { + addPerson(); +}); + +document.getElementById('calculate').addEventListener('click', function() { + calculateExpenses(); +}); + +document.getElementById('inputs').addEventListener('click', function(event) { + if (event.target.classList.contains('remove')) { + event.target.parentElement.remove(); + } +}); + +function addPerson() { + const inputsDiv = document.getElementById('inputs'); + const div = document.createElement('div'); + div.className = 'input-group'; + div.innerHTML = ` + + + + `; + inputsDiv.appendChild(div); +} + +function calculateExpenses() { + const names = document.querySelectorAll('.name'); + const amounts = document.querySelectorAll('.amount'); + const resultsDiv = document.getElementById('results'); + resultsDiv.innerHTML = ''; + + let totalAmount = 0; + const people = []; + + for (let i = 0; i < names.length; i++) { + const name = names[i].value.trim(); + const amount = parseFloat(amounts[i].value); + if (name && !isNaN(amount)) { + people.push({ name, amount }); + totalAmount += amount; + } + } + + const average = totalAmount / people.length; + + const balance = people.map(person => ({ + name: person.name, + balance: person.amount - average + })); + + const owes = []; + const owed = []; + + balance.forEach(person => { + if (person.balance < 0) { + owes.push(person); + } else if (person.balance > 0) { + owed.push(person); + } + }); + + while (owes.length && owed.length) { + const ower = owes[0]; + const creditor = owed[0]; + + const amount = Math.min(-ower.balance, creditor.balance); + + resultsDiv.innerHTML += `

${ower.name} owes ${creditor.name} Rs.${amount.toFixed(2)}


`; + + ower.balance += amount; + creditor.balance -= amount; + + if (ower.balance === 0) { + owes.shift(); + } + if (creditor.balance === 0) { + owed.shift(); + } + } +} diff --git a/Expense Splitter/style.css b/Expense Splitter/style.css new file mode 100644 index 00000000..d21a5e01 --- /dev/null +++ b/Expense Splitter/style.css @@ -0,0 +1,66 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 500px; +} + +h1 { + text-align: center; + margin-bottom: 20px; +} + +.input-group { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.input-group input { + flex: 1; + margin-right: 10px; + padding: 5px; +} + +.input-group button { + padding: 5px; +} + +button { + width: 100%; + padding: 10px; + margin-top: 10px; + border: none; + background-color: #007bff; + color: white; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background-color: #0056b3; +} + +#results { + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; + font: 20px; + font-weight: bold; +} + + + +