1
This commit is contained in:
parent
6ed23d40af
commit
f1462e5549
@ -93,5 +93,7 @@ body {
|
|||||||
.footer {
|
.footer {
|
||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
margin-top: 4rem;
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const amountInput = document.getElementById('amount');
|
const amountInput = document.getElementById('amount');
|
||||||
const rateInput = document.getElementById('rate');
|
const rateInput = document.getElementById('rate');
|
||||||
|
const agreementInput = document.getElementById('agreement');
|
||||||
const vatAmountOutput = document.getElementById('vatAmount');
|
const vatAmountOutput = document.getElementById('vatAmount');
|
||||||
const totalAmountOutput = document.getElementById('totalAmount');
|
const totalAmountOutput = document.getElementById('totalAmount');
|
||||||
const grossSalaryInput = document.getElementById('gross-salary');
|
const netAmountOutput = document.getElementById('netAmount');
|
||||||
const netSalaryOutput = document.getElementById('netSalary');
|
|
||||||
|
|
||||||
function calculateVAT() {
|
function updateCalculator() {
|
||||||
const amount = parseFloat(amountInput.value) || 0;
|
const amount = parseFloat(amountInput.value) || 0;
|
||||||
const rate = parseFloat(rateInput.value) || 0;
|
const rate = parseFloat(rateInput.value) || 0;
|
||||||
|
let tax = 0;
|
||||||
|
|
||||||
if (amount > 0 && rate > 0) {
|
if (amount > 0 && rate > 0) {
|
||||||
const vatAmount = (amount * rate) / 100;
|
const vatAmount = (amount * rate) / 100;
|
||||||
@ -16,41 +17,37 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
vatAmountOutput.textContent = vatAmount.toFixed(2);
|
vatAmountOutput.textContent = vatAmount.toFixed(2);
|
||||||
totalAmountOutput.textContent = totalAmount.toFixed(2);
|
totalAmountOutput.textContent = totalAmount.toFixed(2);
|
||||||
|
|
||||||
|
if (totalAmount > 0) {
|
||||||
|
if (totalAmount <= 1000) {
|
||||||
|
tax = totalAmount * 0.10;
|
||||||
|
} else if (totalAmount <= 3000) {
|
||||||
|
tax = (1000 * 0.10) + ((totalAmount - 1000) * 0.20);
|
||||||
|
} else {
|
||||||
|
tax = (1000 * 0.10) + (2000 * 0.20) + ((totalAmount - 3000) * 0.30);
|
||||||
|
}
|
||||||
|
const netAmount = totalAmount - tax;
|
||||||
|
netAmountOutput.textContent = netAmount.toFixed(2);
|
||||||
|
} else {
|
||||||
|
netAmountOutput.textContent = '0.00';
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
vatAmountOutput.textContent = '0.00';
|
vatAmountOutput.textContent = '0.00';
|
||||||
totalAmountOutput.textContent = '0.00';
|
totalAmountOutput.textContent = '0.00';
|
||||||
}
|
netAmountOutput.textContent = '0.00';
|
||||||
}
|
|
||||||
|
|
||||||
function calculateNetSalary() {
|
|
||||||
const grossSalary = parseFloat(grossSalaryInput.value) || 0;
|
|
||||||
let tax = 0;
|
|
||||||
|
|
||||||
if (grossSalary > 0) {
|
|
||||||
if (grossSalary <= 1000) {
|
|
||||||
tax = grossSalary * 0.10;
|
|
||||||
} else if (grossSalary <= 3000) {
|
|
||||||
tax = (1000 * 0.10) + ((grossSalary - 1000) * 0.20);
|
|
||||||
} else {
|
|
||||||
tax = (1000 * 0.10) + (2000 * 0.20) + ((grossSalary - 3000) * 0.30);
|
|
||||||
}
|
|
||||||
const netSalary = grossSalary - tax;
|
|
||||||
netSalaryOutput.textContent = netSalary.toFixed(2);
|
|
||||||
} else {
|
|
||||||
netSalaryOutput.textContent = '0.00';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.setRate = function(rate) {
|
window.setRate = function(rate) {
|
||||||
rateInput.value = rate;
|
rateInput.value = rate;
|
||||||
calculateVAT();
|
updateCalculator();
|
||||||
}
|
}
|
||||||
|
|
||||||
amountInput.addEventListener('input', calculateVAT);
|
amountInput.addEventListener('input', updateCalculator);
|
||||||
rateInput.addEventListener('input', calculateVAT);
|
rateInput.addEventListener('input', updateCalculator);
|
||||||
grossSalaryInput.addEventListener('input', calculateNetSalary);
|
agreementInput.addEventListener('change', updateCalculator);
|
||||||
|
|
||||||
// Initial calculation
|
// Initial calculation
|
||||||
calculateVAT();
|
updateCalculator();
|
||||||
calculateNetSalary();
|
|
||||||
});
|
});
|
||||||
30
index.php
30
index.php
@ -27,9 +27,17 @@
|
|||||||
<h2>Instant VAT Calculator</h2>
|
<h2>Instant VAT Calculator</h2>
|
||||||
<form id="vat-form">
|
<form id="vat-form">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="amount" class="form-label">Amount (excl. VAT)</label>
|
<label for="amount" class="form-label">Base Amount</label>
|
||||||
<input type="number" class="form-control" id="amount" placeholder="e.g., 100" step="0.01">
|
<input type="number" class="form-control" id="amount" placeholder="e.g., 100" step="0.01">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="agreement" class="form-label">Employee Agreement Type</label>
|
||||||
|
<select class="form-select" id="agreement">
|
||||||
|
<option value="b2b">B2B</option>
|
||||||
|
<option value="b2c">B2C</option>
|
||||||
|
<option value="b2e">B2E</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="rate" class="form-label">VAT Rate (%)</label>
|
<label for="rate" class="form-label">VAT Rate (%)</label>
|
||||||
<input type="number" class="form-control" id="rate" value="20" placeholder="e.g., 20" step="0.1">
|
<input type="number" class="form-control" id="rate" value="20" placeholder="e.g., 20" step="0.1">
|
||||||
@ -46,25 +54,7 @@
|
|||||||
<p>VAT Amount: <span class="amount" id="vatAmount">0.00</span></p>
|
<p>VAT Amount: <span class="amount" id="vatAmount">0.00</span></p>
|
||||||
<hr>
|
<hr>
|
||||||
<p class="h4">Total (incl. VAT): <span class="amount" id="totalAmount">0.00</span></p>
|
<p class="h4">Total (incl. VAT): <span class="amount" id="totalAmount">0.00</span></p>
|
||||||
</div>
|
<p class="h4">Net Amount: <span class="amount" id="netAmount">0.00</span></p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row justify-content-center mt-4">
|
|
||||||
<div class="col-lg-8 col-xl-6">
|
|
||||||
<div class="card calculator-card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2>Net Salary Calculator</h2>
|
|
||||||
<form id="salary-form">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="gross-salary" class="form-label">Gross Salary</label>
|
|
||||||
<input type="number" class="form-control" id="gross-salary" placeholder="e.g., 3000" step="0.01">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="results">
|
|
||||||
<p>Net Salary: <span class="amount" id="netSalary">0.00</span></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user