const TAX_RATE = 0.15;
const netInput = document.querySelector("[data-amount-net]");
const taxInput = document.querySelector("[data-amount-tax]");
const grossInput = document.querySelector("[data-amount-gross]");
const SourceAmountField = Object.freeze({
NET: "net",
GROSS: "gross",
});
let sourceAmountField = SourceAmountField.NET;
function calculateTaxFromNet(netAmount) {
return netAmount * TAX_RATE;
}
function calculateTaxFromGross(grossAmount) {
return grossAmount * (TAX_RATE / (1 + TAX_RATE));
}
netInput.addEventListener("input", () => {
sourceAmountField = SourceAmountField.NET;
const netAmount = Number.parseFloat(netInput.value);
if (Number.isNaN(netAmount)) {
taxInput.value = "";
grossInput.value = "";
return;
}
const taxAmount = calculateTaxFromNet(netAmount);
const grossAmount = netAmount + taxAmount;
taxInput.value = taxAmount.toFixed(2);
grossInput.value = grossAmount.toFixed(2);
});
grossInput.addEventListener("input", () => {
sourceAmountField = SourceAmountField.GROSS;
const grossAmount = Number.parseFloat(grossInput.value);
if (Number.isNaN(grossAmount)) {
netInput.value = "";
taxInput.value = "";
return;
}
const taxAmount = calculateTaxFromGross(grossAmount);
const netAmount = grossAmount - taxAmount;
taxInput.value = taxAmount.toFixed(2);
netInput.value = netAmount.toFixed(2);
});
taxInput.addEventListener("input", () => {
const taxAmount = Number.parseFloat(taxInput.value);
if (Number.isNaN(taxAmount)) {
if (sourceAmountField === SourceAmountField.NET) {
grossInput.value = "";
} else {
netInput.value = "";
}
return;
}
if (sourceAmountField === SourceAmountField.NET) {
const netAmount = Number.parseFloat(netInput.value);
if (Number.isNaN(netAmount)) {
grossInput.value = "";
return;
}
const grossAmount = netAmount + taxAmount;
grossInput.value = grossAmount.toFixed(2);
return;
}
const grossAmount = Number.parseFloat(grossInput.value);
if (Number.isNaN(grossAmount)) {
netInput.value = "";
return;
}
const netAmount = grossAmount - taxAmount;
netInput.value = netAmount.toFixed(2);
});
// Math
const TAX_RATE = 0.15;
function calculateTaxFromNet(netAmount){
return netAmount * TAX_RATE;
}
function calculateTaxFromGross(grossAmount){
return grossAmount * (TAX_RATE / (1 + TAX_RATE));
}
// States
const netInput = document.querySelector("[data-amount-net]");
const taxInput = document.querySelector("[data-amount-tax]");
const grossInput = document.querySelector("[data-amount-gross]");
const SourceAmountField = Object.freeze({
NET: 'net',
GROSS: 'gross'
})
let sourceAmountField = SourceAmountField.NET
function getNetAmount() {
return Number.parseFloat(netInput.value)
}
function setNetAmount(newNetAmount){
netInput.value = newNetAmount.toFixed(2)
}
function getTaxAmount() {
return Number.parseFloat(taxInput.value);
}
function setTaxAmount(newTaxAmount) {
taxInput.value = newTaxAmount.toFixed(2);
}
function getGrossAmount() {
return Number.parseFloat(grossInput.value);
}
function setGrossAmount(newGrossAmount) {
grossInput.value = newGrossAmount.toFixed(2);
}
// input changes
function handleNetAmountChange(){
sourceAmountField = SourceAmountField.NET
const netAmount = getNetAmount()
const newTaxAmount = calculateTaxFromNet(netAmount)
const newGrossAmount = netAmount + newTaxAmount
setTaxAmount(newTaxAmount)
setGrossAmount(newGrossAmount)
}
function handleGrossAmountChange(){
sourceAmountField = SourceAmountField.GROSS
const grossAmount = getGrossAmount()
const newTaxAmount = calculateTaxFromGross(grossAmount)
const newNetAmount = grossAmount - newTaxAmount
setTaxAmount(newTaxAmount)
setNetAmount(newNetAmount)
}
function handleTaxAmountChange() {
if (sourceAmountField === SourceAmountField.NET) {
const netAmount = getNetAmount()
const taxAmount = getTaxAmount()
const newGrossAmount = netAmount + taxAmount
setGrossAmount(newGrossAmount)
}
if (sourceAmountField === SourceAmountField.GROSS) {
const grossAmount = getGrossAmount()
const taxAmount = getTaxAmount()
const newNetAmount = grossAmount - taxAmount
setNetAmount(newNetAmount)
}
}
// attach listeners
netInput.addEventListener("input", handleNetAmountChange);
grossInput.addEventListener("input", handleGrossAmountChange);
taxInput.addEventListener("input", handleTaxAmountChange);