食品ロス削減アプリ

商品番号と消費期限を入力してください。
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>食品ロス削減アプリ</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #F5F5F5;
		}
		.container {
			margin: auto;
			max-width: 600px;
			padding: 20px;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
			border-radius: 5px;
			text-align: center;
		}
		h1 {
			margin-top: 0;
			font-size: 30px;
			color: #333333;
		}
		form {
			margin-top: 20px;
			text-align: left;
		}
		label {
			display: block;
			font-size: 20px;
			margin-bottom: 10px;
			color: #333333;
		}
		input[type="text"], input[type="number"] {
			padding: 5px;
			font-size: 16px;
			border-radius: 5px;
			border: none;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
		}

		button[type="submit"] {
			background-color: #4CAF50;
			color: #FFFFFF;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			font-size: 20px;
			cursor: pointer;
		}
		button[type="submit"]:hover {
			background-color: #3E8E41;
		}
		p {
			color: #333333;
			font-size: 16px;
			margin-bottom: 5px;
		}
		.discount {
			background-color: #FFFFCC;
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 20px;
		}
	</style>

</head>
<body>
	<div class="container">
		<h1>食品ロス削減アプリ</h1>
		<p>商品番号と消費期限を入力してください。</p>
		<form id="form-discount" onsubmit="return false;">
			<label for="number">商品番号：</label>
			<input type="text" id="number" placeholder="商品番号を入力してください" required>

			<label for="expiry-date">消費期限：</label>
			<input type="date" id="expiry-date" required>
			<button type="submit" id="btn-discount">割引を受ける</button>
		</form>
		<div id="result-discount"></div>
	</div>

	<script>

		function checkDate(expiryDate) {
			//消費期限チェック
			var currentDate = new Date();
			var expDate = new Date(expiryDate);

			//消費期限が近い場合は割引あり
			if (expDate < currentDate) {
				return "消費期限が切れています。";
			} else if (expDate - currentDate <= 1000 * 60 * 60 * 24 * 7) {
				return "この商品は20%OFFで販売中です！"
			} else {
				return "この商品は割引対象外です。"
			}
		}

		//ボタンクリック時の処理
		document.getElementById("btn-discount").addEventListener("click", function(){

			//商品番号と消費期限の値を取得
			var number = document.getElementById("number").value;
			var expiryDate = document.getElementById("expiry-date").value;

			//有効な値を受け取った場合
			if (number && expiryDate) {
				//消費期限チェック
				var msg = checkDate(expiryDate);

				//結果を表示
				document.getElementById("result-discount").innerHTML = "<div class='discount'><p>商品番号 " + number + "</p><p>" + msg + "</p></div>";
			}
		});
	</script>
</body>
</html>