fix(slides): smaller fixes to the slides

src/components/slides/css-selectors-advanced/pseudo.astro

@@ -178,7 +178,7 @@ import NthBox from "./nth-box.astro"
   </section>
 
   <section class="apply-styles pseudo">
-    <p><code>(n+7)</code> <br>- Selektiert das 4. und alle darauffolgenden Elemente</p>
+    <p><code>(n+4)</code> <br>- Selektiert das 4. und alle darauffolgenden Elemente</p>
     <div class="container nth nth-n+4">
       <NthBox amount={5} />
     </div>

src/components/slides/javascript/02-complex-datatypes/arrays.astro

@@ -110,7 +110,7 @@
   </section>
 
   <section>
-    <p>push &amp; pop</p>
+    <p>.push() &amp; .pop()</p>
     <pre class="js"><code data-trim data-line-numbers is:raw>
       const arr = [1, 2, 3];
       arr.push(4);
@@ -135,14 +135,14 @@
 
       // 10
       console.log(arr.reduce((acc, val) =&gt; {
-        acc += val;
+        return acc += val;
       }, 0));
     </code></pre>
     <p>Kalkuliert einen Wert basierend aus den Elementen des Array. Das Array erwartet 2 Werte: eine Funktion in der ein Accumulator und der aktuelle Wert als Parameter übergeben wird und den nächsten Wert zurück geben soll. Und den initialen Wert das Accumulators.</p>
   </section>
 
   <section>
-    <p>some</p>
+    <p>.some()</p>
     <pre class="js"><code data-trim data-line-numbers is:raw>
       const arr = [1, 5, 10, 25];
 
@@ -164,6 +164,9 @@
     </code></pre>
     <p>Sortiert das Array "In Place" (Ursprüngliches Array wird modifiziert).</p>
     <p>Hierzu führt <code>sort</code> eine Funktion aus, die mitgegeben wird. Anhand des Ergebnisses werden Elemente im Array umsortiert</p>
+  </section>
+  
+  <section>
     <ul>
       <li>Ergebnis -1: Wert "a" ist kleiner als Wert "b"</li>
       <li>Ergebnis  1: Wert "a" ist größer als Wert "b"</li>

src/components/slides/javascript/05-dom/insert-elements.astro

@@ -14,10 +14,12 @@
       // Button erstellen
       const newButton = document.createElement('button');
 
-      // wir können noch mehr mit dem button machen (klick-events, attribute, etc);
+      // wir können noch mehr mit dem button machen
+      // (klick-events, attribute, etc);
       newButton.innerText = "Klick mich!";
 
-      // Wir können einem beliebigen Element nun den Button als Kind anhängen.
+      // Wir können einem beliebigen Element nun
+      // den Button als Kind anhängen.
       document.body.appendChild(newButton);
     </code></pre>
   </section>

src/components/slides/javascript/07-async/eventloop.astro

@@ -34,6 +34,9 @@
   <section>
     <p>In JavaScript ist es nicht möglich die Abarbeitung einer Funktion anzuhalten.</p>
     <p>Im Event Loop wird darauf gewartet, dass eine Funktion komplett abschließt / abgearbeitet wird bevor die nächste Message aus der Queue geladen wird.</p>
+  </section>
+  
+  <section>
     <p>Halten wir in einer Funktion die weitere Abarbeitung auf, so Sorgen wir gleichzeitig dafür dass der Browser in dieser Zeit nicht weiter arbeiten kann.</p>
     <p>Wir empfinden dass als Lag oder simples "Nicht-Antworten" der Website auf Nutzer-Interaktionen (wenn die Abarbeitung länger als ein paar Millisekunden benötigt)</p>
   </section>

src/components/slides/javascript/09-web-api/files.astro

@@ -158,6 +158,11 @@
 			<li>Das Resultat der Funktion <code>readAsArrayBuffer</code> erhalten wir in unserer Funktion im Event. Dieses nehmen wir und konvertieren es in ein Uint8Array</li>
 			<li>In den Zeilen 5 bis 7 konvertieren wir die Informationen in Characters und wandeln diese in einen Base-64 kodierten String um</li>
 			<li>Darauffolgend entnehmen wir den Bild-Typen (JPEG)</li>
+		</ol>
+	</section>
+	
+	<section>
+		<ol start="4">
 			<li>Wir fassen alle gesamelten Informationen in einen korrekt definierten String zur Bild-Darstellung zusammen</li>
 			<li>Zu guter letzt verwenden wir die Bildinformationen im <code>src</code>-Attribut des <code>img</code>-Elementes</li>
 		</ol>

src/content/dhbw/de/web-engineering-i.mdx

@@ -207,3 +207,27 @@ JavaScript liefert uns dafür im Web-Browser eine spezielle Schnittstelle an: di
 
 <Card to="/slides/javascript/05-dom" color="blue">Zu den Slides</Card>
 <Spacer />
+
+### # JS - Klassen und Fehlerbehandlung
+
+<Card to="/slides/javascript/06-classes-errors" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Promises und Async
+
+<Card to="/slides/javascript/07-async" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Daten von Servern abfragen via "fetch"
+
+<Card to="/slides/javascript/08-data-fetching" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Weitere API's im Web-Browser
+
+<Card to="/slides/javascript/09-web-apis" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Externe Pakete mit NPM (AlpineJS)
+
+<Card to="/slides/javascript/10-external-packages" color="blue">Zu den Slides</Card>