ve3/profit-calculator.html

## profit-calculator.html
<!DOCTYPE html>
<html lang="th">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>คำณวนกำไร</title>
        <style type="text/css">
            button,
            input[type="button"],
            input[type="submit"],
            input[type="reset"] {
                border: 1px solid #777;
                border-radius: 3px;
                display: inline-block;
                height: 25px;
                line-height: 100%;
                text-align: center;
            }


            .control-label {
                width: 60px;
            }
            @media (min-width: 500px) {
                .control-label {
                    width: 100px;
                }
            }
            @media (min-width: 700px) {
                .control-label {
                    width: 140px;
                }
            }


            .cloned-row .add-product {
                display: none;
            }
            .form-group {
                column-gap: 10px;
                display: flex;
                flex-direction: row;
                margin-bottom: 20px;
            }
            .product-row-original .remove-product {
                display: none;
            }
            .add-product,
            .remove-product {
                width: 25px;
            }
            .remove-product {
                background-color: rgb(255, 234, 218);
                border: 1px solid orangered;
            }
        </style>
    </head>
    <body>
        <form id="calculator">
            <div class="form-group product-row-original">
                <label class="control-label" for="product1">สินค้า 1</label>
                <div class="form-controls">
                    <input id="product1" class="input-product-price" type="number" name="product-price[]" step="any"> บาท
                    <button class="add-product" type="button" title="เพิ่มสินค้า">+</button>
                    <button class="remove-product" type="button" title="ลบสินค้า">-</button>
                </div>
            </div>
            <div class="placeholder-after-cloned-rows"></div>
            <div class="form-group">
                <label class="control-label" for="total-products-price">ราคาสินค้ารวม</label>
                <div class="form-controls">
                    <output id="total-products-price"></output> บาท
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="profit">กำไร</label>
                <div class="form-controls">
                    <input id="profit" class="input-product-profit" type="number" name="product-profit" step="any"> %
                </div>
            </div>
            <div class="form-group row-buttons">
                <div class="form-controls">
                    <button type="submit">คำณวน</button>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="result">เป็นเงิน</label>
                <div class="form-controls">
                    <output id="result"></output> บาท
                </div>
            </div>
        </form>
        <p><a href="https://pantip.com/topic/34489855" target="pantip">อ้างอิง</a></p>

        <!-- download bignumber.js https://github.com/MikeMcl/bignumber.js -->
        <script src="assets/js/bignumber.js"></script>
        <script>
            let latestRowNum = 1;


            function calculate() {
                const totalProdsPrice = document.getElementById('total-products-price');
                const result = document.getElementById('result');
                let productsPrice = new BigNumber(0);
                document.querySelectorAll('.input-product-price').forEach((item) => {
                    const prodPrice = new BigNumber(item.value);
                    if (!prodPrice.isNaN()) {
                        productsPrice = productsPrice.plus(prodPrice);
                    }
                });
                console.debug('total products price: ' + productsPrice.toString());
                totalProdsPrice.value = productsPrice;

                const profitInput = document.getElementById('profit');
                const profitValue = new BigNumber(profitInput.value);
                let profitPercent = 0;
                if (!profitValue.isNaN()) {
                    profitPercent = profitValue.dividedBy(100);
                }
                console.debug('profit percent: ' + profitPercent);

                // ต้นทุน
                const costPercent = new BigNumber(1).minus(profitPercent);
                console.debug('cost percent: ' + costPercent);

                const totalPrice = productsPrice.dividedBy(costPercent);
                console.debug('total price: ' + totalPrice);
                result.value = totalPrice;
            }// calculate


            function listenClickAddProduct() {
                document.addEventListener('click', (event) => {
                    let thisTarget = event.target;
                    if (thisTarget.closest('button')) {
                        thisTarget = thisTarget.closest('button');
                    }

                    if (thisTarget.classList.contains('add-product') && thisTarget.closest('.product-row-original')) {
                        // if correctly clicked on original product row.
                        event.preventDefault();
                        const prodRowOrig = thisTarget.closest('.product-row-original');
                        const clonedProdRow = prodRowOrig.cloneNode(true);

                        clonedProdRow.classList.remove('product-row-original');
                        clonedProdRow.classList.add('cloned-row');
                        latestRowNum = parseInt(latestRowNum) + 1;
                        const clonedProdRowString = clonedProdRow.outerHTML.replaceAll('1', latestRowNum);
                        const placeholderRow = document.querySelector('.placeholder-after-cloned-rows');

                        placeholderRow.insertAdjacentHTML('beforebegin', clonedProdRowString);
                    }
                });
            }// listenClickAddProduct


            function listenClickRemoveProduct() {
                document.addEventListener('click', (event) => {
                    let thisTarget = event.target;
                    if (thisTarget.closest('button')) {
                        thisTarget = thisTarget.closest('button');
                    }

                    if (thisTarget.classList.contains('remove-product') && thisTarget.closest('.cloned-row')) {
                        // if correctly clicked on original product row.
                        event.preventDefault();
                        thisTarget.closest('.cloned-row').remove();
                        calculate();
                    }
                });
            }// listenClickRemoveProduct


            document.addEventListener('DOMContentLoaded', () => {
                const formCalculator = document.getElementById('calculator');
                formCalculator.reset();// fix firefox form cache.
                listenClickAddProduct();
                listenClickRemoveProduct();

                formCalculator.addEventListener('submit', (event) => {
                    event.preventDefault();
                    calculate();
                });
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="th">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>คำณวนกำไร</title>
	<style type="text/css">
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
	border: 1px solid #777;
	border-radius: 3px;
	display: inline-block;
	height: 25px;
	line-height: 100%;
	text-align: center;
	}


	.control-label {
	width: 60px;
	}
	@media (min-width: 500px) {
	.control-label {
	width: 100px;
	}
	}
	@media (min-width: 700px) {
	.control-label {
	width: 140px;
	}
	}


	.cloned-row .add-product {
	display: none;
	}
	.form-group {
	column-gap: 10px;
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	}
	.product-row-original .remove-product {
	display: none;
	}
	.add-product,
	.remove-product {
	width: 25px;
	}
	.remove-product {
	background-color: rgb(255, 234, 218);
	border: 1px solid orangered;
	}
	</style>
	</head>
	<body>
	<form id="calculator">
	<div class="form-group product-row-original">
	<label class="control-label" for="product1">สินค้า 1</label>
	<div class="form-controls">
	<input id="product1" class="input-product-price" type="number" name="product-price[]" step="any"> บาท
	<button class="add-product" type="button" title="เพิ่มสินค้า">+</button>
	<button class="remove-product" type="button" title="ลบสินค้า">-</button>
	</div>
	</div>
	<div class="placeholder-after-cloned-rows"></div>
	<div class="form-group">
	<label class="control-label" for="total-products-price">ราคาสินค้ารวม</label>
	<div class="form-controls">
	<output id="total-products-price"></output> บาท
	</div>
	</div>
	<div class="form-group">
	<label class="control-label" for="profit">กำไร</label>
	<div class="form-controls">
	<input id="profit" class="input-product-profit" type="number" name="product-profit" step="any"> %
	</div>
	</div>
	<div class="form-group row-buttons">
	<div class="form-controls">
	<button type="submit">คำณวน</button>
	</div>
	</div>
	<div class="form-group">
	<label class="control-label" for="result">เป็นเงิน</label>
	<div class="form-controls">
	<output id="result"></output> บาท
	</div>
	</div>
	</form>
	<p><a href="https://pantip.com/topic/34489855" target="pantip">อ้างอิง</a></p>

	<!-- download bignumber.js https://github.com/MikeMcl/bignumber.js -->
	<script src="assets/js/bignumber.js"></script>
	<script>
	let latestRowNum = 1;


	function calculate() {
	const totalProdsPrice = document.getElementById('total-products-price');
	const result = document.getElementById('result');
	let productsPrice = new BigNumber(0);
	document.querySelectorAll('.input-product-price').forEach((item) => {
	const prodPrice = new BigNumber(item.value);
	if (!prodPrice.isNaN()) {
	productsPrice = productsPrice.plus(prodPrice);
	}
	});
	console.debug('total products price: ' + productsPrice.toString());
	totalProdsPrice.value = productsPrice;

	const profitInput = document.getElementById('profit');
	const profitValue = new BigNumber(profitInput.value);
	let profitPercent = 0;
	if (!profitValue.isNaN()) {
	profitPercent = profitValue.dividedBy(100);
	}
	console.debug('profit percent: ' + profitPercent);

	// ต้นทุน
	const costPercent = new BigNumber(1).minus(profitPercent);
	console.debug('cost percent: ' + costPercent);

	const totalPrice = productsPrice.dividedBy(costPercent);
	console.debug('total price: ' + totalPrice);
	result.value = totalPrice;
	}// calculate


	function listenClickAddProduct() {
	document.addEventListener('click', (event) => {
	let thisTarget = event.target;
	if (thisTarget.closest('button')) {
	thisTarget = thisTarget.closest('button');
	}

	if (thisTarget.classList.contains('add-product') && thisTarget.closest('.product-row-original')) {
	// if correctly clicked on original product row.
	event.preventDefault();
	const prodRowOrig = thisTarget.closest('.product-row-original');
	const clonedProdRow = prodRowOrig.cloneNode(true);

	clonedProdRow.classList.remove('product-row-original');
	clonedProdRow.classList.add('cloned-row');
	latestRowNum = parseInt(latestRowNum) + 1;
	const clonedProdRowString = clonedProdRow.outerHTML.replaceAll('1', latestRowNum);
	const placeholderRow = document.querySelector('.placeholder-after-cloned-rows');

	placeholderRow.insertAdjacentHTML('beforebegin', clonedProdRowString);
	}
	});
	}// listenClickAddProduct


	function listenClickRemoveProduct() {
	document.addEventListener('click', (event) => {
	let thisTarget = event.target;
	if (thisTarget.closest('button')) {
	thisTarget = thisTarget.closest('button');
	}

	if (thisTarget.classList.contains('remove-product') && thisTarget.closest('.cloned-row')) {
	// if correctly clicked on original product row.
	event.preventDefault();
	thisTarget.closest('.cloned-row').remove();
	calculate();
	}
	});
	}// listenClickRemoveProduct


	document.addEventListener('DOMContentLoaded', () => {
	const formCalculator = document.getElementById('calculator');
	formCalculator.reset();// fix firefox form cache.
	listenClickAddProduct();
	listenClickRemoveProduct();

	formCalculator.addEventListener('submit', (event) => {
	event.preventDefault();
	calculate();
	});
	});
	</script>
	</body>
	</html>