milarin/kcalculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added nutritions and score

Browse Source
This commit is contained in:
Timon Ringwald 2022-09-09 00:21:59 +02:00
parent 0b0e08bcb0
commit 62042e9558
3 changed files with 155 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
main.js
View File

@ -90,10 +90,23 @@ async function addMenuItem(food) {
const nodeRoot = node.querySelector(".menu-item");
const itemAmount = node.querySelector(".menu-item-amount");
const kcalAmount = node.querySelector(".menu-item-kcal-for-amount");
const score = node.querySelector(".menu-item-score");
nodeRoot.setAttribute("data-food-name", food.name);
node.querySelector(".menu-item-name").textContent = food.name;
node.querySelector(".menu-item-kcal").textContent = `${food.kcal} kcal/100${food.unit}`;
node.querySelector(".menu-item-unit").textContent = food.unit;
score.textContent = food.density.toFixed(1);
score.classList.add(getScoreColor(food.density, food.unit));
node.querySelector(".menu-item-info-unit").textContent = `Nährwerte pro 100${food.unit}`;
node.querySelector(".menu-item-info-energy-value").textContent = `${food.kcal}kcal`;
node.querySelector(".menu-item-info-fat-value").textContent = `${food.fat}g`;
node.querySelector(".menu-item-info-carbs-value").textContent = `${food.carbs}g`;
node.querySelector(".menu-item-info-sugar-value").textContent = `${food.sugar}g`;
node.querySelector(".menu-item-info-proteins-value").textContent = `${food.proteins}g`;
node.querySelector(".menu-item-info-alc-value").textContent = `${food.alc}%`;
node.querySelector(".delete-menu-item").addEventListener("click", () => {
foodMenu.removeChild(nodeRoot);
updateSummary();
@ -126,4 +139,26 @@ function updateSummary() {
summaryKcal.textContent = sum;
summary.style.display = sum > 0 ? "block" : "none";
}
function getScoreColor(density, unit) {
switch (unit) {
case "g": {
if (density >= 2.4) {
return "red"
} else if (density >= 1.7) {
return "orange"
} else {
return "green";
}
}
case "ml": {
if (density >= 0.3) {
return "red"
} else {
return "green";
}
}
}
}

87
style.css
View File

@ -127,7 +127,7 @@ header {
}
.menu-item-kcal {
color: darkgray;
color: #333;
font-size: 0.65em;
transform: translateY(-0.15em);
display: inline-block;
@ -220,4 +220,89 @@ input[type=number] {
.summary-name {
display: inline;
font-weight: bold;
}
.menu-item-info-container {
margin-right: 1em;
position: relative;
float: right;
}
.menu-item-info-hover-button {
color: #333;
font-size: 0.75em;
text-decoration: underline;
}
.menu-item-info {
z-index: 1;
left: 0;
display: none;
width: 12em;
position: absolute;
background-color: #eee;
border: 1px solid darkgray;
box-sizing: border-box;
border-radius: 0.15em;
padding: 0.25em 0;
}
.menu-item-info > div {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 0.25em;
}
.menu-item-info-energy {
padding-top: 0.35em !important;
}
.menu-item-info-hover-button {
cursor: pointer;
user-select: none;
}
.menu-item-info-hover-button:hover + .menu-item-info {
display: block;
}
.menu-item-kcal-for-amount {
text-align: right;
display: inline-block;
min-width: 3em;
}
.menu-item-info-unit {
display: block !important;
padding-bottom: 0.35em !important;
text-align: center;
font-weight: bold;
border-bottom: 1px solid darkgray;
}
.menu-item-info-sugar {
padding-left: 0.25em;
}
.menu-item-score {
float: right;
margin-right: 1em;
font-size: 0.9rem;
padding: 0em 0.5em;
border-radius: 0.25em;
color: white;
user-select: none;
}
.menu-item-score.green {
background-color: darkgreen;
}
.menu-item-score.orange {
background-color: #e57e00;
}
.menu-item-score.red {
background-color: darkred;
}

35
templates/menu-item.html
View File

@ -6,8 +6,41 @@
<a class="delete-menu-item"><span class="material-icons">delete</span></a>
<div class="menu-item-amount-container">
<span class="menu-item-kcal-for-amount">123</span>
<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>
</div>
<span class="menu-item-info-container">
<span class="menu-item-info-hover-button">Nährwerte</span>
<div class="menu-item-info">
<div class="menu-item-info-unit"></div>
<div class="menu-item-info-energy">
<span class="name">Energie</span>
<span class="menu-item-info-energy-value"></span>
</div>
<div class="menu-item-info-fat">
<span class="name">Fett</span>
<span class="menu-item-info-fat-value"></span>
</div>
<div class="menu-item-info-carbs">
<span class="name">Kohlenhydrate</span>
<span class="menu-item-info-carbs-value"></span>
</div>
<div class="menu-item-info-sugar">
<span class="name">- davon Zucker</span>
<span class="menu-item-info-sugar-value"></span>
</div>
<div class="menu-item-info-proteins">
<span class="name">Eiweiß</span>
<span class="menu-item-info-proteins-value"></span>
</div>
<div class="menu-item-info-alc">
<span class="name">Alkohol</span>
<span class="menu-item-info-alc-value"></span>
</div>
</div>
</span>
<span class="menu-item-score" title="Bewertung"></span>
</div>
</template>