Upload files to ''
This commit is contained in:
parent
e43aca3ce3
commit
16d57c39a1
166
scratch.html
Normal file
166
scratch.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap demo</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>Hello, world!</h1>
|
||||
<form class="row">
|
||||
<div class="mb-3 col-sm-6 col-md-4">
|
||||
<label for="idBruttoInput" class="form-label text-bold">Brutto salary*:</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">€</span>
|
||||
<input type="number" class="form-control" id="idBruttoInput" placeholder="700" min="700"
|
||||
step="1">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
|
||||
<label for="idDependentsInput" class="form-label text-bold">Dependents:</label>
|
||||
<select id="idDependentsInput" class="form-select">
|
||||
<option value="0" selected>0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
</select>
|
||||
<label><input type="checkbox" id="idTaxBookSubmitted" checked> Salary tax book has been submitted to
|
||||
the employer</label>
|
||||
|
||||
<label for="idExtraTaxDiscount" class="form-label text-bold">Extra tax-free amount:</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">€</span>
|
||||
<input type="number" class="form-control" id="idExtraTaxDiscount" placeholder="0" min="0"
|
||||
step="0.01">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col col-md-5">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Brutto salary</div>
|
||||
</div>
|
||||
<span id="idBruttoSalaryDisplay">1300,00€</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Social security tax</div>
|
||||
</div>
|
||||
<span id="idSocialSecurityTaxDisplay" class="text-danger">969,26€</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Income tax</div>
|
||||
</div>
|
||||
<span id="idIncomeTaxDisplay" class="text-danger">969,26€</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Net salary</div>
|
||||
</div>
|
||||
<span id="idNetSalaryDisplay" class="text-primary">969,26€</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Employer tax</div>
|
||||
</div>
|
||||
<span id="idEmployerTaxDisplay" class="text-warning">306.67€</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Employer total cost</div>
|
||||
</div>
|
||||
<span id="idEmployerTotalCostDisplay">1606,67€</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||
crossorigin="anonymous"></script>
|
||||
<script>
|
||||
// document.addEventListener("load", _ => {
|
||||
const yearlySalaryLimit_1 = 20004,
|
||||
yearlySalaryLimit_2 = 78100,
|
||||
minTaxable = 500,
|
||||
maxTaxable = 1800,
|
||||
diffTaxable = minTaxable - maxTaxable,
|
||||
minTaxFree = 0,
|
||||
maxTaxFree = 500,
|
||||
diffTaxFree = minTaxFree - maxTaxFree,
|
||||
dependentsDiscount = 250,
|
||||
halfPercent = 5 / 1000,
|
||||
socialInsurancePercent = 105 / 1000;
|
||||
const bruttoInput = document.getElementById("idBruttoInput"),
|
||||
dependentInput = document.getElementById("idDependentsInput"),
|
||||
taxBookSubmittedInput = document.getElementById("idTaxBookSubmitted"),
|
||||
extraTaxDiscountInput = document.getElementById("idExtraTaxDiscount");
|
||||
const displayEuro = amount => `${parseFloat(amount).toFixed(2)} €`.replace(".", ",")
|
||||
const updateCalculatedNetSalary = _ => {
|
||||
const bruttoSalary = parseFloat(bruttoInput.value),
|
||||
dependentCount = parseInt(dependentInput.value),
|
||||
taxDiscount = parseFloat(extraTaxDiscountInput.value),
|
||||
taxBookSubmitted = !!taxBookSubmittedInput.checked,
|
||||
socialSecurityTax = calculateSocialInsuranceAmount(bruttoSalary),
|
||||
incomeTax = calculateIncomeTax(bruttoSalary, socialSecurityTax, taxDiscount, dependentCount, taxBookSubmitted),
|
||||
netSalary = calculateNetSalary(bruttoSalary, socialSecurityTax, incomeTax),
|
||||
employersSocialTax = calculateEmployersSocialInsuranceAmount(bruttoSalary),
|
||||
employersTotalCost = bruttoSalary + employersSocialTax,
|
||||
bruttoDisplay = document.getElementById("idBruttoSalaryDisplay"),
|
||||
socialSecurityDisplay = document.getElementById("idSocialSecurityTaxDisplay"),
|
||||
incomeTaxDisplay = document.getElementById("idIncomeTaxDisplay"),
|
||||
netSalaryDisplay = document.getElementById("idNetSalaryDisplay"),
|
||||
employerTaxDisplay = document.getElementById("idEmployerTaxDisplay"),
|
||||
employerTotalCostDisplay = document.getElementById("idEmployerTotalCostDisplay");
|
||||
bruttoDisplay.textContent = displayEuro(bruttoSalary);
|
||||
socialSecurityDisplay.textContent = displayEuro(socialSecurityTax);
|
||||
incomeTaxDisplay.textContent = displayEuro(incomeTax);
|
||||
netSalaryDisplay.textContent = displayEuro(netSalary);
|
||||
employerTaxDisplay.textContent = displayEuro(employersSocialTax);
|
||||
employerTotalCostDisplay.textContent = displayEuro(employersTotalCost);
|
||||
}
|
||||
const calculateSocialInsuranceAmount = (bruttoSalary) => {
|
||||
if (isNaN(bruttoSalary))
|
||||
return 0.00;
|
||||
return Math.min(bruttoSalary * socialInsurancePercent, yearlySalaryLimit_2 / 12 * (socialInsurancePercent - halfPercent) + (bruttoSalary * halfPercent))
|
||||
}
|
||||
const calculateIncomeTax = (bruttoSalary, socialInsuranceAmount, extraDiscount = 0, dependentCount = 0, taxBookSubmitted = true) => {
|
||||
const taxRelief = taxBookSubmitted ? dependentCount * dependentsDiscount : 0,
|
||||
actualTaxFreeAmount = (!taxBookSubmitted ? 0 : (bruttoSalary > maxTaxable ? minTaxFree : (bruttoSalary <= minTaxable ? maxTaxFree : (maxTaxFree - ((diffTaxFree / diffTaxable) * (bruttoSalary - minTaxable)))))),
|
||||
incomeTaxBaseLow = Math.min(yearlySalaryLimit_1 / 12, bruttoSalary),
|
||||
incomeTaxBaseMid = Math.max(Math.min(bruttoSalary - incomeTaxBaseLow, yearlySalaryLimit_2 / 12 - incomeTaxBaseLow), 0),
|
||||
incomeTaxBaseTop = Math.max(bruttoSalary - incomeTaxBaseLow - incomeTaxBaseMid, 0),
|
||||
incomeTaxLow = (incomeTaxBaseLow - socialInsuranceAmount - extraDiscount - actualTaxFreeAmount - taxRelief) * (20 / 100),
|
||||
incomeTaxMid = incomeTaxBaseMid * (23 / 100),
|
||||
incomeTaxTop = incomeTaxBaseTop * (31 / 100);
|
||||
return Math.max(incomeTaxLow + incomeTaxMid + incomeTaxTop, 0)
|
||||
}
|
||||
const calculateNetSalary = (bruttoSalary, socialInsuranceAmount, incomeTax) => {
|
||||
if (isNaN(bruttoSalary))
|
||||
return 0.00;
|
||||
return bruttoSalary - socialInsuranceAmount - incomeTax;
|
||||
}
|
||||
const calculateEmployersSocialInsuranceAmount = (bruttoSalary) => (bruttoSalary * 2359 / 10000)
|
||||
|
||||
bruttoInput.addEventListener("change", updateCalculatedNetSalary);
|
||||
dependentInput.addEventListener("change", updateCalculatedNetSalary);
|
||||
taxBookSubmittedInput.addEventListener("change", updateCalculatedNetSalary);
|
||||
extraTaxDiscountInput.addEventListener("change", updateCalculatedNetSalary);
|
||||
|
||||
// })
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user