✔ Script für Zutaten in Abhängigkeit der Menge (Portionen) erstellen?

[simon-comm]

Hallo zusammen, bin neu hier.

Ich kann Code interpretieren und modifizieren - mehr oder weniger - programmieren würde ich es nicht nennen.

Jetzt sehe ich mich mit folgender Aufgabe konfrontiert:

Ich hab so eine Art Rezept, wo ich eine beliebige Zahl (Endgewicht des fertigen Produkts) eingebe. Das Produkt setzt sich dabei aus 4 oder 5 verschieden Bestandteilen zusammen. Geb ich z.B. 1000 ein (1000g) dann müssen sich die Bestandteile prozentual verändern, in diesem Fall im Vergleich zu 500 also verdoppeln.

Fragen:
1. Mit was läßt sich das am besten lösen? Ich würde spontan auf Ajax oder Jquery tippen.
2. Eingabe erfolgt in ein leeres Input Feld das ausgelesen werden muss - oder wie würdet ihr das machen?
3. Die Ausgabe, d.h. die Werte der Zutaten sollen in Tabellenzellen stehen - ist das schwierig zu realisieren?
4. Wie sieht es mit der Sanitization des Inputfelds aus? Sollte man schon machen, oder?

Danke schon mal für die Antworten!

LG

 

[sheel]

Hi und Willkommen bei tutorials.de,

soll das irgendwie mit PHP, Datenbanken oÄ. verbunden werden oder reines HTML und JavaScript bleiben?

 

[simon-comm]

Hi und Willkommen bei tutorials.de,

soll das irgendwie mit PHP, Datenbanken oÄ. verbunden werden oder reines HTML und JavaScript bleiben?

So einfach wie möglich. Im Prinzip soll man eine Zahl eingeben und dann anteilig die Zutatenmengen angezeigt bekommen - mehr nicht.

 

[ikosaeder]

1. Ajax ist eine Methode zu Kommunikation zwischen Server und Client. Jquery ist eine Bibliothek für Javascript
Man kann das alles relativ leicht in javascript realisieren.
Einer quick and dirty Lösung könnte z.B. so aussehen.
2. Eingabe der Rezeptmenge und Ausgabe der Zutaten in input Feldern.
http://jsfiddle.net/fahtnf7w/8/
Hier sind allerdings die Zutaten fest codiert. Diese Daten sollten dann im echten Betrieb aus einer Datenbank kommen.
3. Es wäre möglich die Werte in echte Tabellen zu schreiben. Sinnvoller ist es die Ausgabefelder mit CSS als Tabelle ausrichten.
4. Benutzereingaben sollten immer validiert werden. Das Risiko ist bei solch einfachen Sachen aber gering.
Du könntest zum Beispiel testen, ob die Eingabe eine Zahl ist.

if(typeof gesamtmenge == 'number')

 

[simon-comm]

1. Ajax ist eine Methode zu Kommunikation zwischen Server und Client. Jquery ist eine Bibliothek für Javascript
Man kann das alles relativ leicht in javascript realisieren.
Einer quick and dirty Lösung könnte z.B. so aussehen.
2. Eingabe der Rezeptmenge und Ausgabe der Zutaten in input Feldern.
http://jsfiddle.net/fahtnf7w/8/
Hier sind allerdings die Zutaten fest codiert. Diese Daten sollten dann im echten Betrieb aus einer Datenbank kommen.
3. Es wäre möglich die Werte in echte Tabellen zu schreiben. Sinnvoller ist es die Ausgabefelder mit CSS als Tabelle ausrichten.
4. Benutzereingaben sollten immer validiert werden. Das Risiko ist bei solch einfachen Sachen aber gering.
Du könntest zum Beispiel testen, ob die Eingabe eine Zahl ist.

if(typeof gesamtmenge == 'number')

Danke, aber das ist schon zuviel.

Die einzige Größe die verändert wird ist die Gesamtmenge. Diese wird im Input Feld eingegeben und daraus errechnet sich wieviel von jeder Zutat benötigt wird. Im Prinzip sowas wie das hier: https://www.tutorials.de/threads/hilfe-bei-js-zutatenrechner.387897/ nur keine Auswahl der Menge an Kuchen, sondern die Anzahl der Kuchen wird im Input Feld eingegeben.

 

[ComFreek]

Du könntest zum Beispiel testen, ob die Eingabe eine Zahl ist.

Nein, das value-Attribut eines Input-Feldes im DOM ist immer ein String, auch wenn dieser String nur Ziffern enthalten mag.

 

[ComFreek]

@simon-comm Siehe http://jsfiddle.net/kLu4opmu/.

<label>Number of cakes:
    <input type="number" id="cakes" min="1" value="1">
</label>
<hr>
<div id="results"></div>

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("cakes"), updateResults);
// Show initial recipe
updateResults(recipe);

1. Die Nutzereingaben werden nicht überprüft!
2. Die Namen der Zutaten werden unmaskiert ins HTML geschrieben!

 

[simon-comm]

@ComFreek so ungefähr, das ist es. Danke!