Counter
JavaScript kann für mehr als nur Animationen verwendet werden. In diesem Abschnitt erstellen wir eine einfache Funktion, um die Menge an Zutaten für eine bestimmte Anzahl Personen zu berechnen.
HTML-Struktur
Passen wir doch zuerst unsere HTML-Struktur an, damit wir die gewünschten Elemente in JS ansprechen können.
Fügen wir um unsere Zahlen, die die Menge angeben, ein <span>-Tag hinzu – mit je einem Attribut namens data-multiply.
Davor anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Spitzbubenrezept</title>
<meta name="viewport" inhalt="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./src/styles/style.css" />
</head>
<body>
<div id="rezept">
<img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
<h1>Spitzbuben mit Johannisbeergelee</h1>
<hr />
<div id="inhalt">
<div id="zutaten">
<h2>Zutaten für <span data-multiply="1">4</span> Personen</h2>
<ul>
<li><span data-multiply="31.25">125</span> g Butter, weich</li>
<li>
<span data-multiply="15.63">62.5</span> g Puderzucker oder Zucker
</li>
<li><span data-multiply="0.25">1</span> TL Vanillezucker</li>
<li><span data-multiply="0.13">0.5</span> Prise Salz</li>
<li><span data-multiply="0.13">0.5</span> Eiweiss (frisch)</li>
<li><span data-multiply="43.75">175</span> g Mehl</li>
<li>
ca. <span data-multiply="25">100</span> g Gelee (Johannisbeeren
oder Quitten) oder Konfitüre (Aprikosen)
</li>
<li>etwas Puderzucker (zum Bestäuben)</li>
</ul>
</div>
<div id="zubereitung">
<h2>Zubereitung</h2>
<p>
Butter in einer Schüssel verrühren. Puderzucker, Vanillezucker und
Salz beigeben, rühren, bis die Masse heller ist.
</p>
<p>
Eiweiss verklopfen, darunterrühren. Mehl beigeben, zu einem Teig
zusammenfügen, etwas flach drücken, zugedeckt mind. 2 Std. kühl
stellen.
</p>
<p>
Ofen auf 200 Grad vorheizen. Teig portionenweise zwischen einem
aufgeschnittenen Plastikbeutel 2 mm dick auswallen. Rondellen von
ca. 4 cm Ø (Mini-Spitzbuben ca. 2 cm Ø) ausstechen. Bei der Hälfte
der Guetzli mit einem kleinen Förmchen die Mitte ausstechen. Guetzli
auf mit Backpapier belegte Bleche legen, ca. 15 Min. kühl stellen.
</p>
<p>
Backen pro Blech: je ca. 6 Min. in der Mitte des Ofens. Herausnemen,
Guetzli auf einem Gitter auskühlen.
</p>
<p>
Gelee in einer kleinen Pfanne warm werden lassen, glatt rühren, auf
die flache Seite der Guetzlibödeli verteilen. Deckeli mit
Puderzucker bestäuben, darauf setzen.
</p>
</div>
</div>
<hr />
<div id="zubereitung">
<h2>
Anteil an empfohlenem Tagesbedarf (pro Person, Referenz: 2000 kcal)
</h2>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#445946">Kalorien</div>
<div class="naehrwert-wert">516 kcal</div>
<div class="prozent">26%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#854623">Kohlenhydrate</div>
<div class="naehrwert-wert">67 g</div>
<div class="prozent">24%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#c58a50">Fett</div>
<div class="naehrwert-wert">25.5 g</div>
<div class="prozent">36%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#7b1e15">Eiweiss</div>
<div class="naehrwert-wert">5.75 g</div>
<div class="prozent">11%</div>
</div>
</div>
</div>
<script src="./src/scripts/script.js"></script>
</body>
</html>
Danach anzeigen
Als Wert für das data-multiply Attribut nehmen wir den Wert für eine einzelne Person.
Damit wir die Anzahl Personen ändern können, brauchen wir noch ein Eingabefeld und zwei Buttons, um die Anzahl zu erhöhen oder zu verringern. Diese fügen wir in einem Div mit der ID bedienung ein.
Davor anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Spitzbubenrezept</title>
<meta name="viewport" inhalt="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./src/styles/style.css" />
</head>
<body>
<div id="rezept">
<img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
<h1>Spitzbuben mit Johannisbeergelee</h1>
<hr />
<div id="inhalt">
<div id="zutaten">
<h2>Zutaten für <span data-multiply="1">4</span> Personen</h2>
<ul>
<li><span data-multiply="31.25">125</span> g Butter, weich</li>
<li>
<span data-multiply="15.63">62.5</span> g Puderzucker oder Zucker
</li>
<li><span data-multiply="0.25">1</span> TL Vanillezucker</li>
<li><span data-multiply="0.13">0.5</span> Prise Salz</li>
<li><span data-multiply="0.13">0.5</span> Eiweiss (frisch)</li>
<li><span data-multiply="43.75">175</span> g Mehl</li>
<li>
ca. <span data-multiply="25">100</span> g Gelee (Johannisbeeren
oder Quitten) oder Konfitüre (Aprikosen)
</li>
<li>etwas Puderzucker (zum Bestäuben)</li>
</ul>
<div id="bedienung">
<button class="bedienungskopf minus">-</button>
<input type="number" value="4" min="1" />
<button class="bedienungskopf plus">+</button>
</div>
</div>
<div id="zubereitung">
<h2>Zubereitung</h2>
<p>
Butter in einer Schüssel verrühren. Puderzucker, Vanillezucker und
Salz beigeben, rühren, bis die Masse heller ist.
</p>
<p>
Eiweiss verklopfen, darunterrühren. Mehl beigeben, zu einem Teig
zusammenfügen, etwas flach drücken, zugedeckt mind. 2 Std. kühl
stellen.
</p>
<p>
Ofen auf 200 Grad vorheizen. Teig portionenweise zwischen einem
aufgeschnittenen Plastikbeutel 2 mm dick auswallen. Rondellen von
ca. 4 cm Ø (Mini-Spitzbuben ca. 2 cm Ø) ausstechen. Bei der Hälfte
der Guetzli mit einem kleinen Förmchen die Mitte ausstechen. Guetzli
auf mit Backpapier belegte Bleche legen, ca. 15 Min. kühl stellen.
</p>
<p>
Backen pro Blech: je ca. 6 Min. in der Mitte des Ofens. Herausnemen,
Guetzli auf einem Gitter auskühlen.
</p>
<p>
Gelee in einer kleinen Pfanne warm werden lassen, glatt rühren, auf
die flache Seite der Guetzlibödeli verteilen. Deckeli mit
Puderzucker bestäuben, darauf setzen.
</p>
</div>
</div>
<hr />
<div id="zubereitung">
<h2>
Anteil an empfohlenem Tagesbedarf (pro Person, Referenz: 2000 kcal)
</h2>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#445946">Kalorien</div>
<div class="naehrwert-wert">516 kcal</div>
<div class="prozent">26%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#854623">Kohlenhydrate</div>
<div class="naehrwert-wert">67 g</div>
<div class="prozent">24%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#c58a50">Fett</div>
<div class="naehrwert-wert">25.5 g</div>
<div class="prozent">36%</div>
</div>
<div class="naehrwert-balken">
<div class="naehrwert-titel" data-farbe="#7b1e15">Eiweiss</div>
<div class="naehrwert-wert">5.75 g</div>
<div class="prozent">11%</div>
</div>
</div>
</div>
<script src="./src/scripts/script.js"></script>
</body>
</html>
Danach anzeigen
JavaScript Logik
In unserem JavaScript können wir nun unsere Bedienungselemente ansprechen und in Variable speichern.
Davor anzeigen
addEventListener("DOMContentLoaded", () => {
let balken = document.querySelectorAll(".naehrwert-balken");
balken.forEach((balkenEl) => {
let titel = balkenEl.querySelector(".naehrwert-titel");
let wert = balkenEl.querySelector(".naehrwert-wert");
let prozent = balkenEl.querySelector(".prozent");
let farbe = titel.getAttribute("data-farbe");
titel.style.backgroundColor = farbe;
wert.style.backgroundColor = farbe;
wert.style.width = prozent.innerText;
});
// zähler
let plusButton = document.querySelector(".plus");
let minusButton = document.querySelector(".minus");
let anzahlInput = document.querySelector("input[type='number']");
});
Danach anzeigen
Nun können wir Event Listener zu den Buttons und dem Input-Feld hinzufügen, um auf Benutzereingaben zu reagieren. Bei jeder Änderung der Anzahl Personen rufen wir eine Funktion updateinhaltsstoffe auf, die die Mengen der Zutaten anpasst.
Beim Minus- und Plus-Button ändern wir den Wert des Input-Felds und rufen die Funktion auf.
Davor anzeigen
addEventListener("DOMContentLoaded", () => {
let balken = document.querySelectorAll(".naehrwert-balken");
balken.forEach((balkenEl) => {
let titel = balkenEl.querySelector(".naehrwert-titel");
let wert = balkenEl.querySelector(".naehrwert-wert");
let prozent = balkenEl.querySelector(".prozent");
let farbe = titel.getAttribute("data-farbe");
titel.style.backgroundColor = farbe;
wert.style.backgroundColor = farbe;
wert.style.width = prozent.innerText;
});
let plusButton = document.querySelector(".plus");
let minusButton = document.querySelector(".minus");
let anzahlInput = document.querySelector("input[type='number']");
plusButton.addEventListener("click", () => {
anzahlInput.value = parseInt(anzahlInput.value) + 1;
updateinhaltsstoffe();
});
minusButton.addEventListener("click", () => {
if (parseInt(anzahlInput.value) > 1) {
anzahlInput.value = parseInt(anzahlInput.value) - 1;
updateinhaltsstoffe();
}
});
anzahlInput.addEventListener("change", () => {
updateinhaltsstoffe();
});
});
Danach anzeigen
Nun müssen wir aber noch die gerufene Funktion updateinhaltsstoffe erstellen. Diese Funktion liest den Wert aus dem Input-Feld aus und passt alle Zutatenmengen an. In unserer Funktion wählen wir unser Input-Feld aus und schreiben dessen Wert in eine Variable. Dann multiplizieren wir alle Elemente mit dem Attribut data-multiply mit der Anzahl Personen und schreiben das Ergebnis in den Textinhalt des Elements.
Davor anzeigen
addEventListener("DOMContentLoaded", () => {
let balken = document.querySelectorAll(".naehrwert-balken");
balken.forEach((balkenEl) => {
let titel = balkenEl.querySelector(".naehrwert-titel");
let wert = balkenEl.querySelector(".naehrwert-wert");
let prozent = balkenEl.querySelector(".prozent");
let farbe = titel.getAttribute("data-farbe");
titel.style.backgroundColor = farbe;
wert.style.backgroundColor = farbe;
wert.style.width = prozent.innerText;
});
let plusButton = document.querySelector(".plus");
let minusButton = document.querySelector(".minus");
let anzahlInput = document.querySelector("input[type='number']");
plusButton.addEventListener("click", () => {
anzahlInput.value = parseInt(anzahlInput.value) + 1;
updateinhaltsstoffe();
});
minusButton.addEventListener("click", () => {
if (parseInt(anzahlInput.value) > 1) {
anzahlInput.value = parseInt(anzahlInput.value) - 1;
updateinhaltsstoffe();
}
});
anzahlInput.addEventListener("change", () => {
updateinhaltsstoffe();
});
function updateinhaltsstoffe() {
let amount = parseInt(anzahlInput.value);
document.querySelectorAll("#zutaten [data-multiply]").forEach((wert) => {
wert.innerText = (wert.getAttribute("data-multiply") * amount).toFixed(2). replace(".00", "");
})
}
});
Danach anzeigen
So nun wenn wir die beiden Btns anclicken ändern wir die Zahl an Inhaltsstoffen entsprechend der Anzahl Personen. Viel Spass beim Ausprobieren!