evaluate math expressions

evaluator.js

@@ -0,0 +1 @@
+onmessage = e => postMessage(eval(`parseInt(Math.round(${e.data}))`));

main.js

@@ -113,18 +113,33 @@ async function addMenuItem(food) {
 	});
 
 	const updateKcalAmount = () => {
-		if (!/[0-9]+/.test(itemAmount.value)) {
-			console.log("no match");
+		if (!/^[0-9]+$/.test(itemAmount.value)) {
 			return;
 		}
+
 		const amount = parseInt(itemAmount.value);
 		kcalAmount.textContent = parseInt(Math.round(food.kcal / 100 * amount));
 		updateSummary();
+	};
+
+	const evaluateKcalAmount = () => {
+		if (/^[0-9]+$/.test(itemAmount.value)) {
+			return;
+		}
+
+		const evaluator = new Worker("evaluator.js");
+		evaluator.postMessage(itemAmount.value);
+		evaluator.onmessage = e => {
+			const amount = Math.max(parseInt(e.data), 0);
+			itemAmount.value = amount;
+			kcalAmount.textContent = parseInt(Math.round(food.kcal / 100 * amount));
+			updateSummary();
+		};
 	}
 
-	console.log(food.avg_amount);
 	itemAmount.value = food.avg_amount ?? 100;
 	itemAmount.addEventListener("input", updateKcalAmount);
+	itemAmount.addEventListener("change", evaluateKcalAmount);
 
 	updateKcalAmount();
 	foodMenu.appendChild(node);
@@ -132,6 +147,7 @@ async function addMenuItem(food) {
 }
 
 function updateSummary() {
+	console.log("asd");
 	let sum = 0;
 
 	for (let menuItem of foodMenu.querySelectorAll(".menu-item")) {

templates/menu-item.html

@@ -7,7 +7,7 @@
 
 		<div class="menu-item-amount-container">
 			<span class="menu-item-kcal-for-amount"></span>
-			<span class="menu-item-kcal-unit">kcal</span>/<input class="menu-item-amount" type="number" pattern="[0-9]+"><span class="menu-item-unit"></span>
+			<span class="menu-item-kcal-unit">kcal</span>/<input class="menu-item-amount" type="text" pattern="[0-9]+"><span class="menu-item-unit"></span>
 		</div>
 
 		<span class="menu-item-info-container">