Einstieg
JavaScript ist die Programmiersprache, die es uns ermöglicht, unsere Webseite interaktiv zu machen. Damit können wir rechnen, Dinge anzeigen oder ausblenden und vieles mehr.
Versuchen wir doch einmal, die verschiedenen Kennzahlen unserer Kekse wie Kalorien oder Fettanteil anzuzeigen und zu animieren.
Hierfür brauchen wir jedoch zuerst die entsprechenden Tags im HTML.
Erstellen wir doch einen neuen Abschnitt im #rezept-Div mit der ID kennzahlen.
Davor anzeigen
<body>
<div id="rezept">
<div>
<img src="./src/img/spitzbuben.jpg" alt="Spitzbuben" />
<h1>Spitzbuben mit Johannisbeergelee</h1>
</div>
<div id="inhalt">
<div id="zutaten">
<h2>Zutaten für 4 Personen</h2>
<ul>
<li>125 g Butter, weich</li>
<li>62.5 g Puderzucker oder Zucker</li>
<li>1 TL Vanillezucker</li>
<li>0.5 Prise Salz</li>
<li>0.5 Eiweiss (frisch)</li>
<li>175 g Mehl</li>
<li>ca. 100 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. Herausnehmen,
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 id="kennzahlen">
<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>
</body>
</html>
Danach anzeigen
In diesem Div erstellen wir viermal dasselbe Grundgerüst für unsere Kennzahlen. Jede Kennzahl besteht aus einem Balken (naehrwert-balken), einem Titel (naehrwert-titel), dem Wert (naehrwert-wert) und dem Prozentanteil (prozent). Diese vier Balken zeigen uns die Kalorien, Kohlenhydrate, Fett und Eiweiss an.
Styling der Kennzahlen
Um die Kennzahlen ansprechend zu gestalten, fügen wir folgendes CSS in unsere style.css-Datei ein:
Davor anzeigen
body {
background-image: url(../img/image.png);
font-family: Verdana, Geneva, Tahoma, sans-serif;
#rezept {
background-image: url(../img/bg-paper.gif);
max-width: 1200px;
width: calc(100% -10px);
overflow: hidden;
padding: 20px;
border: 5px solid white;
border-radius: 4px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
img {
width: calc(100% - 10px);
height: 400px;
object-fit: cover;
border-radius: 4px;
}
h2 {
font-size: 20px;
}
#inhalt {
display: flex;
#zutaten {
width: 33%;
min-width: 300px;
padding-right: 20px;
ul {
list-style: none;
padding: 0;
li {
margin-bottom: 10px;
}
}
}
}
#zubereitung {
.naehrwert-balken {
width: 100%;
height: 40px;
background-color: #eeeeee;
border-radius: 4px;
display: flex;
position: relative;
margin-bottom: 10px;
.naehrwert-titel {
width: 300px;
height: 100%;
z-index: 1;
display: flex;
padding-left: 10px;
align-items: center;
font-size: large;
color: white;
border-radius: 4px 0 0 4px;
}
.naehrwert-wert {
opacity: 0.5;
height: 100%;
left: 0;
width: 0px;
transition: 3s ease-out;
display: flex;
align-items: center;
justify-content: flex-end;
border-radius: 0 4px 4px 0;
font-size: small;
padding-right: 10px;
}
.prozent {
width: 100px;
height: 100%;
position: absolute;
right: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: lighter;
z-index: 1;
}
}
}
@media (max-width: 1200px) {
#inhalt {
flex-direction: column;
#zutaten {
width: 100%;
min-width: none;
margin-bottom: 20px;
}
}
}
}
}
Danach anzeigen
Was stylen wir hier?
Als Erstes sprechen wir den Balken (naehrwert-balken) auf eine feste Höhe und Breite an und geben ihm eine Hintergrundfarbe. Dann runden wir seine Ecken leicht ab und machen ihn zu einem Flex-Container. Damit wir die Elemente im Balken später übereinanderlegen können, setzen wir seine Position auf relative. Zum Schluss geben wir ihm noch einen unteren Abstand, damit die einzelnen Balken nicht aneinander kleben.
Innerhalb des Balkens sprechen wir den Titel (naehrwert-titel) an und geben ihm eine feste Breite und Höhe. Damit der Text im Titel zentriert ist, machen wir ihn zu einem Flex-Container und richten den Text mit align-items und padding-left aus. Zum Schluss geben wir dem Titel noch eine weisse Schriftfarbe und runden die linken Ecken ab. Der Z-Index gibt an, in welcher Ebene das Element liegt. Damit der Titel immer über den anderen Elementen liegt, setzen wir den Z-Index auf 1.
Für den Wert (naehrwert-wert) setzen wir die Opazität auf 0.5, damit er etwas transparenter ist. Wir setzen seine Höhe auf 100%, damit er die volle Höhe des Balkens einnimmt. Die Breite setzen wir auf 0px, damit der Balken am Anfang nicht sichtbar ist. Mit der Transition-Eigenschaft geben wir an, dass sich die Breite über 3 Sekunden verändern soll, wenn sie angepasst wird. Damit der Text im Wert rechtsbündig ist, machen wir ihn zu einem Flex-Container und richten den Text mit align-items und justify-content aus. Zum Schluss runden wir die rechten Ecken ab und geben dem Text eine kleine Schriftgrösse und etwas Padding rechts.
Zum Schluss sprechen wir noch das Prozent-Element (prozent) an. Wir geben ihm eine feste Breite und Höhe und setzen seine Position auf absolute, damit wir es innerhalb des Balkens frei positionieren können. Wir positionieren es ganz rechts im Balken und machen es zu einem Flex-Container, damit der Text zentriert ist. Zum Schluss geben wir dem Text eine leichtere Schriftart und setzen den Z-Index auf 1, damit es immer über den anderen Elementen liegt.
JavaScript für die Animation
Nun, da wir alles vorbereitet haben, können wir mit dem JavaScript beginnen. Hierfür erstellen wir eine neue Datei namens script.js und binden sie in unser HTML-Dokument ein.
Dateistruktur
.
└── spitzbubenRezept/
├── src/
│ ├── img/
│ │ ├── bg-paper.gif
│ │ ├── tischdecke.png
│ │ └── spitzbuben.jpg
│ ├── styles/
│ │ └── style.css
│ └── scripts/
│ └── script.js
└── index.html
Einbinden der JavaScript-Datei
Um die JavaScript-Datei in unser HTML-Dokument einzubinden, fügen wir den folgenden Code kurz vor dem schliessenden </body>-Tag ein:
Davor anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Spitzbubenrezept</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="" />
<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 4 Personen</h2>
<ul>
<li>125 g Butter, weich</li>
<li>62.5 g Puderzucker oder Zucker</li>
<li>1 TL Vanillezucker</li>
<li>0.5 Prise Salz</li>
<li>0.5 Eiweiss (frisch)</li>
<li>175 g Mehl</li>
<li>
ca. 100 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. Herausnehmen,
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
Um zu testen, ob unsere Verlinkung richtig funktioniert, schreiben wir in die script.js-Datei folgenden Code:
console.log("Hallo Welt");
Dies ist eine einfache Anweisung, die in der Konsole des Browsers den Text "Hallo Welt" ausgibt. Öffnen wir nun die Entwicklerkonsole in unserem Browser (Rechtsklick auf die Seite -> Untersuchen -> Konsole). Wenn wir dort "Hallo Welt" sehen, dann funktioniert unsere Verlinkung. Wenn nicht, sollten wir unsere Verlinkung überprüfen.
Animation
Nun, da wir unsere Datei verlinkt haben und wissen, dass sie funktioniert, können wir mit dem Animieren der Kennzahlen beginnen. Hierfür beginnen wir damit, einen Event Listener zu erstellen, der wartet, bis die Seite vollständig geladen ist:
addEventListener("DOMContentLoaded", () => {});
Unser Browser sendet für alles, was geladen wird oder was der Benutzer macht, Ereignisse (Events). Wir können mit der Hilfe von Event Listenern auf diese Ereignisse reagieren. Somit können wir Aktionen ausführen, wenn der Benutzer zum Beispiel etwas klickt oder – wie in diesem Fall – wenn die Seite vollständig geladen ist.
In dem Event Listener wollen wir nun alle Balken auswählen. Diese speichern wir in einer Variablen namens balken:
let balken = document.querySelectorAll(".naehrwert-balken");
Hierfür verwenden wir die Methode querySelectorAll des document-Objekts. Diese Methode sucht im HTML-Dokument nach allen Elementen, die dem angegebenen Selektor entsprechen. In unserem Fall suchen wir nach allen Elementen mit der Klasse naehrwert-balken. Das Ergebnis ist eine NodeList aller gefundenen Elemente. Um die ausgewählten Elemente zu speichern, erstellen wir mit dem Schlüsselwort let eine Variable mit einem beliebigen Namen.
Nun, da wir alle Balken in einer Variablen haben, können wir über jeden Balken iterieren und ihn animieren. Hierfür verwenden wir die Methode forEach. Auf Deutsch bedeutet das: Für jedes Element in balken (als balkenEl) führe Folgendes aus:
balken.forEach((balkenEl) => {});
Für jeden Balken wollen wir nun den Titel, den Wert und den Prozentanteil auswählen. Diese speichern wir in den Variablen titel, wert und prozent:
let titel = balkenEl.querySelector(".naehrwert-titel");
let wert = balkenEl.querySelector(".naehrwert-wert");
let prozent = balkenEl.querySelector(".prozent");
Der nächste Schritt ist, die Farbe des Titels und des Balkens zu setzen. Hierfür lesen wir den Wert des Attributs data-farbe aus und setzen ihn als Hintergrundfarbe des Titels und des Wertes:
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;
Nun, da die Farben gesetzt sind, können wir die Breite des Wertes auf den Prozentanteil setzen, um die Animation zu starten:
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;
});
});
Danach anzeigen
Nun, wenn wir die Seite neu laden, sollten die Balken animiert werden und die entsprechenden Breiten annehmen. Die Animation dauert 3 Sekunden, da wir dies in unserem CSS mit der Transition-Eigenschaft definiert haben.
Herzlichen Glückwunsch! Du hast soeben deine erste JavaScript Animation erstellt!