01_grundlagen/linksammlung.md

@@ -20,9 +20,15 @@
 - [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
 - [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
 - [HTMLReference.io](https://htmlreference.io/)
-- [CSSReference.io](https://cssreference.io/)
 - [BEM](https://getbem.com/) - Block Element Modifier
 
+## CSS Tricks
+
+- [CSSReference.io](https://cssreference.io/)
+- [CSS Guide Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
+- [CSS Gridgarden](https://cssgridgarden.com/#de)
+
 ## Software/ Tools
 
 - [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/)

01_grundlagen/uebungen/u07_prompt-age.html

@@ -23,6 +23,12 @@
       'use strict';
 
       const outputEl = document.querySelector('.output');
+
+      const age = prompt('Wie alt bist Du?');
+
+      const result = `Du bist ${age} Jahre alt.`;
+      console.log(result);
+      outputEl.textContent = result;
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u08_tax-totalprice.html

@@ -20,12 +20,17 @@
           <p>Folgende Definitionen steht dir zur Verfügung:</p>
           <p>
             <code>
-              'use strict'<br />
+              'use strict'
-              const TAX_PERCENTAGE = 22<br />
+
-              let price = 150<br />
+              const TAX_PERCENTAGE = 22
-              /* your code here */<br />
+
-              console.log(totalPrice)<br />
+              let price = 150
-            </code>
+
+              /* your code here */
+
+              console.log(totalPrice)
+
+            
           </p>
         </div>
         <div class="output alert alert-secondary my-3"></div>
@@ -34,12 +39,22 @@
     <script>
       'use strict';
       const TAX_PERCENTAGE = 22;
+      const TAX_RATE = 1 + TAX_PERCENTAGE / 100; // => 1.22
+
   
       const outputEl = document.querySelector('.output');
 
       const price = 150;
 
-      /* your code here */
+      // const totalPrice = price + (price * TAX_PERCENTAGE) / 100;
+      const totalPrice = price * TAX_RATE;
+      
+  
+
+      console.log(totalPrice);
+
+      outputEl.textContent = `total price: $${totalPrice}`;
     </script>
   </body>
 </html>
+ </code>

01_grundlagen/uebungen/u09_bezeichner.html

@@ -23,32 +23,32 @@
           <tbody>
             <tr>
               <td>Preis eines Buches in einem Onlineshop</td>
-              <td>-</td>
+              <td>bookPrice, itemPrice</td>
             </tr>
 
             <tr>
               <td>Anzahl der angemeldeten Benutzer</td>
-              <td>-</td>
+              <td>numberOfRegisteredUser, loggedInUsers, loggedUserCount</td>
             </tr>
 
             <tr>
               <td>Titel einer Webseite</td>
-              <td>-</td>
+              <td>websiteTitle, pageTitle</td>
             </tr>
 
             <tr>
               <td>Höhe eines Hauses auf einer Immobiliensite</td>
-              <td>-</td>
+              <td>houseHeight, buildingHeight, heightOfHouse</td>
             </tr>
 
             <tr>
               <td>Typ eines Monitors auf der Site eines Herstellers</td>
-              <td>-</td>
+              <td><strong>monitorType</strong></td>
             </tr>
 
             <tr>
               <td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
-              <td>-</td>
+              <td>carChassisNumber, vehicleIdentificationNumber, vin, <strong>vinRepaired</strong></td>
             </tr>
           </tbody>
         </table>

01_grundlagen/uebungen/u10_bezeichner-verbessern.html

@@ -36,118 +36,118 @@
             <tr>
               <td>bildid</td>
               <td>Inhalt</td>
-              <td>-</td>
+              <td>kein lowerCamelCase</td>
-              <td>-</td>
+              <td>bildId, imageId</td>
             </tr>
 
             <tr>
               <td>bildZähler</td>
               <td>Anzahl der hochgeladenen Bilder</td>
-              <td>-</td>
+              <td>keine Umlaute</td>
-              <td>-</td>
+              <td>imgUploadedCounter, bildZaehler, imageCounter</td>
             </tr>
             <tr>
               <td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
               <td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
-              <td>-</td>
+              <td>keine Sonderzeichnen und zu lang</td>
-              <td>-</td>
+              <td>currentRowUserCounter</td>
             </tr>
             <tr>
               <td>urenKelvornAme</td>
               <td>Vorname des Sohns eines Enkels</td>
-              <td>-</td>
+              <td>falsche lowerCamelCase Worttrennung</td>
-              <td>-</td>
+              <td>urenkelVorname, greatGrandson</td>
             </tr>
             <tr>
               <td>x</td>
               <td>Geburtsdatum</td>
-              <td>-</td>
+              <td>nicht aussagekräftig</td>
-              <td>-</td>
+              <td>birthdate, dateOfBirth</td>
             </tr>
             <tr>
               <td>y</td>
               <td>Nummer der aktuellen Seite</td>
-              <td>-</td>
+              <td>nicht aussagekräftig</td>
-              <td>-</td>
+              <td>pageNumber</td>
             </tr>
             <tr>
               <td>d</td>
               <td>Dateiname</td>
-              <td>-</td>
+              <td>nicht aussagekräftig</td>
-              <td>-</td>
+              <td>fileName, filename</td>
             </tr>
 
             <tr>
               <td>faqUeberschrift</td>
               <td>Überschrift der Liste häufig gestellter Fragen</td>
               <td>-</td>
-              <td>-</td>
+              <td>faqHeadline</td>
             </tr>
 
             <tr>
               <td>menHoeh</td>
               <td>Höhe eines Menüs</td>
-              <td>-</td>
+              <td>keine gültige Abkürzung</td>
-              <td>-</td>
+              <td>menuHeight, navHeight</td>
             </tr>
 
             <tr>
               <td>strName</td>
               <td>Straßenname</td>
               <td>-</td>
-              <td>-</td>
+              <td>streetName</td>
             </tr>
 
             <tr>
               <td>wanf</td>
               <td>Wandfarbe</td>
               <td>-</td>
-              <td>-</td>
+              <td>wallPaint, <strong>wallColor</strong> colorOfWall</td>
             </tr>
 
             <tr>
               <td>PoStLeiTZaHl</td>
               <td>Postleitzahl</td>
-              <td>-</td>
+              <td>falsches CamelCase</td>
-              <td>-</td>
+              <td>zipCode</td>
             </tr>
             <tr>
               <td>PLZ</td>
               <td>Postleitzahl</td>
-              <td>-</td>
+              <td>nicht uppercase (Verwechslung mit Konfigurationsvariable)</td>
-              <td>-</td>
+              <td>zipCode</td>
             </tr>
 
             <tr>
               <td>plz</td>
               <td>Postleitzahl</td>
               <td>-</td>
-              <td>-</td>
+              <td>zipCode</td>
             </tr>
 
             <tr>
               <td>2.frage</td>
               <td>Die 2. Frage</td>
-              <td>-</td>
+              <td>syntaxfehler</td>
-              <td>-</td>
+              <td>secondQuestion, questionTwo, question2</td>
             </tr>
             <tr>
               <td>anzahl?</td>
               <td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
-              <td>-</td>
+              <td>syntaxfehler</td>
-              <td>-</td>
+              <td>articleCount, articleAmount, productAmount</td>
             </tr>
             <tr>
               <td>wichtige Meldung!</td>
               <td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
-              <td>-</td>
+              <td>syntaxfehler</td>
-              <td>-</td>
+              <td>importMessage, importantSystemMessage, alertMessage</td>
             </tr>
             <tr>
               <td>pi</td>
               <td>Die Zahl π (3.14…)</td>
-              <td>-</td>
+              <td>Konfigurationsvariable</td>
-              <td>-</td>
+              <td>Math.PI, PI</td>
             </tr>
           </tbody>
         </table>

01_grundlagen/uebungen/u12_prompt-lieblingsessen.html

@@ -43,6 +43,27 @@
       const outputAEl = document.querySelector('.output-a');
       const outputBEl = document.querySelector('.output-b');
       const outputCEl = document.querySelector('.output-c');
+
+      const lieblingsEssen = prompt('Was ist Ihr Lieblingsessen?');
+      const lieblingsGetraenk = prompt('Was ist Ihr Lieblingsgetränk?');
+
+      const text1 =
+        'Output 1: Ihr Lieblingsessen ist ' +
+        lieblingsEssen +
+        ' und Ihr Lieblingsgetränk ist ' +
+        lieblingsGetraenk +
+        '.';
+
+      // RECOMMENDED
+      const text2 = `Output 2: Ihr Lieblingsessen ist ${lieblingsEssen} und Ihr Lieblingsgetränk ist ${lieblingsGetraenk}.`;
+
+      console.log(text1);
+      console.log(text2);
+
+      outputAEl.textContent = text1;
+      outputBEl.textContent = text2;
+      outputCEl.innerHTML =
+        'Ihr Lieblingsessen ist ' + lieblingsEssen + `<br /> und Ihr Lieblingsgetränk ist ${lieblingsGetraenk}`;
     </script>
   </body>
 </html>

01_grundlagen/uebungen/u12b_prompt-lieblingsessen.html

@@ -34,14 +34,14 @@
 
         <form name="userFavs">
           <div class="row mb-3">
-            <div class="col-6">
+            <div class="col">
               <div class="form-floating">
                 <input type="text" class="form-control" name="userMeal" id="userMeal" />
                 <label for="userMeal">Lieblingsessen</label>
               </div>
             </div>
 
-            <div class="col-6">
+            <div class="col">
               <div class="form-floating">
                 <input type="text" class="form-control" name="userDrink" id="userDrink" />
                 <label for="userDrink">Lieblingsgetränk</label>
@@ -51,7 +51,7 @@
 
           <div class="row justify-content-center">
             <div class="col-4 text-center">
-              <button type="submit" class="btn btn-primary">Bestellen</button>
+              <button type="submit" class="btn btn-primary">Senden</button>
             </div>
           </div>
         </form>
@@ -71,11 +71,12 @@
       const userForm = document.forms.userFavs;
 
       userForm.addEventListener('submit', (e) => {
-        e.preventDefault();
+        e.preventDefault(); // Standardverhalten unterbinden
 
         const favMeal = userForm.userMeal.value;
         const favDrink = userForm.userDrink.value;
 
+        // Guard
         if (favMeal === '' || favDrink === '') {
           return;
         }
@@ -91,7 +92,7 @@
           favDrink +
           ' dein Lieblingsgetränk? ... Hm, naja, jedem das Seine...';
 
-        outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registiert. Sie werden jetzt zum Bezahlungsprozess weitergeführt. Die Ausgabe der gewünschten Speisen ist optional und nicht garantiert. Einen schönen Tag noch! Beep`;
+        outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registriert. Sie werden jetzt zum Bezahlungsprozess weitergeführt. Die Ausgabe der gewünschten Speisen ist optional und nicht garantiert. Einen schönen Tag noch! Beep`;
 
         outputCEl.innerText =
           `Mein Lieblingsmahl ist ${favMeal} und mein Lieblingsgetränk ist ` +