Servus Contao Community,
ich habe eine kleine Rezeptverwaltung und möchte jetzt die Menge der Zutaten an die Anzahl der Personen anpassen. Das heißt jemand schaut sich ein Rezept an, verändert die Anzahl der Personen und die Zutatenmenge wird automatisch angepasst.
Beispiel:
zutatenrechner.jpg
Ich habe schon mal nach ein paar Code-Schnipseln im Internet gesucht und folgendes gefunden:
Code:
<script>
function recipeCalculator(recipe, inputField, updater) {
inputField.addEventListener("change", function () {
var factor = this.value / recipe.baseAmount;
var newRecipe = {};
newRecipe.baseAmount = this.value;
newRecipe.ingredients = recipe.ingredients.map(function (ingredient) {
return {
name: ingredient.name,
amount: ingredient.amount * factor
};
});
updater(newRecipe);
});
};
var recipe = {
baseAmount: 1,
ingredients: [{
name: "Sugar (in grams)",
amount: 300
}, {
name: "Salt (in grams)",
amount: 2
}]
};
function updateResults(newRecipe) {
document.getElementById("results").innerHTML = newRecipe.ingredients.reduce(function (prevValue, ingredient) {
return prevValue + ingredient.name + "<br>" + ingredient.amount + "<br><br>";
}, "");
};
recipeCalculator(recipe, document.getElementById("personen"), updateResults);
// Show initial recipe
updateResults(recipe);
</script>
Irgendwie soll ich dann per
Code:
<div id="results"></div>
die Ausgabe bekommen, aber es klappt nicht. Mir scheint das auch nicht die perfekte Lösung zu sein und nachdem ich nicht so gut im Programmieren bin würde ich mich über Tipps und Vorschläge von euch freuen.
Beste Grüße und ein schönes Pfingstwochenende,
Mestragon
Lesezeichen