codepen: https://codepen.io/strozilla/pen/abVYbrx
const compensationRates = {
10: { single: 171.23 },
20: { single: 338.49 },
30: {
single: 524.31,
withSpouse: 586.31,
withSpousewithoneParent: 636.31,
withSpousewithTwoParents: 686.31,
singlewithOneParent: 574.31,
singlewithTwoParents: 624.331,
singlewithOneChild: 565.31,
withSpousewithOneChild: 632.21,
withSpousewithOneParentwithOneChild: 682.31,
withSpousewithTwoParentswithOneChild: 732.31,
singlewithOneParentwithOneChild: 615.31,
sinlgewithTwoParentswithOneChild: 665.31,
additionalChildUnder18: 31.0,
additionalChildOver18: 100.0,
aidAndAttendance: 57.0
},
40: {
single: 755.28,
withSpouse: 838.28,
withSpousewithOneParent: 904.28,
withSpousewithTwoParents: 970.28,
withOneParent: 821.28,
withTwoParents: 887.28,
withOneChild: 810.28,
withSpousewithOneChild: 899.28,
withSpousewithOneParentwithOneChild: 965.28,
withSpousewithTwoParentswithOneChild: 1031.28,
withOneParentwithOneChild: 876.28,
withTwoParentswithOneChild: 942.28,
additionalChildUnder18: 41.0,
additionalChildOver18: 133.0,
aidAndAttendance: 76.0
},
50: {
single: 1075.16,
withSpouse: 1179.16,
withSpousewithOneParent: 1262.16,
withSpousewithTwoParents: 1345.16,
withOneParent: 1158.16,
withTwoParents: 1144.16,
withOneChild: 1241.16,
withSpousewithOneChild: 1255.16,
withSpousewithOneParentwithOneChild: 1338.16,
withSpousewithTwoParentswithOneChild: 1421.16,
withOneParentwithOneChild: 1227.16,
withTwoParentswithOneChild: 1310.16,
additionalChildUnder18: 51.0,
additionalChildOver18: 167.0,
aidAndAttendance: 95.0
},
60: {
single: 1361.88,
withSpouse: 1486.88,
withSpousewithOneParent: 1586.88,
withSpousewithTwoParents: 1686.88,
withOneParent: 1461.88,
withTwoParents: 1561.88,
withOneChild: 1444.88,
withSpousewithOneChild: 1577.88,
withSpousewithOneParentwithOneChild: 1677.88,
withSpousewithTwoParentswithOneChild: 1777.88,
withOneParentwithOneChild: 1544.88,
withTwoParentswithOneChild: 1644.88,
additionalChildUnder18: 62.0,
additionalChildOver18: 200.0,
aidAndAttendance: 114.0
},
70: {
single: 1716.28,
withSpouse: 1861.28,
withSpousewithOneParent: 1978.28,
withSpousewithTwoParents: 2095.28,
singlewithOneParent: 1833.28,
singlewithTwoParents: 1950.28,
singlewithOneChild: 1813.28,
withSpousewithOneChild: 1968.28,
withSpousewithOneParentwithOneChild: 2085.28,
withSpousewithTwoParentswithOneChild: 2202.28,
singlewithOneParentwithOneChild: 1930.28,
singlewithTwoParentswithOneChild: 2047.28,
additionalChildUnder18: 72.0,
additionalChildOver18: 234.0,
aidAndAttendance: 134.0
},
80: {
single: 1995.01,
withSpouse: 2161.01,
withSpousewithOneParent: 2294.01,
withSpousewithTwoParents: 2427.01,
singlewithOneParent: 2128.01,
singlewithTwoParents: 2261.01,
singleithOneChild: 2106.01,
withSpousewithOneChild: 2283.01,
withSpousewithOneParentwithOneChild: 2416.01,
withSpousewithTwoParentswithOneChild: 2549.01,
singlewithOneParentwithOneChild: 2239.01,
singlewithTwoParentswithOneChild: 2372.01,
additionalChildUnder18: 82.0,
additionalChildOver18: 267.0,
aidAndAttendance: 153.0
},
90: {
single: 2241.91,
withSpouse: 2428.91,
withSpousewithOneParent: 2578.91,
withSpousewithTwoParents: 2728.91,
singlewithOneParent: 2391.91,
singlewithTwoParents: 2541.91,
singlewithOneChild: 2366.91,
withSpousewithOneChild: 2565.91,
withSpousewithOneParentwithOneChild: 2715.91,
withSpousewithTwoParentswithOneChild: 2865.91,
singlewithOneParentwithOneChild: 2516.91,
singlewithTwoParentswithOneChild: 2666.91,
additionalChildUnder18: 93.0,
additionalChildOver18: 301.0,
aidAndAttendance: 172.0
},
100: {
single: 3737.85,
withSpouse: 3946.25,
withSpousewithOneParent: 4113.51,
withSpousewithTwoParents: 4280.77,
singlewithOneParent: 3905.11,
singlewithTwoParents: 4072.37,
singlewithOneChild: 3877.22,
withSpousewithOneChild: 4098.87,
withSpousewithoneParentwithOneChild: 4266.13,
withSpousewithTwoParentswithOneChild: 4433.39,
singlewithOneParentwithOneChild: 4044.48,
singlewithTwoParentswithOneChild: 4211.74,
additionalChildUnder18: 1033.55,
additionalChildOver18: 334.49,
aidAndAttendance: 191.14
}
}
let limb = []
let disabilities = []
let bilateralDisabilities = []
let selectedOptions = []
let selectionsDisplay
let compensation
let totalCompensation = 0
let combinedPercentage = 0
let selectedBodyPart = null
let resultSpan = document.getElementById('result')
function roundToNearest10(value) {
return Math.round(value / 10) * 10
}
function calculateCompensation() {
document.querySelectorAll('.body-part').forEach(function (bodyPart) {
bodyPart.addEventListener('click', function () {
selectedBodyPart = bodyPart.getAttribute('data-body-limb')
})
})
document.querySelectorAll('.percentage').forEach(function (button) {
button.addEventListener('click', function () {
let value = parseInt(button.value)
let selectionText = ''
if (selectedBodyPart) {
selectionText = `${selectedBodyPart} ${value}%`
limb.push(selectedBodyPart) // Add to the limb array
// Check if there are already limbs with the same data-body-part
const matchingLimb = limb.filter((l) => l === selectedBodyPart)
console.log(matchingLimb + ' matching limbs')
// If there's more than one of the same body part, it's bilateral
if (matchingLimb.length > 1) {
bilateralDisabilities = bilateralDisabilities.concat(disabilities)
disabilities.length = 0
bilateralDisabilities.push(value)
} else {
disabilities.push(value)
}
selectedBodyPart = null // Reset the selected body part after it's used
} else {
if (bilateralDisabilities.length > 1) {
selectionText = `${value}%`
bilateralDisabilities.push(value)
} else {
selectionText = `${value}%`
disabilities.push(value)
}
}
console.log(value)
console.log(disabilities + ' disabilities')
console.log(bilateralDisabilities + ' bilateral disabilities')
console.log(limb + ' limb')
addSelectionBox(selectionText)
console.log(bilateralDisabilities + ' bilateral 1')
button.classList.remove('selected')
updateTotalCompensation()
})
})
document.querySelectorAll('.optional').forEach(function (element) {
element.addEventListener('change', function () {
updateTotalCompensation()
})
})
compensation.innerHTML = '$' + totalCompensation.toFixed(2)
resultSpan.innerHTML = combinedPercentage + '%'
updateTotalCompensation()
}
function updateTotalCompensation() {
compensation = document.getElementById('compensation')
selectionsDisplay = document.getElementById('selectionsDisplay')
if (selectionsDisplay.childNodes.length === 0) {
combinedPercentage = 0
totalCompensation = 0
document.getElementById('result').innerHTML = '0%'
document.getElementById('compensation').innerHTML = '$0.00'
return
}
if (disabilities.length > 0) {
combinedPercentage =
disabilities.reduce(function (acc, cur) {
return acc * (1 - cur / 100)
}, 1) * 100
combinedPercentage = 100 - combinedPercentage
combinedPercentage = roundToNearest10(combinedPercentage)
totalCompensation = compensationRates[combinedPercentage]['single']
}
if (bilateralDisabilities.length > 0) {
var bilateralCombined =
bilateralDisabilities.reduce(function (acc, cur) {
return acc * (1 - cur / 100)
}, 1) * 100
bilateralCombined = 100 - bilateralCombined + 10
bilateralCombined = roundToNearest10(bilateralCombined)
console.log(bilateralCombined + ' bilateral combined')
totalCompensation = compensationRates[bilateralCombined]['single']
combinedPercentage = bilateralCombined
}
compensation.innerHTML = '$' + totalCompensation.toFixed(2)
document.getElementById('result').innerHTML = combinedPercentage + '%'
console.log(disabilities + ' disabilities')
console.log(bilateralCombined + ' bilateral combined')
console.log(combinedPercentage + ' bilateral 3')
console.log(totalCompensation + ' bilateral 4')
selectedOptions = []
if (selectedOptions.length > 0) {
document.querySelectorAll('.optional:checked').forEach(function (optional) {
if (optional.id !== 'none') {
selectedOptions.push(optional.id)
}
console.log(selectedOptions + ' first selected options')
})
totalCompensation =
compensationRates[combinedPercentage][selectedOptions.join('')]
compensation.innerHTML = '$' + totalCompensation.toFixed(2)
document.getElementById('result').innerHTML = combinedPercentage + '%'
console.log(combinedPercentage + ' combined percentage after bilateral')
}
// Watch dropdowns for changes
var childrenUnder18 = parseInt(
document.getElementById('childrenUnder18').value
)
var childrenOver18 = parseInt(document.getElementById('childrenOver18').value)
// Update selectedOptions array
if (childrenUnder18 > 0) {
if (!selectedOptions.includes('withOneChild')) {
selectedOptions.push('withOneChild')
totalCompensation =
compensationRates[combinedPercentage][selectedOptions.join('')]
console.log(selectedOptions + ' inside under 18')
console.log(totalCompensation + ' with one child')
}
if (childrenUnder18 > 1 && childrenOver18 === 0) {
let addChildUnder18 = childrenUnder18 - 1
console.log(addChildUnder18)
if (addChildUnder18 > 0) {
totalCompensation +=
addChildUnder18 *
compensationRates[combinedPercentage]['additionalChildUnder18']
console.log(totalCompensation + ' with addtnl Child')
}
} else if (childrenOver18 > 1 && childrenUnder18 > 0) {
totalCompensation +=
childrenUnder18 *
compensationRates[combinedPercentage]['additionalChildUnder18']
console.log(totalCompensation + ' with addtnl Child')
} else {
totalCompensation =
compensationRates[combinedPercentage][selectedOptions.join('')]
}
} else {
selectedOptions = selectedOptions.filter(
(option) => option !== 'withOneChild'
)
}
if (childrenOver18 > 0) {
if (!selectedOptions.includes('withOneChild')) {
selectedOptions.push('withOneChild')
}
if (childrenOver18 > 1 && childrenUnder18 === 0) {
let addChildOver18 = childrenOver18 - 1
if (addChildOver18 > 0) {
totalCompensation +=
addChildOver18 *
compensationRates[combinedPercentage]['additionalChildOver18']
}
} else if (childrenUnder18 > 1 && childrenOver18 > 0) {
totalCompensation +=
childrenOver18 *
compensationRates[combinedPercentage]['additionalChildOver18']
} else {
totalCompensation = compensationRates[combinedPercentage]['withOneChild']
}
} else {
selectedOptions = selectedOptions.filter(
(option) => option !== 'withOneChild'
)
}
console.log(selectedOptions + ' last options')
console.log(totalCompensation + ' total compensation')
// Update total compensation display
compensation.innerHTML = '$' + totalCompensation.toFixed(2)
document.getElementById('result').innerHTML = combinedPercentage + '%'
}
document
.getElementById('childrenUnder18')
.addEventListener('change', updateTotalCompensation)
document
.getElementById('childrenOver18')
.addEventListener('change', updateTotalCompensation)
function addSelectionBox(text) {
selectionsDisplay = document.getElementById('selectionsDisplay')
let box = document.createElement('div')
box.className = 'selection-box'
box.innerHTML = `${text} <span class="remove-box">X</span>`
selectionsDisplay.appendChild(box)
box.querySelector('.remove-box').addEventListener('click', function () {
removeSelection(text, box)
})
}
function removeSelection(text, box) {
let value
if (text.endsWith('%')) {
value = parseInt(text)
// Remove from disabilities
let index = disabilities.indexOf(value)
if (index !== -1) {
disabilities.splice(index, 1)
}
// Remove from bilateralDisabilities
index = bilateralDisabilities.indexOf(value)
if (index !== -1) {
bilateralDisabilities.splice(index, 1)
}
} else {
// Remove limb selection
const limbToRemove = text
const limbIndex = limb.indexOf(limbToRemove)
if (limbIndex !== -1) {
limb.splice(limbIndex, 1)
}
}
console.log('Updated disabilities:', disabilities)
console.log('Updated bilateral disabilities:', bilateralDisabilities)
box.remove()
// Determine if we need to switch back from bilateral to disabilities
if (limb.length > 1) {
// Check if any limb selections are still present
const allLimbSelections = limb.filter((l) => l === selectedBodyPart)
if (allLimbSelections.length <= 1) {
// Reassign bilateralDisabilities to disabilities if only one or none
disabilities = disabilities.concat(bilateralDisabilities)
bilateralDisabilities.length = 0 // Clear bilateralDisabilities array
}
}
// Recalculate combined percentage and total compensation
updateTotalCompensation()
}
function clearTotals() {
document
.querySelectorAll('input[type="checkbox"]')
.forEach(function (checkbox) {
checkbox.checked = false
let label = checkbox.closest('label')
if (label) {
label.classList.remove('checked')
}
})
document.getElementById('childrenUnder18').value = '0'
document.getElementById('childrenOver18').value = '0'
limb = []
disabilities = []
bilateralDisabilities = []
selectedOptions = []
totalCompensation = 0
combinedPercentage = 0
var selectionsDisplay = document.getElementById('selectionsDisplay')
selectionsDisplay.innerHTML = ''
compensation = document.getElementById('compensation')
compensation.innerHTML = '$' + 0.0
document.getElementById('result').innerHTML = 0 + '%'
updateTotalCompensation()
}
document.addEventListener('DOMContentLoaded', (event) => {
function handleCheckboxChange(event) {
const group = event.target.closest('div')
const checkboxes = group.querySelectorAll('.optional')
checkboxes.forEach((checkbox) => {
if (checkbox !== event.target) {
checkbox.checked = false
const otherLabel = checkbox.closest('label')
otherLabel.classList.remove('checked')
}
})
let label = event.target.closest('label')
if (event.target.checked) {
label.classList.add('checked')
} else {
label.classList.remove('checked')
}
updateTotalCompensation()
console.log(totalCompensation)
}
document.querySelectorAll('.optional').forEach((checkbox) => {
checkbox.addEventListener('change', handleCheckboxChange)
})
})
calculateCompensation()
<div class="calculator">
<h2>Veteran Disability Calculator</h2>
<div class="instructions"><span>Enter your disabilities using the buttons below.</span>
<span>If your disability is on an extremity push that proper leg or arm button then push the percentage</span></div>
<div class="body-part-sec">
<div class="top-left">
<button class="body-part arm" type="button" data-body-limb="arm">Left Arm</button>
</div>
<div class="top-right">
<button class="body-part arm" type="button" data-body-limb="arm">Right Arm</button>
</div>
<div class="bottom-left">
<button class="body-part leg" type="button" data-body-limb="leg">Left Leg</button>
</div>
<div class="bottom-right">
<button class="body-part leg" type="button" data-body-limb="leg">Right Leg</button>
</div>
</div>
<div>
<div class="selections">
<button class="percentage" value="10">10%</button>
<button class="percentage" value="20">20%</button>
<button class="percentage" value="30">30%</button>
<button class="percentage" value="40">40%</button>
<button class="percentage" value="50">50%</button>
<button class="percentage" value="60">60%</button>
<button class="percentage" value="70">70%</button>
<button class="percentage" value="80">80%</button>
<button class="percentage" value="90">90%</button>
<button class="percentage" value="100">100%</button>
</div>
</div>
<div id="selectionsDisplay" class="selections-display"></div>
<div class="options-sec">
<div class="marital-status">
<div>What is Your Marital Status?</div>
<label class="checked"><input class="optional" type="checkbox" id="single">Single</label>
<label><input class="optional" type="checkbox" id="withSpouse">Married</label>
</div>
<div class="dependent-parents">
<div>Do You Have Any Dependent Parents?</div>
<label class="checked"><input class="optional" type="checkbox" id="none">None</label>
<label><input class="optional" type="checkbox" id="withOneParent">One Parent</label>
<label><input class="optional" type="checkbox" id="withTwoParents">Two Parents</label>
</div>
</div>
<div class="dependent-children-container">
<div class="dependent-children">
<label for="childrenUnder18">Dependent Children Under 18: </label>
<select class="dependent-dropdown" id="childrenUnder18">
<option id="0" value="0">0</option>
<option id="1" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
<option id="4" value="4">4</option>
<option id="5" value="5">5</option>
<option id="6" value="6">6</option>
<option id="7" value="7">7</option>
<option id="8" value="8">8</option>
<option id="9" value="9">9</option>
<option id="10" value="10">10</option>
</select>
</div>
<div class="dependent-children">
<label for="childrenOver18">Dependent Children Over 18:</label>
<select class="dependent-dropdown" id="childrenOver18">
<option id="11" value="0">0</option>
<option id="12" value="1">1</option>
<option id="13" value="2">2</option>
<option id="14" value="3">3</option>
<option id="15" value="4">4</option>
<option id="16" value="5">5</option>
<option id="17" value="6">6</option>
<option id="18" value="7">7</option>
<option id="19" value="8">8</option>
<option id="20" value="9">9</option>
<option id="21" value="10">10</option>
</select>
</div>
</div>
<div class="estimated-total">
<div class="percent-dollar">
<div class="totals">Combined Disability: <span id="result">0%</span></div>
<div class="totals">Estimated Monthly Compensation: <span id="compensation">$0.00</span></div>
</div>
<button id="clearSelections" class="clear-btn" onclick="clearTotals()">Clear Selections</button>
</div>
</div>
I have a calculator that is supposed to give an estimated disability compensation. The calculation part is fairly straight forward, there is one calculation for just disabilities, then if you select two arms or two legs, the calculation is different.
When adding selections I seem to be getting the correct calculations, but the issue happens when I try to remove a selection. It should remove the percentage from the array and recalculate. This works if I remove a selection that is just a percentage, but if it is a limb + percentage, it does not recalculate correctly. Looking at the console, the removeSelection function is not removing those percentages from the array, which is weird because they’re only numbers in the array. So not sure why one gets removed but the other doesn’t.
Also, if you have advice on a simpler way to do this, that would be greatly appreciated. Thanks!