From e740a60326146d49f0367e38947d005bd1cb740d Mon Sep 17 00:00:00 2001 From: Anagha Chaudhari <143149376+anagha-chaudhari@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:00:13 +0530 Subject: [PATCH] Added Money Counter Calculator (#1827) --- .../Money-Counter-Calculator/README.md | 19 +++ .../Money-Counter-Calculator/index.html | 130 ++++++++++++++++++ .../Money-Counter-Calculator/script.js | 54 ++++++++ .../Money-Counter-Calculator/style.css | 91 ++++++++++++ index.html | 14 ++ 5 files changed, 308 insertions(+) create mode 100644 Calculators/Money-Counter-Calculator/README.md create mode 100644 Calculators/Money-Counter-Calculator/index.html create mode 100644 Calculators/Money-Counter-Calculator/script.js create mode 100644 Calculators/Money-Counter-Calculator/style.css diff --git a/Calculators/Money-Counter-Calculator/README.md b/Calculators/Money-Counter-Calculator/README.md new file mode 100644 index 000000000..4cebed009 --- /dev/null +++ b/Calculators/Money-Counter-Calculator/README.md @@ -0,0 +1,19 @@ +#

Money Counter Calculator

+ +## Description :- + +The Money Counter Calculator allows users to input quantities of various banknotes and coins, calculates the total amount in Indian Rupees (INR), and converts the total into a selected currency. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- Input quantities of various banknotes and coins, with the calculator summing up the total amount in Indian Rupees (INR). + +- Converts the total amount into a selected currency using real-time conversion rates. + +## Screenshots :- diff --git a/Calculators/Money-Counter-Calculator/index.html b/Calculators/Money-Counter-Calculator/index.html new file mode 100644 index 000000000..f0c25c7ca --- /dev/null +++ b/Calculators/Money-Counter-Calculator/index.html @@ -0,0 +1,130 @@ + + + + + + Neumorphic Money Calculator + + + + +
+

Money Calculator

+
+ + +
+
+ +
+

Notes

+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ + +
+

Coins

+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+
+ + + +
+
+ + + + diff --git a/Calculators/Money-Counter-Calculator/script.js b/Calculators/Money-Counter-Calculator/script.js new file mode 100644 index 000000000..6ac6a4ea9 --- /dev/null +++ b/Calculators/Money-Counter-Calculator/script.js @@ -0,0 +1,54 @@ +const conversionRates = { + INR: 1, + USD: 0.012, + EUR: 0.011, + GBP: 0.0095, + AUD: 0.018 +}; + +function increment(id) { + let input = document.getElementById(id); + input.value = parseInt(input.value) + 1; +} + +function decrement(id) { + let input = document.getElementById(id); + if (parseInt(input.value) > 0) { + input.value = parseInt(input.value) - 1; + } +} + +function updateCurrency() { + calculateTotal(); +} + +function calculateTotal() { + const currency = document.getElementById("currency").value; + + // Notes + const notes2000 = parseInt(document.getElementById("notes2000").value) || 0; + const notes500 = parseInt(document.getElementById("notes500").value) || 0; + const notes200 = parseInt(document.getElementById("notes200").value) || 0; + const notes100 = parseInt(document.getElementById("notes100").value) || 0; + const notes50 = parseInt(document.getElementById("notes50").value) || 0; + const notes20 = parseInt(document.getElementById("notes20").value) || 0; + const notes10 = parseInt(document.getElementById("notes10").value) || 0; + + // Coins + const coins10 = parseInt(document.getElementById("coins10").value) || 0; + const coins5 = parseInt(document.getElementById("coins5").value) || 0; + const coins2 = parseInt(document.getElementById("coins2").value) || 0; + const coins1 = parseInt(document.getElementById("coins1").value) || 0; + + // Total + + const totalINR = (notes2000 * 2000) + (notes500 * 500) + (notes200 * 200) + + (notes100 * 100) + (notes50 * 50) + (notes20 * 20) + + (notes10 * 10) + (coins10 * 10) + (coins5 * 5) + + (coins2 * 2) + (coins1 * 1); + + const totalInSelectedCurrency = totalINR * conversionRates[currency]; + + let resultText = `Total Amount: ${currency} ${totalInSelectedCurrency.toFixed(2)}`; + document.getElementById("result").innerText = resultText; +} diff --git a/Calculators/Money-Counter-Calculator/style.css b/Calculators/Money-Counter-Calculator/style.css new file mode 100644 index 000000000..425a4b0b9 --- /dev/null +++ b/Calculators/Money-Counter-Calculator/style.css @@ -0,0 +1,91 @@ +body { + font-family: 'Poppins', sans-serif; + background-color: #e0e0e0; + display: flex; + justify-content: center; + align-items: center; + height: 140vh; + margin: 0; +} + +.container { + background-color: #f0f0f0; + border-radius: 20px; + padding: 30px; + box-shadow: 5px 5px 15px #a0a0a0, -5px -5px 15px #ffffff; + text-align: center; + width: 400px; +} + +h1, h2 { + margin-bottom: 20px; + color: #3d3d3d; +} + +.currency-switch { + margin-bottom: 30px; +} + +.calculator { + display: flex; + justify-content: space-between; +} + +.column { + width: 45%; +} + +.denomination { + margin-bottom: 15px; + text-align: left; +} + +.input-group { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #e0e0e0; + padding: 5px; + border-radius: 10px; + box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; +} + +input[type="number"] { + width: 50px; + text-align: center; + border: none; + outline: none; + background-color: transparent; + font-size: 1rem; + color: #333; +} + +button { + background-color: transparent; + border: none; + font-size: 1.2rem; + cursor: pointer; + color: #333; +} + +.calculate-btn { + margin-top: 20px; + padding: 10px 20px; + font-size: 1rem; + border-radius: 20px; + background-color: #e0e0e0; + box-shadow: 5px 5px 15px #a0a0a0, -5px -5px 15px #ffffff; + cursor: pointer; + border: none; + color: #333; +} + +.calculate-btn:hover { + background-color: #d0d0d0; +} + +.result { + margin-top: 20px; + font-size: 1.2rem; + color: #333; +} diff --git a/index.html b/index.html index 3e7aeeadb..c0ed4af26 100644 --- a/index.html +++ b/index.html @@ -3295,6 +3295,20 @@

Calculates the mobility of an electric field.

+
+
+

Money Counter Calculator

+

Calculates total money in Rs and provides currency conversion

+
+ + + + + Source Code + +
+
+

Molarity Calculator