2026-07-13 14:42:35 +02:00
parent e0bd3930d9
commit 960451ae4a
63 changed files with 2974 additions and 0 deletions
--- a/02_advanced/projekte/js-advanced-dashboard-template/.gitignore
+++ b/02_advanced/projekte/js-advanced-dashboard-template/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/02_advanced/projekte/js-advanced-dashboard-template/README.md
+++ b/02_advanced/projekte/js-advanced-dashboard-template/README.md
@@ -0,0 +1,17 @@
+## License and terms of use
+
+© Web Professional Institute Inc. All rights reserved.
+
+This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
+
+**Usage Restrictions:**
+
+- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
+- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
+- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
+
+**Agreement & Rights:**
+
+As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
+
+For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.
--- a/02_advanced/projekte/js-advanced-dashboard-template/index.html
+++ b/02_advanced/projekte/js-advanced-dashboard-template/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Recipe Explorer Dashboard</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Recipe Explorer Dashboard</h1>
+
+    <div id="search-container">
+      <input
+        type="text"
+        id="search-input"
+        placeholder="Search for recipes by name..."
+      />
+      <button id="search-button">Search</button>
+    </div>
+
+    <div id="loading">Loading...</div>
+    <div id="error-message"></div>
+
+    <table id="recipes-table">
+      <thead>
+        <tr>
+          <th>Recipe Name</th>
+          <th>Cuisine</th>
+          <th>Preparation Time (mins)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Recipe data will be populated here -->
+      </tbody>
+    </table>
+
+    <!-- Modal for Recipe Details -->
+    <div id="recipe-modal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2 id="modal-title">Recipe Name</h2>
+        <img
+          id="modal-image"
+          src=""
+          alt="Recipe Image"
+          style="border-radius: 10px; max-height: 200px"
+        />
+        <p><strong>Cuisine:</strong> <span id="modal-category"></span></p>
+        <p>
+          <strong>Preparation Time:</strong> <span id="modal-time"></span> mins
+        </p>
+        <p><strong>Ingredients:</strong></p>
+        <ul id="modal-ingredients">
+          <!-- Ingredients will be populated here -->
+        </ul>
+        <p><strong>Instructions:</strong></p>
+        <p id="modal-instructions"></p>
+      </div>
+    </div>
+
+    <script src="scripts.js"></script>
+  </body>
+</html>
--- a/02_advanced/projekte/js-advanced-dashboard-template/scripts.js
+++ b/02_advanced/projekte/js-advanced-dashboard-template/scripts.js
@@ -0,0 +1,122 @@
+(() => {
+  // ===== DOM & VARIABLES =====
+  const RECIPES_URL = 'https://dummyjson.com/recipes';
+
+  const searchInput = document.querySelector('#search-input');
+  const searchButton = document.querySelector('#search-button');
+  const recipesTableBody = document.querySelector('#recipes-table tbody');
+  const loadingIndicator = document.querySelector('#loading');
+  const errorMessage = document.querySelector('#error-message');
+
+  const modal = document.querySelector('#recipe-modal');
+  const modalTitle = document.querySelector('#modal-title');
+  const modalImage = document.querySelector('#modal-image');
+  const modalCategory = document.querySelector('#modal-category');
+  const modalTime = document.querySelector('#modal-time');
+  const modalIngredients = document.querySelector('#modal-ingredients');
+  const modalInstructions = document.querySelector('#modal-instructions');
+  const closeModal = document.querySelector('.close');
+
+  let allRecipes = [];
+
+  // ===== INIT =====
+  const init = () => {
+    // TODO: Fetch and display all recipes on initial load
+
+    // Event Listeners
+    closeModal.addEventListener('click', closeModalEvent);
+    window.addEventListener('click', windowClickEvent);
+  };
+
+  // ===== EVENT LISTENERS =====
+  const searchButtonEvent = () => {
+    const query = searchInput.value.trim().toLowerCase();
+    if (query !== '') {
+      // TODO: Implement search functionality
+    } else {
+      // TODO: Display all recipes if search input is empty
+    }
+  };
+
+  // Close Modal Event
+  const closeModalEvent = () => {
+    modal.style.display = 'none';
+  };
+
+  // Close Modal when clicking outside the modal content
+  const windowClickEvent = (event) => {
+    if (event.target == modal) {
+      modal.style.display = 'none';
+    }
+  };
+
+  // ===== FUNCTIONS =====
+  // Fetches all recipes from the API and displays them.
+  const fetchAndDisplayRecipes = async () => {
+    showLoading(true);
+    showError(false, '');
+
+    try {
+      // TODO: Fetch data from API
+    } catch (error) {
+      console.error(error);
+      showError(true, 'An error occurred while fetching recipes.');
+    } finally {
+      showLoading(false);
+    }
+  };
+
+  // Searches for recipes by name and displays the results.
+  const searchRecipes = async (query) => {
+    showLoading(true);
+    showError(false, '');
+
+    try {
+      // TODO: Search for recipes by name
+    } catch (error) {
+      console.error(error);
+      showError(true, 'An error occurred while searching for recipes.');
+    } finally {
+      showLoading(false);
+    }
+  };
+
+  // Displays a list of recipes in the table.
+  const displayRecipes = (recipes) => {
+    clearTable();
+
+    // TODO: Iterate over the recipes and display them in the table
+  };
+
+  // Displays detailed information about a selected recipe in a modal.
+  const showRecipeDetails = (recipe) => {
+    // TODO: Calculate total preparation time
+    // TODO: Set image source
+    // TODO: Populate ingredients
+    // TODO: Show modal
+  };
+
+  // Shows or hides the loading indicator.
+  const showLoading = (show) => {
+    loadingIndicator.style.display = show ? 'block' : 'none';
+  };
+
+  // Displays or hides an error message.
+  const showError = (show, message) => {
+    if (show) {
+      errorMessage.textContent = message;
+      errorMessage.style.display = 'block';
+    } else {
+      errorMessage.textContent = '';
+      errorMessage.style.display = 'none';
+    }
+  };
+
+  // Clears the recipes table.
+  const clearTable = () => {
+    recipesTableBody.innerHTML = '';
+  };
+
+  // ===== CALL INIT =====
+  init();
+})();
--- a/02_advanced/projekte/js-advanced-dashboard-template/styles.css
+++ b/02_advanced/projekte/js-advanced-dashboard-template/styles.css
@@ -0,0 +1,124 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+
+h1 {
+  text-align: center;
+  color: #4d7c0f;
+}
+
+#search-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#search-input {
+  width: 300px;
+  padding: 10px;
+  font-size: 16px;
+  border: 2px solid #65a30d;
+  border-radius: 5px;
+}
+
+#search-button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #4d7c0f;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+#search-button:hover {
+  background-color: #65a30d;
+  transition: 0.1s;
+}
+
+#recipes-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  max-width: 1000px;
+  margin-inline: auto;
+}
+
+#recipes-table th,
+#recipes-table td {
+  border: 1px solid #ddd;
+  padding: 12px;
+  text-align: left;
+}
+
+#recipes-table th {
+  background-color: #4d7c0f;
+  color: white;
+}
+
+#recipes-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+#recipes-table tr:hover {
+  background-color: #ecfccb;
+  cursor: pointer;
+}
+
+/* Modal styling */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+  background-color: #fff;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 60%;
+  border-radius: 10px;
+  position: relative;
+}
+
+.close {
+  color: #aaa;
+  position: absolute;
+  top: 15px;
+  right: 25px;
+  font-size: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+}
+
+/* Loading Indicator */
+#loading {
+  display: none;
+  text-align: center;
+  font-size: 18px;
+  color: #4d7c0f;
+}
+
+/* Error Message */
+#error-message {
+  display: none;
+  text-align: center;
+  color: red;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
--- a/02_advanced/projekte/js-advanced-javascript-cafe-template/.gitignore
+++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/02_advanced/projekte/js-advanced-javascript-cafe-template/README.md
+++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/README.md
@@ -0,0 +1,17 @@
+## License and terms of use
+
+© Web Professional Institute Inc. All rights reserved.
+
+This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
+
+**Usage Restrictions:**
+
+- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
+- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
+- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
+
+**Agreement & Rights:**
+
+As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
+
+For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.
--- a/02_advanced/projekte/js-advanced-javascript-cafe-template/index.js
+++ b/02_advanced/projekte/js-advanced-javascript-cafe-template/index.js
@@ -0,0 +1,76 @@
+'use strict';
+
+const menu = [
+  {
+    category: 'Beverages',
+    items: [
+      { name: 'Coffee', price: 3.5 },
+      { name: 'Tea', price: 2.5 },
+      { name: 'Juice', price: 4 },
+    ],
+  },
+  {
+    category: 'Pastries',
+    items: [
+      { name: 'Croissant', price: 2.75 },
+      { name: 'Muffin', price: 2.5 },
+      { name: 'Bagel', price: 2.25 },
+    ],
+  },
+  {
+    category: 'Sandwiches',
+    items: [
+      { name: 'Ham Sandwich', price: 5.5 },
+      { name: 'Veggie Sandwich', price: 5 },
+      { name: 'Turkey Sandwich', price: 6 },
+    ],
+  },
+];
+
+// ADD YOUR CODE BELOW
+const listMenuItems = (menu) => {};
+
+const calculateAveragePrice = (menu) => {};
+
+const findItemsByCategory = (menu, categoryName) => {};
+
+// ===== TEST CASES (DO NOT MODIFY) =====
+
+// 1. List All Menu Items
+const menuItems = listMenuItems(menu);
+console.log('All Menu Items:\n', menuItems);
+
+// 2. Calculate Average Price
+const averagePrice = calculateAveragePrice(menu);
+console.log('Average Price of All Items:', averagePrice);
+
+// 3. Find Items by Category
+const searchCategory = 'Pastries';
+const pastries = findItemsByCategory(menu, searchCategory);
+console.log(`Items in "${searchCategory}" \nItems:`, pastries);
+
+/*
+===== EXPECTED OUTPUT =====
+
+All Menu Items:
+[
+  'Coffee',
+  'Tea',
+  'Juice',
+  'Croissant',
+  'Muffin',
+  'Bagel',
+  'Ham Sandwich',
+  'Veggie Sandwich',
+  'Turkey Sandwich'
+]
+
+Average Price of All Items: 3.78
+
+Items in "Pastries" 
+Items: [
+  { name: 'Croissant', price: 2.75 },
+  { name: 'Muffin', price: 2.5 },
+  { name: 'Bagel', price: 2.25 }
+]
+*/
--- a/03_dom.zip
+++ b/03_dom.zip
--- a/03_dom/uebungen/u01_almost-quotes/assets/css/styles.css
+++ b/03_dom/uebungen/u01_almost-quotes/assets/css/styles.css
@@ -0,0 +1,368 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html,
+body,
+a,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+p,
+img,
+strong,
+ul,
+li,
+table,
+th,
+td,
+tr {
+  margin: 0px;
+  padding: 0px;
+  border: 0px none;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: inherit;
+  font-variant: inherit;
+  text-decoration: none;
+  table-layout: inherit;
+}
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+  font-size: 100%;
+  background-color: #fffef7;
+}
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: normal;
+  color: black;
+  margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+  background: url(../img/js_header.png) left top no-repeat transparent;
+  background-size: cover;
+  height: 250px;
+  min-width: 850px;
+}
+
+header:after {
+  content: ' ';
+  display: block;
+  height: 250px;
+  background: rgba(255, 254, 247, 0);
+  background: -moz-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -webkit-gradient(
+    left top,
+    left bottom,
+    color-stop(0%, rgba(255, 254, 247, 0)),
+    color-stop(22%, rgba(255, 254, 247, 0.55)),
+    color-stop(42%, rgba(255, 254, 247, 0.7)),
+    color-stop(43%, rgba(255, 254, 247, 0.71)),
+    color-stop(61%, rgba(255, 254, 247, 0.78)),
+    color-stop(75%, rgba(255, 254, 247, 0.92)),
+    color-stop(87%, rgba(255, 254, 247, 1)),
+    color-stop(100%, rgba(255, 254, 247, 1))
+  );
+  background: -webkit-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -o-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: -ms-linear-gradient(
+    top,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 254, 247, 0) 0%,
+    rgba(255, 254, 247, 0.55) 22%,
+    rgba(255, 254, 247, 0.7) 42%,
+    rgba(255, 254, 247, 0.71) 43%,
+    rgba(255, 254, 247, 0.78) 61%,
+    rgba(255, 254, 247, 0.92) 75%,
+    rgba(255, 254, 247, 1) 87%,
+    rgba(255, 254, 247, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+  width: 70%;
+  margin: 3rem auto;
+  min-width: 850px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* ---------------- Content ------------------- */
+
+h1 {
+  color: #93412b;
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+h2 {
+  color: #93412b;
+  font-size: 2.5em;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #93412b;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+p {
+  line-height: 15px;
+  margin-bottom: 15px;
+  line-height: 1.7em;
+}
+
+.cited {
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+.u {
+  text-decoration: underline;
+}
+.b {
+  font-weight: bold;
+}
+.i {
+  font-style: italic;
+}
+.align_right {
+  text-align: right;
+}
+.align_left {
+  text-align: left;
+  margin-right: 10px;
+}
+.align_center {
+  text-align: center;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.clear_both {
+  clear: both;
+}
+strong {
+  font-weight: bold;
+}
+.special {
+  color: #b7595b;
+  font-weight: bold;
+}
+.keyword {
+  color: #db6f50;
+  font-weight: bold;
+  font-style: italic;
+}
+.gray {
+  color: gray;
+}
+
+/* Links */
+main a:link,
+main a:visited {
+  color: #eb690b;
+  font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {
+  color: #eb690b;
+}
+
+ul {
+  list-style-position: outside;
+  margin-bottom: 20px;
+  padding-left: 22px;
+}
+
+ol {
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+
+li {
+  line-height: 1.4em;
+}
+
+/* ------- Article ------- */
+
+h1 {
+  color: #93412b;
+  font-size: 2.7em;
+  margin-bottom: 20px;
+}
+
+#buy_form input[type='button'] {
+  display: inline-block;
+  padding: 1px 20px 3px 20px;
+  background-color: #93412b;
+  color: white;
+  border: 1px solid white;
+  font-size: 1em;
+  height: 32px;
+}
+
+#buy_form input[type='button']:hover {
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+}
+
+#buy_form select {
+  display: inline-block;
+  font-size: 1em;
+  background-color: white;
+  color: #93412b;
+  border: 1px solid #93412b;
+  height: 32px;
+}
+
+/* ------- Chat ------- */
+
+#chat {
+  width: 100%;
+  background-color: white;
+  border: 1px solid #9c352f;
+  height: 20rem;
+  position: relative;
+}
+
+#chat_window {
+  background-color: white;
+  width: 85%;
+  float: left;
+  height: 95%;
+}
+
+#chat_history {
+  position: absolute;
+  bottom: 8%;
+  max-height: 92%;
+  padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+  font-size: 0.6em;
+  margin: 0;
+}
+
+#chat_text {
+  height: 8%;
+  position: absolute;
+  bottom: 0;
+  width: 85%;
+}
+
+#chat_text input {
+  width: 98%;
+  display: block;
+  margin: auto;
+}
+
+#chat_members {
+  list-style-type: none;
+  height: 100%;
+  width: 15%;
+  margin-left: 85%;
+  border-left: 1px solid #9c352f;
+  text-align: right;
+  box-sizing: border-box;
+  min-width: 100px;
+  font-size: 0.8em;
+  padding-top: 5px;
+}
+
+#chat_members li {
+  line-height: 1.2em;
+  padding: 5px 10px 2px 15px;
+}
+
+#chat_members .highlighted {
+  background-color: #c14d45;
+  color: white;
+}
+.chat_member {
+  font-weight: bold;
+}
+.chat_member1 {
+  color: #3626c8;
+}
+.chat_member2 {
+  color: #e38d0b;
+}
+
+#member_search {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  height: 8%;
+}
+
+#member_search input {
+  width: 88%;
+  display: block;
+  margin: auto;
+  text-align: right;
+}
--- a/03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon
+++ b/03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon
--- a/03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png
+++ b/03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png
--- a/03_dom/uebungen/u01_almost-quotes/index.html
+++ b/03_dom/uebungen/u01_almost-quotes/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 1: Almost Famous Quotes 1</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/styles.css" />
+  </head>
+  <body>
+    <header></header>
+
+    <main>
+      <h1>Famous Quotes</h1>
+
+      <blockquote></blockquote>
+    </main>
+    <script>
+      'use strict';
+
+      // 1
+      // Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite  in 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:
+
+      // <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>
--- a/03_dom/uebungen/u02_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u02_tasse-01001/assets/css/styles.css
@@ -0,0 +1,266 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
+	margin: 0px;
+	padding: 0px;
+	border: 0px none;
+	font-weight: normal;
+	font-style: inherit;
+	font-family: inherit;
+	font-variant: inherit;
+	text-decoration: none;
+	table-layout: inherit;
+}
+
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+    font-size: 100%;
+    background-color: #fffef7;
+}
+
+body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 1.2em;
+		font-weight: normal;
+		color: black;
+		margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+
+    background: url(../img/js_header.png) left top no-repeat transparent;
+    background-size: cover;
+    height: 250px;
+    min-width: 850px;
+}
+
+header:after {
+    content: ' ';
+    display: block;
+    height: 250px;
+background: rgba(255,254,247,0);
+background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
+background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+    width: 70%;
+    margin: 3rem auto;
+    min-width: 850px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+
+
+
+
+/* ---------------- Content ------------------- */
+
+
+
+h1 {
+    color: #93412b;
+    font-size: 3em;
+	margin-bottom: 20px;
+	font-weight: bold;
+}
+
+
+h2 {
+    color: #93412b;
+	font-size: 2.5em;
+	margin-bottom: 15px;
+}
+
+h3 {
+    color: #93412b;
+	font-size: 2em;
+	margin-bottom: 10px;
+}
+
+p {
+	line-height: 15px;
+	margin-bottom: 15px;
+	line-height: 1.7em;
+}
+
+.cited {
+    font-style: italic;
+    font-size: .8em;
+}
+
+.u {text-decoration: underline;}
+.b {font-weight: bold;}
+.i {font-style: italic}
+.align_right {text-align: right;}
+.align_left {text-align: left; margin-right: 10px;}
+.align_center {text-align: center;}
+.float_left {float: left;}
+.float_right {float: right;}
+.clear_both {clear: both;}
+strong {font-weight: bold;}
+.special { color: #b7595b; font-weight: bold; }
+.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
+.gray {color: gray;}
+
+/* Links */
+main a:link,
+main a:visited {
+	color: #eb690b;
+	font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {color: #eb690b;}
+
+ul {
+    list-style-position: outside;
+    margin-bottom: 20px;
+    padding-left: 22px;
+}
+
+ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+li {
+    line-height: 1.4em;
+}
+
+
+/* ------- Article ------- */
+
+
+h1 {
+    color: #93412b;
+    font-size: 2.7em;
+	margin-bottom: 20px;
+}
+
+#buy_form input[type=button] {
+    display: inline-block;
+    padding: 1px 20px 3px 20px;
+    background-color: #93412b;
+    color: white;
+    border: 1px solid white;
+    font-size: 1em;
+    height: 32px;
+}
+
+#buy_form input[type=button]:hover {
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+}
+
+#buy_form select {
+    display: inline-block;
+    font-size: 1em;
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+    height: 32px;
+}
+
+
+/* ------- Chat ------- */
+
+
+#chat {
+    width: 100%;
+    background-color: white;
+    border: 1px solid #9c352f;
+    height: 20rem;
+    position: relative;
+
+}
+
+#chat_window {
+    background-color: white;
+    width: 85%;
+    float: left;
+    height: 95%;
+}
+
+#chat_history {
+    position: absolute;
+    bottom: 8%;
+    max-height: 92%;
+    padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+    font-size: .6em;
+    margin: 0;
+}
+
+#chat_text {
+    height: 8%;
+    position: absolute;
+    bottom: 0;
+    width: 85%;
+}
+
+#chat_text input {
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+#chat_members {
+    list-style-type: none;
+    height: 100%;
+    width: 15%;
+    margin-left: 85%;
+    border-left: 1px solid #9c352f;
+    text-align: right;
+    box-sizing: border-box;
+    min-width: 100px;
+    font-size: .8em;
+    padding-top: 5px;
+
+}
+
+#chat_members li {
+    line-height: 1.2em;
+    padding: 5px 10px 2px 15px;
+}
+
+
+#chat_members .highlighted {
+    background-color: #c14d45;
+    color: white;
+}
+.chat_member {font-weight: bold;}
+.chat_member1 { color: #3626c8;}
+.chat_member2 { color: #e38d0b;}
+
+#member_search {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 15%;
+    height: 8%;
+}
+
+#member_search input {
+    width: 88%;
+    display: block;
+    margin: auto;
+    text-align: right;
+}
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u02_tasse-01001/index.html
+++ b/03_dom/uebungen/u02_tasse-01001/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      (() => {
+        // Tippen Sie eine Abfrage in die Konsole, die:
+        // 1. das h1-Element findet.
+        // 2.das Element mit der id buy_form findet.
+        // 3. das Element mit der id product_img findet.
+      })();
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/u03_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u03_tasse-01001/assets/css/styles.css
@@ -0,0 +1,266 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
+	margin: 0px;
+	padding: 0px;
+	border: 0px none;
+	font-weight: normal;
+	font-style: inherit;
+	font-family: inherit;
+	font-variant: inherit;
+	text-decoration: none;
+	table-layout: inherit;
+}
+
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+    font-size: 100%;
+    background-color: #fffef7;
+}
+
+body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 1.2em;
+		font-weight: normal;
+		color: black;
+		margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+
+    background: url(../img/js_header.png) left top no-repeat transparent;
+    background-size: cover;
+    height: 250px;
+    min-width: 850px;
+}
+
+header:after {
+    content: ' ';
+    display: block;
+    height: 250px;
+background: rgba(255,254,247,0);
+background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
+background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+    width: 70%;
+    margin: 3rem auto;
+    min-width: 850px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+
+
+
+
+/* ---------------- Content ------------------- */
+
+
+
+h1 {
+    color: #93412b;
+    font-size: 3em;
+	margin-bottom: 20px;
+	font-weight: bold;
+}
+
+
+h2 {
+    color: #93412b;
+	font-size: 2.5em;
+	margin-bottom: 15px;
+}
+
+h3 {
+    color: #93412b;
+	font-size: 2em;
+	margin-bottom: 10px;
+}
+
+p {
+	line-height: 15px;
+	margin-bottom: 15px;
+	line-height: 1.7em;
+}
+
+.cited {
+    font-style: italic;
+    font-size: .8em;
+}
+
+.u {text-decoration: underline;}
+.b {font-weight: bold;}
+.i {font-style: italic}
+.align_right {text-align: right;}
+.align_left {text-align: left; margin-right: 10px;}
+.align_center {text-align: center;}
+.float_left {float: left;}
+.float_right {float: right;}
+.clear_both {clear: both;}
+strong {font-weight: bold;}
+.special { color: #b7595b; font-weight: bold; }
+.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
+.gray {color: gray;}
+
+/* Links */
+main a:link,
+main a:visited {
+	color: #eb690b;
+	font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {color: #eb690b;}
+
+ul {
+    list-style-position: outside;
+    margin-bottom: 20px;
+    padding-left: 22px;
+}
+
+ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+li {
+    line-height: 1.4em;
+}
+
+
+/* ------- Article ------- */
+
+
+h1 {
+    color: #93412b;
+    font-size: 2.7em;
+	margin-bottom: 20px;
+}
+
+#buy_form input[type=button] {
+    display: inline-block;
+    padding: 1px 20px 3px 20px;
+    background-color: #93412b;
+    color: white;
+    border: 1px solid white;
+    font-size: 1em;
+    height: 32px;
+}
+
+#buy_form input[type=button]:hover {
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+}
+
+#buy_form select {
+    display: inline-block;
+    font-size: 1em;
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+    height: 32px;
+}
+
+
+/* ------- Chat ------- */
+
+
+#chat {
+    width: 100%;
+    background-color: white;
+    border: 1px solid #9c352f;
+    height: 20rem;
+    position: relative;
+
+}
+
+#chat_window {
+    background-color: white;
+    width: 85%;
+    float: left;
+    height: 95%;
+}
+
+#chat_history {
+    position: absolute;
+    bottom: 8%;
+    max-height: 92%;
+    padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+    font-size: .6em;
+    margin: 0;
+}
+
+#chat_text {
+    height: 8%;
+    position: absolute;
+    bottom: 0;
+    width: 85%;
+}
+
+#chat_text input {
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+#chat_members {
+    list-style-type: none;
+    height: 100%;
+    width: 15%;
+    margin-left: 85%;
+    border-left: 1px solid #9c352f;
+    text-align: right;
+    box-sizing: border-box;
+    min-width: 100px;
+    font-size: .8em;
+    padding-top: 5px;
+
+}
+
+#chat_members li {
+    line-height: 1.2em;
+    padding: 5px 10px 2px 15px;
+}
+
+
+#chat_members .highlighted {
+    background-color: #c14d45;
+    color: white;
+}
+.chat_member {font-weight: bold;}
+.chat_member1 { color: #3626c8;}
+.chat_member2 { color: #e38d0b;}
+
+#member_search {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 15%;
+    height: 8%;
+}
+
+#member_search input {
+    width: 88%;
+    display: block;
+    margin: auto;
+    text-align: right;
+}
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u03_tasse-01001/index.html
+++ b/03_dom/uebungen/u03_tasse-01001/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      (() => {
+        // alle li-Elemente findet.
+        // alle h2-Elemente findet.
+        // alle Elemente mit der Klasse special findet.
+        // alle li-Elemente mit der Klasse keyword findet.
+        // alle span-Elemente mit der Klasse special findet.
+        // alle Elemente findet, die die Klassen i UND b haben.
+      })();
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/u04_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u04_tasse-01001/assets/css/styles.css
@@ -0,0 +1,266 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
+	margin: 0px;
+	padding: 0px;
+	border: 0px none;
+	font-weight: normal;
+	font-style: inherit;
+	font-family: inherit;
+	font-variant: inherit;
+	text-decoration: none;
+	table-layout: inherit;
+}
+
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+    font-size: 100%;
+    background-color: #fffef7;
+}
+
+body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 1.2em;
+		font-weight: normal;
+		color: black;
+		margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+
+    background: url(../img/js_header.png) left top no-repeat transparent;
+    background-size: cover;
+    height: 250px;
+    min-width: 850px;
+}
+
+header:after {
+    content: ' ';
+    display: block;
+    height: 250px;
+background: rgba(255,254,247,0);
+background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
+background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+    width: 70%;
+    margin: 3rem auto;
+    min-width: 850px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+
+
+
+
+/* ---------------- Content ------------------- */
+
+
+
+h1 {
+    color: #93412b;
+    font-size: 3em;
+	margin-bottom: 20px;
+	font-weight: bold;
+}
+
+
+h2 {
+    color: #93412b;
+	font-size: 2.5em;
+	margin-bottom: 15px;
+}
+
+h3 {
+    color: #93412b;
+	font-size: 2em;
+	margin-bottom: 10px;
+}
+
+p {
+	line-height: 15px;
+	margin-bottom: 15px;
+	line-height: 1.7em;
+}
+
+.cited {
+    font-style: italic;
+    font-size: .8em;
+}
+
+.u {text-decoration: underline;}
+.b {font-weight: bold;}
+.i {font-style: italic}
+.align_right {text-align: right;}
+.align_left {text-align: left; margin-right: 10px;}
+.align_center {text-align: center;}
+.float_left {float: left;}
+.float_right {float: right;}
+.clear_both {clear: both;}
+strong {font-weight: bold;}
+.special { color: #b7595b; font-weight: bold; }
+.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
+.gray {color: gray;}
+
+/* Links */
+main a:link,
+main a:visited {
+	color: #eb690b;
+	font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {color: #eb690b;}
+
+ul {
+    list-style-position: outside;
+    margin-bottom: 20px;
+    padding-left: 22px;
+}
+
+ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+li {
+    line-height: 1.4em;
+}
+
+
+/* ------- Article ------- */
+
+
+h1 {
+    color: #93412b;
+    font-size: 2.7em;
+	margin-bottom: 20px;
+}
+
+#buy_form input[type=button] {
+    display: inline-block;
+    padding: 1px 20px 3px 20px;
+    background-color: #93412b;
+    color: white;
+    border: 1px solid white;
+    font-size: 1em;
+    height: 32px;
+}
+
+#buy_form input[type=button]:hover {
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+}
+
+#buy_form select {
+    display: inline-block;
+    font-size: 1em;
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+    height: 32px;
+}
+
+
+/* ------- Chat ------- */
+
+
+#chat {
+    width: 100%;
+    background-color: white;
+    border: 1px solid #9c352f;
+    height: 20rem;
+    position: relative;
+
+}
+
+#chat_window {
+    background-color: white;
+    width: 85%;
+    float: left;
+    height: 95%;
+}
+
+#chat_history {
+    position: absolute;
+    bottom: 8%;
+    max-height: 92%;
+    padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+    font-size: .6em;
+    margin: 0;
+}
+
+#chat_text {
+    height: 8%;
+    position: absolute;
+    bottom: 0;
+    width: 85%;
+}
+
+#chat_text input {
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+#chat_members {
+    list-style-type: none;
+    height: 100%;
+    width: 15%;
+    margin-left: 85%;
+    border-left: 1px solid #9c352f;
+    text-align: right;
+    box-sizing: border-box;
+    min-width: 100px;
+    font-size: .8em;
+    padding-top: 5px;
+
+}
+
+#chat_members li {
+    line-height: 1.2em;
+    padding: 5px 10px 2px 15px;
+}
+
+
+#chat_members .highlighted {
+    background-color: #c14d45;
+    color: white;
+}
+.chat_member {font-weight: bold;}
+.chat_member1 { color: #3626c8;}
+.chat_member2 { color: #e38d0b;}
+
+#member_search {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 15%;
+    height: 8%;
+}
+
+#member_search input {
+    width: 88%;
+    display: block;
+    margin: auto;
+    text-align: right;
+}
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u04_tasse-01001/index.html
+++ b/03_dom/uebungen/u04_tasse-01001/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      '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.
+        // 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
+        // 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
+        // 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
+      })();
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/u05_tasse-01001/assets/css/styles.css
+++ b/03_dom/uebungen/u05_tasse-01001/assets/css/styles.css
@@ -0,0 +1,266 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
+	margin: 0px;
+	padding: 0px;
+	border: 0px none;
+	font-weight: normal;
+	font-style: inherit;
+	font-family: inherit;
+	font-variant: inherit;
+	text-decoration: none;
+	table-layout: inherit;
+}
+
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+    font-size: 100%;
+    background-color: #fffef7;
+}
+
+body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 1.2em;
+		font-weight: normal;
+		color: black;
+		margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+
+    background: url(../img/js_header.png) left top no-repeat transparent;
+    background-size: cover;
+    height: 250px;
+    min-width: 850px;
+}
+
+header:after {
+    content: ' ';
+    display: block;
+    height: 250px;
+background: rgba(255,254,247,0);
+background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
+background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+    width: 70%;
+    margin: 3rem auto;
+    min-width: 850px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+
+
+
+
+/* ---------------- Content ------------------- */
+
+
+
+h1 {
+    color: #93412b;
+    font-size: 3em;
+	margin-bottom: 20px;
+	font-weight: bold;
+}
+
+
+h2 {
+    color: #93412b;
+	font-size: 2.5em;
+	margin-bottom: 15px;
+}
+
+h3 {
+    color: #93412b;
+	font-size: 2em;
+	margin-bottom: 10px;
+}
+
+p {
+	line-height: 15px;
+	margin-bottom: 15px;
+	line-height: 1.7em;
+}
+
+.cited {
+    font-style: italic;
+    font-size: .8em;
+}
+
+.u {text-decoration: underline;}
+.b {font-weight: bold;}
+.i {font-style: italic}
+.align_right {text-align: right;}
+.align_left {text-align: left; margin-right: 10px;}
+.align_center {text-align: center;}
+.float_left {float: left;}
+.float_right {float: right;}
+.clear_both {clear: both;}
+strong {font-weight: bold;}
+.special { color: #b7595b; font-weight: bold; }
+.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
+.gray {color: gray;}
+
+/* Links */
+main a:link,
+main a:visited {
+	color: #eb690b;
+	font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {color: #eb690b;}
+
+ul {
+    list-style-position: outside;
+    margin-bottom: 20px;
+    padding-left: 22px;
+}
+
+ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+li {
+    line-height: 1.4em;
+}
+
+
+/* ------- Article ------- */
+
+
+h1 {
+    color: #93412b;
+    font-size: 2.7em;
+	margin-bottom: 20px;
+}
+
+#buy_form input[type=button] {
+    display: inline-block;
+    padding: 1px 20px 3px 20px;
+    background-color: #93412b;
+    color: white;
+    border: 1px solid white;
+    font-size: 1em;
+    height: 32px;
+}
+
+#buy_form input[type=button]:hover {
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+}
+
+#buy_form select {
+    display: inline-block;
+    font-size: 1em;
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+    height: 32px;
+}
+
+
+/* ------- Chat ------- */
+
+
+#chat {
+    width: 100%;
+    background-color: white;
+    border: 1px solid #9c352f;
+    height: 20rem;
+    position: relative;
+
+}
+
+#chat_window {
+    background-color: white;
+    width: 85%;
+    float: left;
+    height: 95%;
+}
+
+#chat_history {
+    position: absolute;
+    bottom: 8%;
+    max-height: 92%;
+    padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+    font-size: .6em;
+    margin: 0;
+}
+
+#chat_text {
+    height: 8%;
+    position: absolute;
+    bottom: 0;
+    width: 85%;
+}
+
+#chat_text input {
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+#chat_members {
+    list-style-type: none;
+    height: 100%;
+    width: 15%;
+    margin-left: 85%;
+    border-left: 1px solid #9c352f;
+    text-align: right;
+    box-sizing: border-box;
+    min-width: 100px;
+    font-size: .8em;
+    padding-top: 5px;
+
+}
+
+#chat_members li {
+    line-height: 1.2em;
+    padding: 5px 10px 2px 15px;
+}
+
+
+#chat_members .highlighted {
+    background-color: #c14d45;
+    color: white;
+}
+.chat_member {font-weight: bold;}
+.chat_member1 { color: #3626c8;}
+.chat_member2 { color: #e38d0b;}
+
+#member_search {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 15%;
+    height: 8%;
+}
+
+#member_search input {
+    width: 88%;
+    display: block;
+    margin: auto;
+    text-align: right;
+}
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/logo.png
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/logo.png
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif
--- a/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
+++ b/03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg
--- a/03_dom/uebungen/u05_tasse-01001/index.html
+++ b/03_dom/uebungen/u05_tasse-01001/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>010010000100111101010100</title>
+    <meta name="description" content="JavaScript. HTML mühelos manipuliert" />
+
+    <link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1 class="article">
+        Hot Binary Heat Changing Mug
+        <span class="keyword">"010010000100111101010100"</span>
+      </h1>
+
+      <img
+        alt="Hot Binary Heat Changing Mug"
+        src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
+        class="float_left"
+        id="product_img" />
+
+      <h2>Description</h2>
+
+      <p>
+        Numbers make up
+        <span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
+        the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
+        <span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
+        there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
+        totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
+        tells us which state our mug is in. In binary!
+      </p>
+
+      <p>
+        See, the
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
+        liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
+        <span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
+        your
+        <span class="keyword">Hot Binary Heat Changing Mug</span>
+        could just be paying you a compliment. Cheeky, mug.
+      </p>
+
+      <p>
+        <img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
+      </p>
+
+      <h2>Product Specifications</h2>
+
+      <ul id="product_specification">
+        <li class="keyword">Hot Binary Heat Changing Mug</li>
+        <li>
+          As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
+          010010000100111101010100)
+        </li>
+        <li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
+        <li>
+          Care Instructions:
+          <span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
+        </li>
+        <li>Materials: Ceramic</li>
+        <li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
+      </ul>
+
+      <h3>You wanna buy it?</h3>
+
+      <p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
+
+      <ol class="model" data-model="LDV73C-X3">
+        <li>Select how many items do you want.</li>
+        <li>Press "buy".</li>
+      </ol>
+
+      <form id="buy_form">
+        <select>
+          <option>1 item</option>
+          <option>2 items</option>
+          <option>3 items</option>
+          <option>4 items</option>
+        </select>
+        <input type="button" value="buy" />
+        <!-- <button type="button">buy</button> -->
+      </form>
+    </main>
+
+    <footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
+
+    <script>
+      'use strict';
+      (() => {
+        // Ü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.
+        // 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
+        // 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
+        // 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
+        // 5. alle zweiten Listenpunkte zu finden.
+        // 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
+      })();
+    </script>
+  </body>
+</html>
--- a/03_dom/uebungen/uebungen-1-5.zip
+++ b/03_dom/uebungen/uebungen-1-5.zip
--- a/03_dom/unterricht/tag21/01_vorwort/vorwort.md
+++ b/03_dom/unterricht/tag21/01_vorwort/vorwort.md
@@ -0,0 +1,22 @@
+| Bezeichnung | Abkürzung                             |
+| ----------- | ------------------------------------- |
+| DOM         | Document Object Model                 |
+| API         | Application Programming Interface     |
+| ROCA        | Resource-Oriented Client Architecture |
+| SEO         |  Search Engine Optimization           |
+| SEA         | Search Engine Advertising             |
+| Vanilla JS  | reines JavaScript ohne Framework      |
+
+## Links: Warum kein jQuery mehr?
+
+- <http://youmightnotneedjquery.com>
+- <http://blog.garstasio.com/you-dont-need-jquery>
+- <https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery>
+- <http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery>
+
+## Links: Warum jQuery yeah!
+
+- <https://hackernoon.com/i-still-love-jquery-and-you-should-too-3114f33f249e>
+- <https://remysharp.com/2017/12/15/is-jquery-still-relevant>
+- <https://trends.builtwith.com/javascript/jQuery>
+- <https://learn.onemonth.com/why-you-should-learn-jquery-before-javascript/>
--- a/03_dom/unterricht/tag21/02_document-query-selector/index.html
+++ b/03_dom/unterricht/tag21/02_document-query-selector/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>document.querySelector() - Hello World</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>document.querySelector() - Hello <em>World</em></h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const h1El = document.querySelector('h1');
+
+      h1El.innerHTML = 'Hello <em>DOM</em>';
+
+      console.log(h1El); // => <h1>Hello <em>DOM</em></h1>
+
+      console.log(typeof h1El); //=> "object" vom Typ Node-Objekt, spezifisch ein HTMLHeadlineElement
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/03_css-selektoren/index.html
+++ b/03_dom/unterricht/tag21/03_css-selektoren/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Selektoren</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+    <style>
+      /* universal Selektor (*) */
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      /* type selector (HTMLElement) */
+      h1 {
+        color: tomato;
+      }
+
+      /* id selector (#) */
+      #image-main {
+        border: 10px solid #efefef;
+        border-radius: 12px;
+        margin: 1rem;
+      }
+
+      /* class selector (.) */
+      .box {
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        background-color: tomato;
+        border: 3px solid #222;
+        padding: 1rem;
+        text-align: center;
+      }
+
+      /* Menge von Selektoren (,) */
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Selektoren</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto ea id quos dolor accusantium ipsum at
+          natus quidem commodi dolorem aspernatur a porro, vitae cumque. Soluta temporibus quis facilis?
+        </p>
+        <div class="box">Box</div>
+        <img src="https://picsum.photos/seed/picsum/900/400" alt="" id="image-main" />
+        <img src="https://dummyimage.com/900x400/000/f90.jpg" alt="image" />
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // document.querySelector(/* CSS SELEKTOR AUSSER PSEUDOELEMENTE */)
+      console.log(document.querySelector('h1'));
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/04_document-query-selector-all/index.html
+++ b/03_dom/unterricht/tag21/04_document-query-selector-all/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>document.querySelectorAll()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>document.querySelectorAll()</h1>
+        <hr />
+        <h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
+        <h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
+        <h2 class="news">Modi ipsum, velit rem ipsam.</h2>
+        <h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const h1El = document.querySelector('h1');
+
+      const h2Els = document.querySelectorAll('h2');
+
+      // const h2Array = [...document.querySelectorAll('h2')];
+      const h2Array = Array.from(document.querySelectorAll('h2'));
+
+      console.log(h2Els); // => NodeList(4) [h2.news, h2.news, h2.news, h2.news]
+
+      console.log(h2Array); // =>  [h2.news, h2.news, h2.news, h2.news]
+
+      h2Array.forEach((el) => {
+        el.style.backgroundColor = 'salmon';
+        el.style.color = 'white';
+        el.style.padding = '1rem';
+      });
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html
+++ b/03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Attribut Selektor</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      /* Allgemeine Formatierunge */
+
+      /* universal Selektor (*) */
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      a {
+        color: tomato;
+        text-decoration: none;
+      }
+
+      /* attribut selector (ATTRIBUT_NAME="value") */
+      a[href='https://www.gfn.de'] {
+        color: blue;
+      }
+
+      /* attribut selector beginnend (ATTRIBUT_NAME^="value") */
+      a[href^='https'] {
+        background-color: aqua;
+      }
+
+      /* attribut selector abschließend (ATTRIBUT_NAME$="value") */
+      img[src$='.jpg'],
+      img[src$='.jpeg'] {
+        border: 10px solid #555;
+      }
+
+      /* attribut selector suchend (ATTRIBUT_NAME*="value") */
+      a[href*='#'] {
+        text-decoration: underline;
+        font-weight: bolder;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Attribut Selektor</h1>
+        <hr />
+        <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
+        <nav class="menu-main">
+          <ul class="list">
+            <li><a href="https://www.google.com">Google </a></li>
+            <li><a href="https://netflix.com">Netflix</a></li>
+            <li>
+              <a href="#dropdown">Projects</a>
+              <ul class="sublist">
+                <li><a href="#">Project 01</a></li>
+                <li><a href="#">Project 02</a></li>
+                <li><a href="#">Project 03</a></li>
+              </ul>
+            </li>
+            <li><a href="http://www.gfn.de">GFN</a></li>
+            <li><a href="#text">Text</a></li>
+          </ul>
+        </nav>
+
+        <h2>Bilder</h2>
+        <p>Erstellte Bilder über Dummyimage.com</p>
+        <ul class="list">
+          <li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
+        </ul>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
+          Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
+          explicabo architecto numquam eaque in, qui possimus voluptatem?
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html
+++ b/03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Kombinator Selektor</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      /* Allgemeine Formatierunge */
+
+      /* universal Selektor (*) */
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      a {
+        color: tomato;
+        text-decoration: none;
+      }
+
+      /* descendant combinator (' ') */
+      .menu-main ul {
+        padding: 0;
+        list-style: none;
+      }
+
+      /* child combinator (>) - direkte Kinderelemente selektieren */
+      .menu-main > ul > li > a {
+        color: green;
+      }
+
+      /* adjacent cominator (+) - direktes nachkommendes Geschwisterelement selektieren */
+      h2 + p {
+        color: #999;
+      }
+
+      /* general sibling combinator (~) - alle nachkommenden Geschwisterelemente selektieren */
+      ul.list li:nth-child(1) ~ li img {
+        width: 200px;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Kombinator Selektor</h1>
+        <hr />
+        <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
+        <nav class="menu-main">
+          <ul class="list">
+            <li><a href="https://www.google.com">Google </a></li>
+            <li><a href="https://netflix.com">Netflix</a></li>
+            <li>
+              <a href="#dropdown">Projects</a>
+              <ul class="sublist">
+                <li><a href="#">Project 01</a></li>
+                <li><a href="#">Project 02</a></li>
+                <li><a href="#">Project 03</a></li>
+              </ul>
+            </li>
+            <li><a href="http://www.gfn.de">GFN</a></li>
+            <li><a href="#text">Text</a></li>
+          </ul>
+        </nav>
+
+        <h2>Bilder</h2>
+        <p>Erstellte Bilder über Dummyimage.com</p>
+        <ul class="list">
+          <li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
+          <li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
+        </ul>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
+          Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
+          explicabo architecto numquam eaque in, qui possimus voluptatem?
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/07_css-pseudoklassen/index.html
+++ b/03_dom/unterricht/tag21/07_css-pseudoklassen/index.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Selektor - Pseudoklassen</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      a {
+        color: salmon;
+      }
+
+      /* normal Zustand */
+      /*
+      a:link {
+        color: salmon;
+      }
+      */
+      /* 
+      a:visited {
+        color: purple;
+      } */
+
+      a:hover,
+      a:focus {
+        color: #c00;
+      }
+
+      /* a:active {
+        color: steelblue;
+      } */
+
+      .menu-main {
+        background-color: steelblue;
+      }
+
+      .menu-main ul.list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        display: flex;
+      }
+
+      .menu-main ul.list li {
+        border-right: 2px solid #555;
+      }
+
+      /* :last-child | :first-child - letztes oder erstes Kindelement */
+      .menu-main ul.list li:last-child {
+        border-right: none;
+      }
+
+      .menu-main ul.list li a {
+        display: inline-block;
+        padding: 0.5rem 1rem;
+        color: white;
+        text-decoration: none;
+        text-transform: uppercase;
+      }
+
+      /* .menu-main ul.list li a:link {} */
+      /* .menu-main ul.list li a:visited {} */
+
+      .menu-main ul.list li a:hover,
+      .menu-main ul.list li a:focus {
+        color: #2a2a2a;
+        background-color: lightblue;
+      }
+
+      .menu-main ul.list li a:active {
+        color: white;
+        background-color: #2a2a2a;
+      }
+
+      /* :nth-child(nte + offset) */
+      /* table tbody tr:nth-child(2n + 3) td {
+        background-color: rgba(0, 0, 0, 0.1);
+      } */
+
+      /* :nth-child(odd | even) */
+      table tbody tr:nth-child(even) td {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      /* :empty */
+      table tbody td:empty {
+        background-color: #333;
+      }
+
+      table tbody td:empty::after {
+        content: '(no content)';
+        color: white;
+        padding: 0.5rem;
+      }
+
+      /* :not() */
+      /* table tbody tr:not(.selected) td {
+        opacity: 0.5;
+      } */
+
+      /* :checked - ausgewählte Checkboxen | Radio-Buttons */
+      input:checked + label {
+        text-decoration: line-through;
+      }
+    </style>
+  </head>
+  <body>
+    <nav class="menu-main">
+      <ul class="list">
+        <li><a href="#">Pseudoklassen</a></li>
+        <li>
+          <a href="https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/Pseudo-elements">Pseudoelemente</a>
+        </li>
+      </ul>
+    </nav>
+    <main>
+      <div class="container py-5">
+        <h1>CSS Selektor - Pseudoklassen</h1>
+        <hr />
+        <p>
+          Eine
+          <a href="https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>
+          in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand
+          abzufragen. So steht beispielsweise <code>:hover</code> für Elemente, die gerade mit dem Mauszeiger berührt
+          werden.
+        </p>
+
+        <table class="table">
+          <thead class="table-dark">
+            <tr>
+              <th>Name</th>
+              <th>Beschreibung</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="current">
+              <td>:nth-child</td>
+              <td>
+                Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul,
+                falls es vom Tag-Typ li ist.
+              </td>
+            </tr>
+            <tr>
+              <td>:first-child</td>
+              <td>Die Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..</td>
+            </tr>
+            <tr>
+              <td>:last-child</td>
+              <td>
+                Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ
+                ist.
+              </td>
+            </tr>
+            <tr>
+              <td>:empty</td>
+              <td>
+                Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von
+                Text wird dabei ebenfalls als Kind-Element betrachtet.
+              </td>
+            </tr>
+            <tr class="selected">
+              <td>:not(selector)</td>
+              <td>
+                Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im
+                Beispiel würde alles außer span-Elementen ausgewählt.
+              </td>
+            </tr>
+            <tr>
+              <td>:only-child</td>
+              <td>
+                Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen
+                Eltern-Elementes handelt.
+              </td>
+            </tr>
+            <tr>
+              <td>:checked</td>
+              <td>Diese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.</td>
+            </tr>
+            <tr>
+              <td colspan="2"></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="form-check">
+          <input type="checkbox" id="cb-todo" class="form-check-input" />
+          <label for="cb-todo">Todo: Checkbox verstehen </label>
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html
+++ b/03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>document.querySelector() vs. element.querySelector()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>document.querySelector() vs. element.querySelector()</h1>
+        <hr />
+        <ul>
+          <li>1</li>
+          <li>2</li>
+        </ul>
+        <ul id="second_list">
+          <li>3</li>
+          <li>4</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // document.querySelectorAll()
+      const liEls = Array.from(document.querySelectorAll('ul li'));
+
+      console.log(liEls); // => (4) [li, li, li, li]
+
+      const secondListEl = document.querySelector('#second_list');
+
+      // element.querySelectorAll()
+      console.log(Array.from(secondListEl.querySelectorAll('li'))); // => [<li>3</li>,<li>4</li>]
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag21/09_$-$$-helper/index.html
+++ b/03_dom/unterricht/tag21/09_$-$$-helper/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Helferfunktion $ und $$</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Helferfunktion $ und $$</h1>
+        <hr />
+        <h2>Lorem ipsum dolor sit amet.</h2>
+        <h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
+        <h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
+        <h2 class="news">Modi ipsum, velit rem ipsam.</h2>
+        <h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // IIFE
+      ((jq) => {
+        // Helferfunktion $ und $$
+        const $ = (qs) => document.querySelector(qs);
+        const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+        $('h1').style.color = 'orange';
+
+        $$('.news').forEach((el) => {
+          el.style.backgroundColor = 'salmon';
+        });
+
+        // $ von jQuery
+        jq('.news').css({
+          backgroundColor: 'yellow',
+          padding: '1rem',
+        });
+      })($); // $ von jQuery
+    </script>
+  </body>
+</html>