diff --git a/01_grundlagen/unterricht/tag07/01_str-trim.html b/01_grundlagen/unterricht/tag07/01_str-trim.html
new file mode 100644
index 0000000..7448dcc
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/01_str-trim.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>String.trim()</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/trim">
+            String.trim()
+          </a>
+        </h1>
+        <p>
+          Die <strong>trim()</strong> Methode entfernt Leerzeichen an beiden Enden einer Zeichenfolge. Das betrifft
+          Leerzeichen verschiedenster Art (space, tab, no-break space, etc.) und alle Zeilenumbruch einleitende Zeichen
+          (LF, CR, etc.).
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let name = '   Ladislaus Jones     ';
+
+      // String Methode - str.trim()
+
+      console.log(name.trim()); // => "Ladislaus Jones" (without space before and after)
+      console.log('\t \n lorem ipsum \t '.trim()); // => "lorem ipsum"
+
+      // String Methode - str.trimStart() | str.trimLeft()
+      console.log('  lorem ipsum   '.trimStart()); //=> 'lorem ipsum   '
+
+      // String Methode - str.trimEnd() | str.trimRight()
+      console.log('  lorem ipsum   '.trimEnd()); //=> '   lorem ipsum'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/02_str-char-at.html b/01_grundlagen/unterricht/tag07/02_str-char-at.html
new file mode 100644
index 0000000..cbfadeb
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/02_str-char-at.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.charAt()</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/charAt">
+            String.charAt()
+          </a>
+        </h1>
+        <p>Die <strong>charAt()</strong>-Methode gibt das Zeichen an einer bestimmten Stelle eines Strings wieder.</p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const firstName = 'Ladislaus';
+      const lastName = 'Jones';
+
+      console.log(`${lastName}, ${firstName.charAt(0)}.`); // => "Jones, L."
+
+      // String - Methode str.charAt(index);
+
+      console.log('Lisa Simpson'.charAt(0)); // => 'L'
+      console.log('Lisa Simpson'.charAt(5)); // => 'S'
+
+      // Default-Wert bei keiner Angabe ist 0
+      console.log('Lisa Simpson'.charAt()); // => 'L'
+
+      // Indexoperator []
+      console.log('Lisa Simpson'[0]); // => 'L'
+      console.log('Lisa Simpson'[1]); // => 'i'
+
+      console.log('Lisa Simpson'.charAt(999)); // => ''
+      console.log('Lisa Simpson'.charAt(-999)); // => ''
+
+      // https://asciitable.xyz/
+      console.log('Lisa Simpson'.charCodeAt(5)); // => 'S' -> 83
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/03_str-to-lower-upper.html b/01_grundlagen/unterricht/tag07/03_str-to-lower-upper.html
new file mode 100644
index 0000000..7cb509f
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/03_str-to-lower-upper.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.toLowerCase() | String.toUpperCase()</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>
+          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">
+            String.toLowerCase()
+          </a>
+          &amp;
+          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase">
+            String.toUpperCase()
+          </a>
+        </h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const firstName = 'ladislaus';
+      const lastName = 'JOnes';
+
+      const transformedFirstName = `${firstName.charAt(0).toUpperCase()}${firstName.substring(1).toLowerCase()}`;
+      const transformedLastName = `${lastName.charAt(0).toUpperCase()}${lastName.substring(1).toLowerCase()}`;
+
+      console.log(`${transformedFirstName} ${transformedLastName}`);
+
+      // String Methode - str.toLowerCase()
+
+      console.log('LOREM Ipsum'.toLowerCase()); // => 'lorem ipsum'
+
+      // String Methode - str.toUpperCase()
+
+      console.log('Lorem Ipsum'.toUpperCase()); // => 'LOREM IPSUM'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/04_str-replace-replace-all.html b/01_grundlagen/unterricht/tag07/04_str-replace-replace-all.html
new file mode 100644
index 0000000..e9f8bf3
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/04_str-replace-replace-all.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.replace(searchValue, replaceValue)</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace">
+            String.replace(searchValue, replaceValue)
+          </a>
+        </h1>
+        <p>
+          Die <strong>replace()</strong>-Methode gibt eine neue Zeichenkette zurück, in der einige oder alle
+          Übereinstimmungen mit einem <strong>Muster</strong> durch einen Ersatz ausgetauscht wurden. Das
+          <strong>Muster</strong> kann eine Zeichenkette (string) oder eine <code>RegExp</code> sein, als Ersatz dienen
+          eine Zeichenkette oder eine Funktion, welche für jede Übereinstimmung aufgerufen wird.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productName = 'Prescription Mug';
+      const productDescription =
+        "Prescription Mug: Coffee Mug which looks like a drug bottle. Your Prescription Mug is a great conversation starter. Great for the caffeine addict in your life — one that doesn't need an intervention. You will love your Prescription Mug.";
+      const newProductName = 'Drug Mug';
+
+      console.log(productDescription.replace(productName, newProductName));
+      outputEl.textContent = productDescription.replace(productName, newProductName);
+
+      // replace mit RegExp (regulärem Ausdruck)
+      outputEl.textContent = productDescription.replace(/Prescription Mug/g, newProductName);
+
+      // replaceAll - seit Juni 2021
+      outputEl.textContent = productDescription.replaceAll('Prescription Mug', newProductName);
+
+      // String Methode - str.replace('searchValue', 'replaceValue')
+
+      console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
+      // => 'I love TS. JS is the best language'
+
+      console.log('I love JS. JS is the best language'.replace(/JS/g, 'TS'));
+      // => 'I love TS. TS is the best language'
+
+      // String Methode - str.replaceAll('searchValue', 'replaceValue')
+      console.log('I love JS. JS is the best language'.replaceAll('JS', 'TS'));
+      // => 'I love TS. TS is the best language'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/05_str-includes.html b/01_grundlagen/unterricht/tag07/05_str-includes.html
new file mode 100644
index 0000000..ede9a30
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/05_str-includes.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.includes()</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>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes">
+            String.includes()
+          </a>
+        </h1>
+        <p>
+          Die <strong>includes()</strong>-Methode gibt an, ob ein String innerhalb eines anderen Strings gefunden wird
+          und gibt dabei <code>true</code> oder <code>false</code> wieder.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const productName = 'Prescription Mug';
+      const search = ' Mug';
+
+      console.log(
+        productName
+          .trim() //
+          .toLowerCase()
+          .includes(search.trim().toLowerCase()),
+      ); // => true
+
+      // String - Methode str.includes(searchValue)
+
+      console.log('lorem ipsum'.includes('ip')); //=> true
+      console.log('lorem ipsum'.includes(' ')); //=> true
+
+      console.log('lorem ipsum'.includes('L')); //=> false
+      console.log('lorem ipsum'.includes('X')); //=> false
+
+      console.log('lorem ipsum'.indexOf('ip') !== -1); //=> true
+
+      // polyfill
+      if (!String.prototype.includes) {
+        String.prototype.includes = function (search, start) {
+          'use strict';
+          if (typeof start !== 'number') {
+            start = 0;
+          }
+
+          if (start + search.length > this.length) {
+            return false;
+          } else {
+            return this.indexOf(search, start) !== -1;
+          }
+        };
+      }
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/06_str-starts-with-ends-with.html b/01_grundlagen/unterricht/tag07/06_str-starts-with-ends-with.html
new file mode 100644
index 0000000..99fdb8b
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/06_str-starts-with-ends-with.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.startsWith() & String.endsWith()</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>String.startsWith() & String.endsWith()</h1>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">
+            String.startsWith()
+          </a>
+        </h2>
+        <p>
+          Die <strong>startsWith()</strong>-Methode stellt fest, ob ein String mit den Zeichen eines anderen Strings
+          beginnt, falls dies so ist, wird <code>true</code>, sonst wird <code>false</code> zurückgegeben.
+        </p>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">
+            String.endsWith()
+          </a>
+        </h2>
+        <p>
+          Die Methode <strong>endsWith()</strong> bestimmt, ob ein String das Ende eines anderen Strings ist, und
+          liefert entsprechend <code>true</code> oder <code>false</code> zurück.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productName = '[Sale] Lightsaber Pen';
+      const search = '[Sale]';
+
+      console.log(productName.startsWith(search)); // => true
+
+      // String Methode - str.startsWith();
+
+      console.log('lorem ipsum'.startsWith('lorem')); // => true
+      console.log('#category'.startsWith('#')); // => true
+
+      // String Methode - str.endsWith();
+
+      console.log('lorem ipsum'.endsWith('ipsum')); // => true
+      console.log('datei.pdf'.endsWith('.pdf')); // => true
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/07_str-pad-start-pad-end.html b/01_grundlagen/unterricht/tag07/07_str-pad-start-pad-end.html
new file mode 100644
index 0000000..7c19494
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/07_str-pad-start-pad-end.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.padStart() & String.padEnd()</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>String.padStart() & String.padEnd()</h1>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padStart">
+            String.padStart()
+          </a>
+        </h2>
+        <p>
+          The <strong>padStart(</strong>) method pads the current string with another string (multiple times, if needed)
+          until the resulting string reaches the given length. The padding is applied from the start of the current
+          string.
+        </p>
+        <hr />
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd">
+            String.padEnd()
+          </a>
+        </h2>
+        <p>
+          The <strong>padEnd()</strong> method pads the current string with a given string (repeated, if needed) so that
+          the resulting string reaches a given length. The padding is applied from the end of the current string.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // String Methode - str.padStart(targetLength[, fillValue])
+      console.log('lorem'.padStart(10)); //=> '     lorem';
+      console.log('12345'.padStart(10, '0')); //=> '0000012345'
+
+      console.log(String(12345).padStart(10, '0')); //=> '0000012345'
+      console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
+
+      console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
+
+      // String Methode - str.padEnd(targetLength[, fillValue])
+      console.log('lorem'.padEnd(10)); //=> 'lorem     ';
+      console.log('12345'.padEnd(10, '0')); //=> '1234500000'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/08_str-repeat.html b/01_grundlagen/unterricht/tag07/08_str-repeat.html
new file mode 100644
index 0000000..eee4734
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/08_str-repeat.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.repeat()</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>
+          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat">
+            String.repeat()
+          </a>
+        </h1>
+        <p>
+          The <strong>repeat()</strong> method constructs and returns a new string which contains the specified number
+          of copies of the string on which it was called, concatenated together.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // String - Methode str.repeat()
+
+      console.log('beetlejuice'.repeat(3)); //=> 'beetlejuicebeetlejuicebeetlejuice'
+      console.log('beetlejuice'.repeat(1)); //=> 'beetlejuice'
+
+      console.log('beetlejuice'.repeat(0)); //=> ''
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/09_funktionsdefinition.html b/01_grundlagen/unterricht/tag07/09_funktionsdefinition.html
new file mode 100644
index 0000000..eab726d
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/09_funktionsdefinition.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS - Funktionsdefinition</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>JS - Funktionsdefinition</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Funktionsdefinition mit "function" statement
+      function showNewsLetter() {
+        console.log('Dear Customer,\n');
+        console.log(
+          `We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
+        );
+        console.log('Happy nerding,\nYour NerdWorld Team');
+      }
+
+      // Funktionsausdruck - (function expression) vor ES6 (ECMAScript 2015)
+      var showNewsLetter2 = function () {
+        console.log('Dear Customer,\n');
+        console.log(
+          `We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
+        );
+        console.log('Happy nerding,\nYour NerdWorld Team');
+      };
+
+      // Seit ES6 (2015) - Funktionsausdruck mit arrow (arrow function expression)
+      const showNewsLetter3 = () => {
+        console.log('Dear Customer,\n');
+        console.log(
+          `We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
+        );
+        console.log('Happy nerding,\nYour NerdWorld Team');
+      };
+
+      // Funktionsaufrufe
+      showNewsLetter();
+      console.log('=========');
+      showNewsLetter2();
+      console.log('=========');
+      showNewsLetter3();
+
+      console.log('weiter im code.');
+    </script>
+  </body>
+</html>
