Skip to content

Instantly share code, notes, and snippets.

@ve3

ve3/profit-calculator.html

Last active November 18, 2023 07:23
Show Gist options
  • Save ve3/7628ccddaa21421492409854bc795de5 to your computer and use it in GitHub Desktop.
Save ve3/7628ccddaa21421492409854bc795de5 to your computer and use it in GitHub Desktop.
Download ZIP
profit calculator. demo ( https://codepen.io/ve3/pen/GRzyzLJ )
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment