仕出し弁当見積もり計算機
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>仕出し弁当 見積り計算機（簡易版）</title>
<style>
body{font-family:system-ui,"Noto Sans JP",sans-serif;margin:20px;color:#222}
table{width:100%;border-collapse:collapse;max-width:900px}
th,td{border-bottom:1px solid #eee;padding:8px 6px;text-align:right}
th:nth-child(1),td:nth-child(1){text-align:center}
th:nth-child(2),td:nth-child(2){text-align:left}
input[type="number"]{width:80px;padding:6px}
tfoot td{font-weight:700}
</style>
</head>
<body>
<h1>仕出し弁当 見積り計算機（簡易版）</h1>
<table id="bentoTable" aria-label="お弁当一覧">
<thead>
<tr>
<th>種類</th>
<th>商品名</th>
<th>単価</th>
<th>個数</th>
<th>小計</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align:right">小計</td>
<td id="subtotal">¥0</td>
</tr>
<tr>
<td colspan="4" style="text-align:right">消費税（10%）</td>
<td id="tax">¥0</td>
</tr>
<tr>
<td colspan="4" style="text-align:right">合計（税込）</td>
<td id="grand">¥0</td>
</tr>
</tfoot>
</table>
<script>
(function(){
// ▼メニュー（A〜J／400〜750円で種類ごとに設定）
const MENU = [
{code:'A', name:'A弁当', price:400},
{code:'B', name:'B弁当', price:450},
{code:'C', name:'C弁当', price:500},
{code:'D', name:'D弁当', price:550},
{code:'E', name:'E弁当', price:600},
{code:'F', name:'F弁当', price:650},
{code:'G', name:'G弁当', price:700},
{code:'H', name:'H弁当', price:720},
{code:'I', name:'I弁当', price:730},
{code:'J', name:'J弁当', price:750},
];
const TAX_RATE = 0.10; // ←必要に応じて変更（例：8%なら 0.08）
const tbody = document.querySelector('#bentoTable tbody');
// 行を生成
MENU.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><strong>${item.code}</strong></td>
<td style="text-align:left">${item.name}</td>
<td>¥${item.price.toLocaleString('ja-JP')}</td>
<td><input type="number" min="0" step="1" value="0" class="qty" data-code="${item.code}"></td>
<td class="line">¥0</td>
`;
tbody.appendChild(tr);
});
function calc(){
let subtotal = 0;
document.querySelectorAll('.qty').forEach(input => {
const code = input.dataset.code;
const item = MENU.find(m => m.code === code);
const qty = Math.max(0, parseInt(input.value || '0', 10));
const line = item.price * qty;
subtotal += line;
input.closest('tr').querySelector('.line').textContent = '¥' + line.toLocaleString('ja-JP');
});
const tax = Math.round(subtotal * TAX_RATE);
const grand = subtotal + tax;
document.getElementById('subtotal').textContent = '¥' + subtotal.toLocaleString('ja-JP');
document.getElementById('tax').textContent = '¥' + tax.toLocaleString('ja-JP');
document.getElementById('grand').textContent = '¥' + grand.toLocaleString('ja-JP');
}
document.addEventListener('input', e => { if(e.target.classList.contains('qty')) calc(); });
calc(); // 初期描画
})();
</script>
</body>
</html>