git-willie · November 23, 2020 05:21
diff --git a/convertToShoppingList.html b/convertToShoppingList.html
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Convert UL > LI into a custom shopping list</title>
 </head>
 <body>
 	<h2>Please select total 6 items</h2>

 	<ul id="choices-list" data-max-choices="6">
 		<li>Apple</li>
 		<li>Chocolate</li>
 		<li>Lime</li>
 		<li>Mint</li>
 	</ul>
 	
 	<div>Total selected: <span id="choices-total">0</span></div>
 	<small id="warning-message"></small>
 	

 	<form action="">
 		<textarea id="output" name="properties['Item Choices']"></textarea>
 		<button id="add" style="display: none;">Add to Cart</button>
 	</form>

 	<button id="edit" style="display: none;">Edit my choices</button>

 	<script type="text/javascript">
 		const choicesUL = document.getElementById('choices-list');
 		const choicesList = choicesUL.querySelectorAll('li');
 		const maxChoices = choicesUL.getAttribute('data-max-choices');
 		const choicesTotal = document.getElementById('choices-total');
 		const output = document.getElementById('output');
 		const atcButton = document.getElementById('add');
 		const editButton = document.getElementById('edit');
 		const warningMessage = document.getElementById('warning-message');

 		// Create the input and insert into <li></li>
 		choicesList.forEach((choice, index) => {
 			const qtyInput = document.createElement('input');
 			qtyInput.type = 'number';
 			qtyInput.name = choice.innerText;
 			qtyInput.value = 0;
 			qtyInput.min = 0;
 			qtyInput.max = maxChoices;

 			choice.prepend(qtyInput);

 			qtyInput.addEventListener('input', event => {
 				validateQty();
 			});
 		});
 		
 		// Caclulate the total number of items selected
 		let validateQty = () => {
 			const qtyBoxes = document.querySelectorAll('input[type="number"]');
 			let qtyTotal = 0;

 			qtyBoxes.forEach((input, index) => {
 				qtyTotal += Number(input.value);				
 			});

 			if (qtyTotal < maxChoices) {
 				atcButton.style.display = "none";
 				editButton.style.display = "none";
 				warningMessage.innerHTML = '';
 			} else {
 				editButton.style.display = "block";

 				// Disable all num input
 				qtyBoxes.forEach((input, index) => {
 					input.disabled = true;
 				});

 				if (qtyTotal == maxChoices) {
 					atcButton.style.display = "block";
 				}

 				warningMessage.innerHTML = "--- Max " + maxChoices + " items is reached! ---";
 			}

 			choicesTotal.innerHTML = qtyTotal;
 			
 		}

 		editButton.addEventListener('click', event => {
 			const qtyBoxes = document.querySelectorAll('input[type="number"]');

 			// Re-enable all num input
 			qtyBoxes.forEach((input, index) => {
 				input.disabled = false;
 				atcButton.style.display = "none";
 				editButton.style.display = "none";
 			});			
 		});

 		// Format the choices into a textarea for form submit
 		atcButton.addEventListener('click', event => {
 			event.preventDefault();
 			let choices = [];

 			choicesList.forEach((choice, index) => {
 				let choiceLabel = choice.innerText;
 				let choiceQty = choice.querySelector('input').value;

 				if (choiceQty != 0) {
 					let choiceDetail = {
 						label: choiceLabel,
 						qty: choiceQty
 					};
 					choices.push(choiceDetail);
 				}
 			});

 			output.innerHTML = Array.prototype.map.call(choices, choice => choice.label + ' x ' + choice.qty + '\n').join('');
 		});

 	</script>
 </body>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Convert UL > LI into a custom shopping list</title>
	</head>
	<body>
	<h2>Please select total 6 items</h2>

	<ul id="choices-list" data-max-choices="6">
	<li>Apple</li>
	<li>Chocolate</li>
	<li>Lime</li>
	<li>Mint</li>
	</ul>

	<div>Total selected: <span id="choices-total">0</span></div>
	<small id="warning-message"></small>


	<form action="">
	<textarea id="output" name="properties['Item Choices']"></textarea>
	<button id="add" style="display: none;">Add to Cart</button>
	</form>

	<button id="edit" style="display: none;">Edit my choices</button>

	<script type="text/javascript">
	const choicesUL = document.getElementById('choices-list');
	const choicesList = choicesUL.querySelectorAll('li');
	const maxChoices = choicesUL.getAttribute('data-max-choices');
	const choicesTotal = document.getElementById('choices-total');
	const output = document.getElementById('output');
	const atcButton = document.getElementById('add');
	const editButton = document.getElementById('edit');
	const warningMessage = document.getElementById('warning-message');

	// Create the input and insert into <li></li>
	choicesList.forEach((choice, index) => {
	const qtyInput = document.createElement('input');
	qtyInput.type = 'number';
	qtyInput.name = choice.innerText;
	qtyInput.value = 0;
	qtyInput.min = 0;
	qtyInput.max = maxChoices;

	choice.prepend(qtyInput);

	qtyInput.addEventListener('input', event => {
	validateQty();
	});
	});

	// Caclulate the total number of items selected
	let validateQty = () => {
	const qtyBoxes = document.querySelectorAll('input[type="number"]');
	let qtyTotal = 0;

	qtyBoxes.forEach((input, index) => {
	qtyTotal += Number(input.value);
	});

	if (qtyTotal < maxChoices) {
	atcButton.style.display = "none";
	editButton.style.display = "none";
	warningMessage.innerHTML = '';
	} else {
	editButton.style.display = "block";

	// Disable all num input
	qtyBoxes.forEach((input, index) => {
	input.disabled = true;
	});

	if (qtyTotal == maxChoices) {
	atcButton.style.display = "block";
	}

	warningMessage.innerHTML = "--- Max " + maxChoices + " items is reached! ---";
	}

	choicesTotal.innerHTML = qtyTotal;

	}

	editButton.addEventListener('click', event => {
	const qtyBoxes = document.querySelectorAll('input[type="number"]');

	// Re-enable all num input
	qtyBoxes.forEach((input, index) => {
	input.disabled = false;
	atcButton.style.display = "none";
	editButton.style.display = "none";
	});
	});

	// Format the choices into a textarea for form submit
	atcButton.addEventListener('click', event => {
	event.preventDefault();
	let choices = [];

	choicesList.forEach((choice, index) => {
	let choiceLabel = choice.innerText;
	let choiceQty = choice.querySelector('input').value;

	if (choiceQty != 0) {
	let choiceDetail = {
	label: choiceLabel,
	qty: choiceQty
	};
	choices.push(choiceDetail);
	}
	});

	output.innerHTML = Array.prototype.map.call(choices, choice => choice.label + ' x ' + choice.qty + '\n').join('');
	});

	</script>
	</body>