fixed nutrition calculations

This commit is contained in:
Timon Ringwald 2022-09-09 15:25:08 +02:00
parent c76b1f523c
commit ec8c086c14
5 changed files with 69 additions and 1894 deletions

1862
data.js

File diff suppressed because it is too large Load Diff

View File

@ -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>

68
main.js
View File

@ -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.classList.add(getScoreColor(food.density, food.unit));
score.textContent = nutritions100.score.toFixed(1);
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`;
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();
updateFoodAmount(food, amount, kcalAmount, fatAmount, carbsAmount, sugarAmount, proteinsAmount, alcAmount);
};
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`;
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();
updateFoodAmount(food, amount, kcalAmount, fatAmount, carbsAmount, sugarAmount, proteinsAmount, alcAmount);
};
}
itemAmount.value = food.avg_amount ?? 100;
itemAmount.addEventListener("input", updateKcalAmount);
itemAmount.addEventListener("change", evaluateKcalAmount);
itemAmount.addEventListener("input", updateFoodValues);
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";

View File

@ -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:nth-last-child(2) th,
tfoot tr:nth-child(1) td,
tfoot tr:nth-child(2) td {
padding: 0.25em;
thead tr th {
border-bottom: 1px solid black;
}
thead tr:nth-last-child(1),
tfoot tr:nth-child(2) {
tfoot tr td {
border-top: 1px solid black;
}
thead tr th,
tfoot tr td {
padding: 0.5em 0;
}
#menu-table,
#summary {
width: 60em;

View File

@ -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>