Merge pull request #2615 from Archiesachin/Expense-splitter

Added expense splitter extension
Sulagna-Dutta-Roy · Aug 7, 2024 · 0a46fbe · 0a46fbe
2 parents 873b4ca + fab0bd0
commit 0a46fbe
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 0 deletions.
diff --git a/Expense Splitter/index.html b/Expense Splitter/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Expense Splitter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Expense Splitter</h1>
+        <div id="inputs">
+            <div class="input-group">
+                <input type="text" placeholder="Name" class="name">
+                <input type="number" placeholder="Amount Paid" class="amount">
+                <button class="remove">Remove</button>
+            </div>
+        </div>
+        <button id="add">Add Person</button>
+        <button id="calculate">Calculate</button>
+        <div id="results"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/Expense Splitter/manifest.json 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": [
+              "<all_urls>"
+          ]
+      }
+  ]
+}
diff --git a/Expense Splitter/script.js 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 = `
+      <input type="text" placeholder="Name" class="name">
+      <input type="number" placeholder="Amount Paid" class="amount">
+      <button class="remove">Remove</button>
+  `;
+  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 += `<p>${ower.name} owes ${creditor.name} Rs.${amount.toFixed(2)}</p><br>`;
+
+      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
@@ -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;
+}
+
+
+
+