fixed nutrition calculations

index.html

@@ -40,18 +40,16 @@
 						<th>Energie</th>
 						<th>Fett</th>
 						<th>Kohlenhydrate</th>
+						<th>Zucker</th>
 						<th>Eiweiß</th>
+						<th>Alkohol</th>
 						<th></th>
 					</tr>
-					<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
-					<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
 				</thead>
 				<tbody id="food-menu">
 					
 				</tbody>
 				<tfoot>
-					<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
-					<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 					<tr>
 						<td>Gesamt</td>
 						<td></td>
@@ -60,7 +58,9 @@
 						<td id="summary-energy"></td>
 						<td id="summary-fat"></td>
 						<td id="summary-carbs"></td>
+						<td id="summary-sugar"></td>
 						<td id="summary-proteins"></td>
+						<td id="summary-alc"></td>
 						<td></td>
 					</tr>
 				</tfoot>

main.js

@@ -6,8 +6,11 @@ const menuTable = document.querySelector("#menu-table");
 const summaryEnergy = document.querySelector("#summary-energy");
 const summaryFat = document.querySelector("#summary-fat");
 const summaryCarbs = document.querySelector("#summary-carbs");
+const summarySugar = document.querySelector("#summary-sugar");
 const summaryProteins = document.querySelector("#summary-proteins");
+const summaryAlc = document.querySelector("#summary-alc");
 
+const alcDensity = 0.789;
 
 updateSummary();
 initFoodList();
@@ -101,41 +104,41 @@ async function addMenuItem(food) {
 	const kcalAmount = node.querySelector(".menu-item-energy");
 	const fatAmount = node.querySelector(".menu-item-fat");
 	const carbsAmount = node.querySelector(".menu-item-carbs");
+	const sugarAmount = node.querySelector(".menu-item-sugar");
 	const proteinsAmount = node.querySelector(".menu-item-proteins");
+	const alcAmount = node.querySelector(".menu-item-alc");
 	const score = node.querySelector(".menu-item-score");
 
+	const nutritions100 = calculateKcal(food, 100);
+
 	nodeRoot.setAttribute("data-food-name", food.name);
 
 	itemName.textContent = food.name;
-	itemKcal.textContent = `${food.kcal} kcal/100${food.unit}`;
+	itemKcal.textContent = `${nutritions100.kcal} kcal/100${food.unit}`;
 	itemUnit.textContent = food.unit;
 
 	fatAmount.textContent = `${food.fat}g`;
 	carbsAmount.textContent = `${food.carbs}g`;
 	proteinsAmount.textContent = `${food.proteins}g`;
 
-	score.textContent = food.density.toFixed(1);
+	score.textContent = nutritions100.score.toFixed(1);
-	score.classList.add(getScoreColor(food.density, food.unit));
+	score.classList.add(getScoreColor(nutritions100.score, food.unit));
 
 	node.querySelector(".delete-menu-item").addEventListener("click", () => {
 		foodMenu.removeChild(nodeRoot);
 		updateSummary();
 	});
 
-	const updateKcalAmount = () => {
+	const updateFoodValues = () => {
 		if (!/^[0-9]+$/.test(itemAmount.value)) {
 			return;
 		}
 
 		const amount = parseInt(itemAmount.value);
-		kcalAmount.textContent = `${parseInt(Math.round(food.kcal / 100 * amount))}kcal`;
+		updateFoodAmount(food, amount, kcalAmount, fatAmount, carbsAmount, sugarAmount, proteinsAmount, alcAmount);
-		fatAmount.textContent = `${parseInt(Math.round(food.fat / 100 * amount))}g`;
-		carbsAmount.textContent = `${parseInt(Math.round(food.carbs / 100 * amount))}g`;
-		proteinsAmount.textContent = `${parseInt(Math.round(food.proteins / 100 * amount))}g`;
-		updateSummary();
 	};
 
-	const evaluateKcalAmount = () => {
+	const evaluateFoodValues = () => {
 		if (/^[0-9]+$/.test(itemAmount.value)) {
 			return;
 		}
@@ -145,23 +148,42 @@ async function addMenuItem(food) {
 		evaluator.onmessage = e => {
 			const amount = Math.max(parseInt(e.data), 0);
 			itemAmount.value = amount;
-			kcalAmount.textContent = `${parseInt(Math.round(food.kcal / 100 * amount))}kcal`;
+			updateFoodAmount(food, amount, kcalAmount, fatAmount, carbsAmount, sugarAmount, proteinsAmount, alcAmount);
-			fatAmount.textContent = `${parseInt(Math.round(food.fat / 100 * amount))}g`;
-			carbsAmount.textContent = `${parseInt(Math.round(food.carbs / 100 * amount))}g`;
-			proteinsAmount.textContent = `${parseInt(Math.round(food.proteins / 100 * amount))}g`;
-			updateSummary();
 		};
 	}
 
 	itemAmount.value = food.avg_amount ?? 100;
-	itemAmount.addEventListener("input", updateKcalAmount);
+	itemAmount.addEventListener("input", updateFoodValues);
-	itemAmount.addEventListener("change", evaluateKcalAmount);
+	itemAmount.addEventListener("change", evaluateFoodValues);
 
-	updateKcalAmount();
 	foodMenu.appendChild(node);
+	updateFoodValues();
+}
+
+function updateFoodAmount(food, amount, kcalAmount, fatAmount, carbsAmount, sugarAmount, proteinsAmount, alcAmount) {
+	const {fat, carbs, sugar, proteins, alc, kcal} = calculateKcal(food, amount);
+
+	kcalAmount.textContent = `${parseInt(kcal)}kcal`;
+	fatAmount.textContent = `${parseInt(fat)}g`;
+	carbsAmount.textContent = `${parseInt(carbs)}g`;
+	sugarAmount.textContent = `${parseInt(sugar)}g`;
+	proteinsAmount.textContent = `${parseInt(proteins)}g`;
+	alcAmount.textContent = `${parseInt(alc)}g`;
+	console.log(`${food.name} has ${food.kcal}kcal/100${food.unit}`)
 	updateSummary();
 }
 
+function calculateKcal(food, amount) {
+	const fat = Math.round(food.fat / 100 * amount)
+	const carbs = Math.round(food.carbs / 100 * amount);
+	const sugar = Math.round(food.sugar / 100 * amount);
+	const proteins = Math.round(food.proteins / 100 * amount);
+	const alc = Math.round(amount * food.alc / 100);
+	const kcal = Math.round(fat * 9 + carbs * 4 + proteins * 4 + alc * 7);
+	const score = kcal / amount;
+	return {fat, carbs, sugar, proteins, alc, kcal, score}
+}
+
 function updateSummary() {
 	const menuItems = foodMenu.querySelectorAll(".menu-item");
 	menuTable.style.display = menuItems.length > 0 ? "table" : "none";
@@ -169,19 +191,25 @@ function updateSummary() {
 	let energy = 0;
 	let fat = 0;
 	let carbs = 0;
+	let sugar = 0;
 	let proteins = 0;
+	let alc = 0;
 
 	for (let menuItem of menuItems) {
 		energy += parseInt(menuItem.querySelector(".menu-item-energy").textContent);
 		fat += parseInt(menuItem.querySelector(".menu-item-fat").textContent);
 		carbs += parseInt(menuItem.querySelector(".menu-item-carbs").textContent);
+		sugar += parseInt(menuItem.querySelector(".menu-item-sugar").textContent);
 		proteins += parseInt(menuItem.querySelector(".menu-item-proteins").textContent);
+		alc += parseInt(menuItem.querySelector(".menu-item-alc").textContent);
 	}
 
 	summaryEnergy.textContent = `${energy}kcal`;
 	summaryFat.textContent = `${fat}g`;
 	summaryCarbs.textContent = `${carbs}g`;
+	summarySugar.textContent = `${sugar}g`;
 	summaryProteins.textContent = `${proteins}g`;
+	summaryAlc.textContent = `${alc}g`;
 }
 
 function getScoreColor(density, unit) {
@@ -189,7 +217,7 @@ function getScoreColor(density, unit) {
 		case "g": {
 			if (density >= 2.4) {
 				return "red"
-			} else if (density >= 1.7) {
+			} else if (density >= 1.6) {
 				return "orange"
 			} else {
 				return "green";
@@ -197,7 +225,7 @@ function getScoreColor(density, unit) {
 		}
 		
 		case "ml": {
-			if (density >= 0.3) {
+			if (density >= 0.1) {
 				return "red"
 			} else {
 				return "green";

style.css

@@ -101,7 +101,11 @@ td:not(:first-child) {
 }
 
 tbody tr {
-	height: 2em;
+	height: 2.5em;
+}
+
+tbody tr:not(:last-child) {
+	border-bottom: 1px solid lightgray;
 }
 
 table {
@@ -112,18 +116,19 @@ tfoot {
 	font-weight: bold;
 }
 
-thead tr:nth-last-child(1) th,
+thead tr th {
-thead tr:nth-last-child(2) th,
+	border-bottom: 1px solid black;
-tfoot tr:nth-child(1) td,
-tfoot tr:nth-child(2) td {
-	padding: 0.25em;
 }
 
-thead tr:nth-last-child(1),
+tfoot tr td {
-tfoot tr:nth-child(2) {
 	border-top: 1px solid black;
 }
 
+thead tr th,
+tfoot tr td {
+	padding: 0.5em 0;
+}
+
 #menu-table,
 #summary {
 	width: 60em;

templates/menu-item.html

@@ -16,7 +16,11 @@
 
 		<td class="menu-item-carbs"></td>
 
+		<td class="menu-item-sugar"></td>
+
 		<td class="menu-item-proteins"></td>
+
+		<td class="menu-item-alc"></td>
 		
 		<td class="delete-menu-item"><span class="material-icons">delete</span></td>
 	</tr>