fixed nutrition calculations
This commit is contained in:
Timon Ringwald
parent
c76b1f523c
commit
ec8c086c14
@ -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
68
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.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";
|
||||
|
||||
21
style.css
21
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: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;
|
||||
|
||||
@ -16,8 +16,12 @@
|
||||
|
||||
<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>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user