show < sign instead of rounding to 0

main.js

@@ -114,7 +114,7 @@ async function addMenuItem(food) {
 	nodeRoot.setAttribute("data-food-name", food.name);
 
 	itemName.textContent = food.name;
-	itemKcal.textContent = `${nutritions100.kcal} kcal/100${food.unit}`;
+	itemKcal.textContent = `${formatValue(nutritions100.kcal)} kcal/100${food.unit}`;
 	itemUnit.textContent = food.unit;
 
 	fatAmount.textContent = `${food.fat}g`;
@@ -163,23 +163,36 @@ async function addMenuItem(food) {
 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}`)
+	setAmount(kcalAmount, kcal, "kcal");
+	setAmount(fatAmount, fat, "g");
+	setAmount(carbsAmount, carbs, "g");
+	setAmount(sugarAmount, sugar, "g");
+	setAmount(proteinsAmount, proteins, "g");
+	setAmount(alcAmount, alc, "g");
+
 	updateSummary();
 }
 
+function setAmount(element, amount, unit) {
+	element.textContent = `${formatValue(amount)}${unit}`;
+	element.setAttribute("data-value", amount);
+}
+
+function formatValue(value) {
+	if (value > 0 && value < 1) {
+		return "<1"
+	}
+
+	return Math.round(value);
+}
+
 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 fat = food.fat / 100 * amount;
+	const carbs = food.carbs / 100 * amount;
+	const sugar = food.sugar / 100 * amount;
+	const proteins = food.proteins / 100 * amount;
+	const alc = amount * food.alc / 100;
+	const kcal = fat * 9 + carbs * 4 + proteins * 4 + alc * 7;
 	const score = kcal / amount;
 	return {fat, carbs, sugar, proteins, alc, kcal, score}
 }
@@ -196,20 +209,20 @@ function updateSummary() {
 	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);
+		energy += parseFloat(menuItem.querySelector(".menu-item-energy").getAttribute("data-value"));
+		fat += parseFloat(menuItem.querySelector(".menu-item-fat").getAttribute("data-value"));
+		carbs += parseFloat(menuItem.querySelector(".menu-item-carbs").getAttribute("data-value"));
+		sugar += parseFloat(menuItem.querySelector(".menu-item-sugar").getAttribute("data-value"));
+		proteins += parseFloat(menuItem.querySelector(".menu-item-proteins").getAttribute("data-value"));
+		alc += parseFloat(menuItem.querySelector(".menu-item-alc").getAttribute("data-value"));
 	}
 
-	summaryEnergy.textContent = `${energy}kcal`;
-	summaryFat.textContent = `${fat}g`;
-	summaryCarbs.textContent = `${carbs}g`;
-	summarySugar.textContent = `${sugar}g`;
-	summaryProteins.textContent = `${proteins}g`;
-	summaryAlc.textContent = `${alc}g`;
+	summaryEnergy.textContent = `${formatValue(energy)}kcal`;
+	summaryFat.textContent = `${formatValue(fat)}g`;
+	summaryCarbs.textContent = `${formatValue(carbs)}g`;
+	summarySugar.textContent = `${formatValue(sugar)}g`;
+	summaryProteins.textContent = `${formatValue(proteins)}g`;
+	summaryAlc.textContent = `${formatValue(alc)}g`;
 }
 
 function getScoreColor(density, unit) {

style.css

@@ -136,10 +136,6 @@ tfoot tr td {
 	margin: 0 auto;
 }
 
-/* .menu-item:not(:last-child) {
-	border-bottom: 1px solid lightgray;
-} */
-
 .delete-menu-item,
 .summary-delete-icon {
 	color: #cc3d3d;