Skip to content

Commit

Permalink
Added Money Counter Calculator (#1827)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anagha-chaudhari
anagha-chaudhari authored Aug 10, 2024
1 parent 7feface commit e740a60
Show file tree
Hide file tree
Showing 5 changed files with 308 additions and 0 deletions.
19 changes: 19 additions & 0 deletions Calculators/Money-Counter-Calculator/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# <p align="center">Money Counter Calculator</p>

## 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 :-
130 changes: 130 additions & 0 deletions Calculators/Money-Counter-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphic Money Calculator</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Money Calculator</h1>
<div class="currency-switch">
<label for="currency">Select Currency: </label>
<select id="currency" class="currency-select">
<option value="INR">INR</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="AUD">AUD</option>
</select>
</div>
<div class="calculator">
<!-- Notes Column -->
<div class="column">
<h2>Notes</h2>
<div class="denomination">
<label>Rs 2000:</label>
<div class="input-group">
<button onclick="decrement('notes2000')">-</button>
<input type="number" id="notes2000" value="0" min="0">
<button onclick="increment('notes2000')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 500:</label>
<div class="input-group">
<button onclick="decrement('notes500')">-</button>
<input type="number" id="notes500" value="0" min="0">
<button onclick="increment('notes500')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 200:</label>
<div class="input-group">
<button onclick="decrement('notes200')">-</button>
<input type="number" id="notes200" value="0" min="0">
<button onclick="increment('notes200')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 100:</label>
<div class="input-group">
<button onclick="decrement('notes100')">-</button>
<input type="number" id="notes100" value="0" min="0">
<button onclick="increment('notes100')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 50:</label>
<div class="input-group">
<button onclick="decrement('notes50')">-</button>
<input type="number" id="notes50" value="0" min="0">
<button onclick="increment('notes50')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 20:</label>
<div class="input-group">
<button onclick="decrement('notes20')">-</button>
<input type="number" id="notes20" value="0" min="0">
<button onclick="increment('notes20')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 10:</label>
<div class="input-group">
<button onclick="decrement('notes10')">-</button>
<input type="number" id="notes10" value="0" min="0">
<button onclick="increment('notes10')">+</button>
</div>
</div>
</div>

<!-- Coins Column -->
<div class="column">
<h2>Coins</h2>
<div class="denomination">
<label>Rs 10:</label>
<div class="input-group">
<button onclick="decrement('coins10')">-</button>
<input type="number" id="coins10" value="0" min="0">
<button onclick="increment('coins10')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 5:</label>
<div class="input-group">
<button onclick="decrement('coins5')">-</button>
<input type="number" id="coins5" value="0" min="0">
<button onclick="increment('coins5')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 2:</label>
<div class="input-group">
<button onclick="decrement('coins2')">-</button>
<input type="number" id="coins2" value="0" min="0">
<button onclick="increment('coins2')">+</button>
</div>
</div>
<div class="denomination">
<label>Rs 1:</label>
<div class="input-group">
<button onclick="decrement('coins1')">-</button>
<input type="number" id="coins1" value="0" min="0">
<button onclick="increment('coins1')">+</button>
</div>
</div>
</div>
</div>

<button class="calculate-btn" onclick="calculateTotal()">Calculate</button>

<div id="result" class="result"></div>
</div>

<script src="script.js"></script>
</body>
</html>
54 changes: 54 additions & 0 deletions Calculators/Money-Counter-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
91 changes: 91 additions & 0 deletions Calculators/Money-Counter-Calculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 14 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3295,6 +3295,20 @@ <h3>Calculates the mobility of an electric field.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Money Counter Calculator</h2>
<h3>Calculates total money in Rs and provides currency conversion</h3>
<div class="card-footer">
<a href="./Calculators/Money-Counter-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Mobility-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Molarity Calculator</h2>
Expand Down

0 comments on commit e740a60

Please sign in to comment.