<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
.calculator {
max-width: 200px;
margin: 0px auto 0px;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.total_amount {
font-size: 1.5em;
margin: 20px auto 20px;
color: #946FF2;
}
.sum {
margin-top: 8px;
}
.sum>.number,
.sum>.sum {
margin-left: 15px;
}
</style>
</head>
<body>
<div class="sum calculator">
<div class="total total_amount">
<span class="value"></span>
</div>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">3 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">5 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">4 000</span>
<input type="checkbox" checked="checked">
</label>
<div class="sum">
<label class="total">
<span class="value"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">1 500</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="value">7 500</span>
<input type="checkbox" checked="checked">
</label>
</div>
</div>
</div>
<script>
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
const getValue = (elem) => {
if (elem.classList.contains('number')) {
return elem.querySelector('input').checked
? +elem.querySelector('.value').textContent.replace(/\s/g, '')
: 0
} else if (elem.classList.contains('sum')) {
sum(elem);
const total = elem.querySelector(':scope>.total');
return total.querySelector('input').checked
? +total.querySelector('.value').textContent.replace(/\s/g, '')
: 0
}
}
const sum = (elem) => {
const total = elem.querySelector('.total');
const sumElems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const s = sumElems.reduce((a, el) => a + getValue(el), 0);
total.querySelector('.value').textContent = digits(s);
}
const setCheckedSum = (elem, checked) => {
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
if (total) {
total.querySelector('input').checked = checked;
}
elems.forEach (el => {
if (el.classList.contains('number')) {
el.querySelector('input').checked = checked;
} else if (el.classList.contains('sum')) {
setCheckedSum(el, checked);
}
})
}
const testChecked = (elem) => {
if (elem.classList.contains('number'))
return elem.querySelector('input').checked;
const total = elem.querySelector('.total');
const elems = [...elem.querySelectorAll(':scope>.sum,:scope>.number')];
const checked = elems.reduce ((ch, el) => testChecked(el) || ch, false)
const input = total.querySelector('input');
if (input) input.checked = checked;
return checked;
}
const calculator = document.querySelector('.calculator');
sum(calculator);
calculator.addEventListener('change', ev => {
const {target} = ev;
const el = target.closest('.total');
if (el) {
const sum = el.closest('.sum');
setCheckedSum(sum, target.checked);
} else {
testChecked(calculator);
}
sum(calculator);
})
</script>
</body>
</html>