以下が、生産実績管理アプリの実装例です。セキュリティ対策として、evalを使用したり、他のサイトに遷移したりすることはしません。また、alertは代わりにconsole.logを使用します。アプリの名前は「生産実績管理システム」とします。
<!DOCTYPE html>
<html>
<head>
<title>生産実績管理システム</title>
</head>
<body>
<h1>生産実績管理システム</h1>
<div>
<label for="product-name">製品名：</label>
<input type="text" id="product-name">
</div>
<div>
<label for="production-quantity">生産数量：</label>
<input type="number" id="production-quantity">
</div>
<button onclick="addProduction()">生産を登録する</button>
<h2>生産実績一覧</h2>
<table>
<thead>
<tr>
<th>製品名</th>
<th>生産数量</th>
</tr>
</thead>
<tbody id="production-list"></tbody>
</table>
<script>
// 生産実績を保持する配列
let productionList = [];
// 生産を登録する関数
function addProduction() {
// 入力されたデータを取得する
let productName = document.querySelector('#product-name').value;
let productionQuantity = document.querySelector('#production-quantity').value;
// 入力データが空の場合は処理を中断する
if (productName.trim() === '' || productionQuantity.trim() === '') {
console.log('製品名と生産数量を入力してください。');
return;
}
// 入力データを配列に追加する
productionList.push({
productName: productName,
productionQuantity: productionQuantity
});
// 一覧に追加する
let productionListElement = document.querySelector('#production-list');
let newRow = productionListElement.insertRow();
let newCell1 = newRow.insertCell();
let newCell2 = newRow.insertCell();
newCell1.innerHTML = productName;
newCell2.innerHTML = productionQuantity;
console.log('生産が登録されました。');
}
</script>
</body>
</html>
ジョークとして、生産実績を管理するというテーマから、次のようなコメントを加えることもできます。
<!-- 生産実績管理システム：あなたのものづくり支援！ but, お前もう生産しすぎ！？ -->
