03_js-dom/agenda.md

@@ -336,7 +336,7 @@ Projektarbeit
 - Defer & Async
 - JS Dateien auslagern
 - Optimierung von Projektstruktur
-- **Exkurs: Projektstruktur mit Gulp, Vite**
+- **Exkurs: Projektstruktur mit Gulp, Vite, SASS 7 on 1**
 
 **Übungen:**
 

03_js-dom/uebungen/u01_almost-quotes/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
@@ -17,10 +17,11 @@
     </main>
     <script>
       'use strict';
-
       // 1
       // Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite  in Almost Famous Quotes.
 
+      const headingEl = document.querySelector('h1');
+      headingEl.textContent = 'Almost Famous Quotes';
       // 2
       // Die Seite  enthält ein leeres blockquote-Element. Öffnen Sie die HTML-Seite in Chrome. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt:
 
@@ -30,6 +31,15 @@
       //     telephone.
       // </p>
       // <footer>— <cite>Bjarne Stroustrup</cite></footer>
+
+      const blockquoteEl = document.querySelector('blockquote');
+      blockquoteEl.innerHTML = `
+        <p>
+        I have always wished for my computer to be as easy to use as my telephone;
+        my wish has come true because I can no longer figure out how to use my
+        telephone.
+        </p><footer>— <cite>Bjarne Stroustrup</cite></footer>
+        `;
     </script>
   </body>
 </html>

03_js-dom/uebungen/u02_tasse-01001/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -98,6 +98,14 @@
         // 1. das h1-Element findet.
         // 2.das Element mit der id buy_form findet.
         // 3. das Element mit der id product_img findet.
+        console.log(document.querySelector('h1'));
+        // console.log(document.getElementsByTagName('h1')[0]);
+
+        console.log(document.querySelector('#buy_form'));
+        console.log(document.getElementById('buy_form'));
+
+        console.log(document.querySelector('#product_img'));
+        console.log(document.getElementById('product_img'));
       })();
     </script>
   </body>

03_js-dom/uebungen/u03_tasse-01001/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -95,11 +95,29 @@
       'use strict';
       (() => {
         // alle li-Elemente findet.
+        const listItems = document.querySelectorAll('li');
+
         // alle h2-Elemente findet.
+        const levelTwoHeadings = document.querySelectorAll('h2');
+
         // alle Elemente mit der Klasse special findet.
+        const specialElements = document.querySelectorAll('.special');
+
         // alle li-Elemente mit der Klasse keyword findet.
+        const keywordListItems = document.querySelectorAll('li.keyword');
+
         // alle span-Elemente mit der Klasse special findet.
+        const specialSpans = document.querySelectorAll('span.special');
+
         // alle Elemente findet, die die Klassen i UND b haben.
+        const italicBoldElements = document.querySelectorAll('.i.b');
+
+        console.log('List items:', listItems);
+        console.log('Level two headings:', levelTwoHeadings);
+        console.log('Special elements:', specialElements);
+        console.log('Keyword list items:', keywordListItems);
+        console.log('Special spans:', specialSpans);
+        console.log('Italic and bold elements:', italicBoldElements);
       })();
     </script>
   </body>

03_js-dom/uebungen/u04_tasse-01001/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -95,11 +95,21 @@
       'use strict';
       (() => {
         // Übung 4: 010010000100111101010100 — Teil 3
+
         // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
         // 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet.
+        console.log(document.querySelector('ul#product_specification li:first-child'));
+        console.log(document.getElementById('product_specification').querySelector('li'));
+        console.log(document.getElementById('product_specification').firstElementChild);
+
         // 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
+        console.log(document.querySelector('h1.article span'));
+        // console.log(document.getElementsByTagName('h1')[0].firstElementChild);
+
         // 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
+        console.log(document.querySelectorAll('p .keyword'));
         // 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
+        console.log(document.querySelectorAll('ul li'));
       })();
     </script>
   </body>

03_js-dom/uebungen/u05_tasse-01001/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -97,12 +97,20 @@
       (() => {
         // Übung 5: 010010000100111101010100 — Teil 4
         // Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
+
         // 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
+        console.log(document.querySelectorAll('img[src$="jpg" i], img[src$="jpeg" i]'));
         // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
+        console.log(document.querySelectorAll('form input[type="button"]'));
+
         // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
+        console.log(document.querySelectorAll('.model[data-model*="V7"]'));
         // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
+        console.log(document.querySelectorAll('img:not(.float_left)'));
         // 5. alle zweiten Listenpunkte zu finden.
+        console.log(document.querySelectorAll('li:nth-child(2)'));
         // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
+        console.log(document.querySelectorAll('h2 + ul'));
       })();
     </script>
   </body>

03_js-dom/unterricht/tag19/02_document-query-selector/index.html

@@ -10,11 +10,14 @@
     <main>
       <div class="container py-5">
         <h1>document.querySelector() - Hello World!</h1>
+        <div class="output alert alert-secondary my-3"></div>
       </div>
     </main>
     <script>
       'use strict';
 
+      const outputEl = document.querySelector('.output');
+
       const h1El = document.querySelector('h1');
 
       h1El.innerHTML = 'Hello <em>World</em>';

03_js-dom/unterricht/tag19/07_css-pseudoklassen/index.html

@@ -78,7 +78,7 @@
 
       /* :nth-child(odd | even) */
 
-      table tbody tr:nth-child(odd) td {
+      .table-striped > tbody > tr:nth-of-type(odd) > * {
         background-color: rgba(0, 0, 0, 0.1);
       }
 
@@ -126,7 +126,7 @@
           werden.
         </p>
 
-        <table class="table">
+        <table class="table table-striped">
           <thead class="table-dark">
             <tr>
               <th>Name</th>