feat: added 03_dom

03_dom/.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    "kamikillerto.vscode-colorize",
+    "sleistner.vscode-fileutils",
+    "bierner.github-markdown-preview",
+    "bradgashler.htmltagwrap",
+    "zhuangtongfa.material-theme",
+    "techer.open-in-browser",
+    "esbenp.prettier-vscode",
+    "pdconsec.vscode-print",
+    "vscode-icons-team.vscode-icons",
+    "formulahendry.auto-rename-tag",
+    "tomoki1207.pdf"
+  ]
+}

03_dom/.vscode/marp-theme.css

@@ -0,0 +1,332 @@
+/* @theme marp-theme */
+
+@charset "UTF-8";
+/*!
+ * Marp Dracula theme.
+ * @theme marp-theme
+ * @author Daniel Nicolas Gisolfi & modified by Philippe Botzek
+ *
+ * @auto-scaling true
+ * @size 4:3 960px 720px
+ * @size 16:9 1280px 720px
+ */
+
+@import url('https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700');
+
+:root {
+  --dracula-background: #282a36;
+  --dracula-current-line: #44475a;
+  --dracula-foreground: #f8f8f2;
+  --dracula-comment: #6272a4;
+  --dracula-cyan: #8be9fd;
+  --dracula-green: #50fa7b;
+  --dracula-orange: #ffb86c;
+  --dracula-pink: #ff79c6;
+  --dracula-purple: #bd93f9;
+  --dracula-red: #ff5555;
+  --dracula-yellow: #f1fa8c;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: var(--dracula-background);
+}
+
+/* Dracula Foreground */
+.hljs,
+.hljs-subst,
+.hljs-typing,
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--dracula-foreground);
+}
+
+/* Dracula Comment */
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: var(--dracula-comment);
+}
+
+/* Dracula Cyan */
+.hljs-meta .hljs-doctag,
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link,
+.hljs-class {
+  color: var(--dracula-cyan);
+}
+
+/* Dracula Green */
+.hljs-title {
+  color: var(--dracula-green);
+}
+
+/* Dracula Orange */
+.hljs-params {
+  color: var(--dracula-orange);
+}
+
+/* Dracula Pink */
+.hljs-keyword {
+  color: var(--dracula-pink);
+}
+
+/* Dracula Purple */
+.hljs-literal,
+.hljs-number {
+  color: var(--dracula-purple);
+}
+
+/* Dracula Red */
+.hljs-regexp {
+  color: var(--dracula-red);
+}
+
+/* Dracula Yellow */
+.hljs-string,
+.hljs-name,
+.hljs-type,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-template-tag {
+  color: var(--dracula-yellow);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-params,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+svg[data-marp-fitting='svg'] {
+  max-height: 580px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0.5em 0 0 0;
+  color: var(--dracula-pink);
+}
+h1 strong,
+h2 strong,
+h3 strong,
+h4 strong,
+h5 strong,
+h6 strong {
+  font-weight: inherit;
+}
+
+h1 {
+  font-size: 1.8em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.3em;
+}
+
+h4 {
+  font-size: 1.1em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+h6 {
+  font-size: 0.9em;
+}
+
+p,
+blockquote {
+  margin: 1em 0 0 0;
+}
+
+ul > li,
+ol > li {
+  margin: 0.3em 0 0 0;
+  color: var(--dracula-cyan);
+}
+ul > li > p,
+ol > li > p {
+  margin: 0.6em 0 0 0;
+}
+
+code {
+  display: inline-block;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.8em;
+  letter-spacing: 0;
+  margin: -0.1em 0.15em;
+  padding: 0.1em 0.2em;
+  vertical-align: baseline;
+  color: var(--dracula-green);
+}
+
+pre {
+  display: block;
+  margin: 1em 0 0 0;
+  min-height: 1em;
+  overflow: visible;
+}
+pre code {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 100%;
+  padding: 0.5em;
+  font-size: 0.7em;
+}
+pre code svg[data-marp-fitting='svg'] {
+  max-height: calc(580px - 1em);
+}
+
+blockquote {
+  margin: 1em 0 0 0;
+  padding: 0 1em;
+  position: relative;
+  color: var(--dracula-orange);
+}
+blockquote::after,
+blockquote::before {
+  content: '“';
+  display: block;
+  font-family: 'Times New Roman', serif;
+  font-weight: bold;
+  position: absolute;
+  color: var(--dracula-green);
+}
+blockquote::before {
+  top: 0;
+  left: 0;
+}
+blockquote::after {
+  right: 0;
+  bottom: 0;
+  transform: rotate(180deg);
+}
+blockquote > *:first-child {
+  margin-top: 0;
+}
+
+mark {
+  background: transparent;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 1em 0 0 0;
+}
+table th,
+table td {
+  padding: 0.2em 0.4em;
+  border-width: 1px;
+  border-style: solid;
+}
+
+section {
+  font-size: 35px;
+  font-family: 'IBM Plex Sans';
+  line-height: 1.35;
+  letter-spacing: 1.25px;
+  padding: 70px;
+  color: var(--dracula-foreground);
+  background-color: var(--dracula-background);
+}
+section > *:first-child,
+section > header:first-child + * {
+  margin-top: 0;
+}
+section a,
+section mark {
+  color: var(--dracula-red);
+}
+section code {
+  background: var(--dracula-current-line);
+  color: var(--dracula-current-green);
+}
+section h1 strong,
+section h2 strong,
+section h3 strong,
+section h4 strong,
+section h5 strong,
+section h6 strong {
+  color: var(--dracula-current-line);
+}
+section pre > code {
+  background: var(--dracula-current-line);
+}
+section header,
+section footer,
+section section::after,
+section blockquote::before,
+section blockquote::after {
+  color: var(--dracula-comment);
+}
+section table th,
+section table td {
+  border-color: var(--dracula-current-line);
+}
+section table thead th {
+  background: var(--dracula-current-line);
+  color: var(--dracula-yellow);
+}
+section table tbody > tr:nth-child(even) td,
+section table tbody > tr:nth-child(even) th {
+  background: var(--dracula-current-line);
+}
+
+header,
+footer,
+section::after {
+  box-sizing: border-box;
+  font-size: 66%;
+  height: 70px;
+  line-height: 50px;
+  overflow: hidden;
+  padding: 10px 25px;
+  position: absolute;
+  color: var(--dracula-comment);
+}
+
+header {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+footer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+section::after {
+  right: 0;
+  bottom: 0;
+  font-size: 80%;
+}

03_dom/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "workbench.iconTheme": "vscode-icons",
+  "workbench.colorTheme": "One Dark Pro",
+  "prettier.printWidth": 120,
+  "prettier.singleQuote": true,
+  "editor.hover.enabled": "on",
+  "editor.wordWrap": "on",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.quickSuggestionsDelay": 600,
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "emmet.includeLanguages": {
+    "javascript": "javascriptreact",
+    "ejs": "html"
+  },
+  "html.format.unformatted": "wbr,%",
+  "files.associations": {
+    "*.ejs": "html"
+  },
+  "editor.fontFamily": "'MesloLGS NF', Hack, Consolas, 'Courier New', monospace",
+  "oneDarkPro.markdownStyle": false,
+  "explorer.compactFolders": false,
+  "workbench.editor.labelFormat": "short",
+  "editor.hover.delay": 800,
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": "active",
+  "markdown.marp.themes": ["./.vscode/marp-theme.css"],
+  "markdown-preview-github-styles.colorTheme": "light"
+}

03_dom/.vscode/snippets.code-snippets

@@ -0,0 +1,73 @@
+{
+  "Output HTML Element": {
+    "scope": "html",
+    "prefix": "output",
+    "body": ["<div class=\"output alert alert-secondary my-3\"></div>"],
+    "description": "generate a div Element with output alert and alert secondary class"
+  },
+  "Bootstrap html": {
+    "scope": "html",
+    "prefix": "!bs",
+    "body": [
+      "<!DOCTYPE html>",
+      "<html lang=\"de\">",
+      "\t<head>",
+      "\t\t<meta charset=\"UTF-8\" />",
+      "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
+      "\t\t<title>$0</title>",
+      "\t\t<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\" rel=\"stylesheet\" />",
+      "\t</head>",
+      "\t<body>",
+      "\t\t<main>",
+      "\t\t\t<div class=\"container py-5\">",
+      "\t\t\t\t<h1>$0</h1>",
+      "\t\t\t</div>",
+      "\t\t</main>",
+      "\t\t<script>",
+      "\t\t\t'use strict';",
+      "\t\t\t",
+      "\t\t</script>",
+      "\t</body>",
+      "</html>"
+    ],
+    "description": "Generate HTML with Bootstrap CDN and script-tag"
+  },
+  "$ und $$ helper function": {
+    "scope": "javascript,typescript",
+    "prefix": "$$$",
+    "body": [
+      "const $ = (qs) => document.querySelector(qs);",
+      "const $$ = (qs) => Array.from(document.querySelectorAll(qs));"
+    ],
+    "description": "$ and $$ shorthand helper function"
+  },
+
+  "JavaScript Dateivorlage": {
+    "scope": "javascript,typescript",
+    "prefix": "vjs",
+    "body": [
+      "'use strict';",
+      "",
+      "(() => {",
+      "",
+      "\t// === DOM & VARS =======",
+      "\tconst DOM = {};",
+      "",
+      "\t// === INIT =============",
+      "\tconst init = () => {",
+      "",
+      "\t}",
+      "",
+      "\t// === EVENTHANDLER =====",
+      "",
+      "\t// === XHR/FETCH ========",
+      "",
+      "\t// === FUNCTIONS ========",
+      "",
+      "\tinit();",
+      "",
+      "})();"
+    ],
+    "description": "JavaScript Dateivorlage"
+  }
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.css

@@ -0,0 +1,55 @@
+h1 {
+  font-size: 5em;
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  font-size: 2em;
+  font-style: italic;
+}
+
+.kittenlist {
+  border: 1px solid black;
+  width: 700px;
+  margin: 0;
+  padding: 0;
+  height: 80vh;
+  overflow: auto;
+}
+
+.kittenlist li {
+  list-style: none;
+  font-size: 5em;
+  background-color: #055;
+  padding: 5px;
+  margin-bottom: 20px;
+  height: 150px;
+}
+
+.kittenlist li:hover {
+  background-color: #755;
+  outline: 5px solid #700;
+}
+
+.kittenlist li img {
+  margin-right: 20px;
+}
+
+.kittenlist li span {
+  display: inline;
+  top: -0.7em;
+  position: relative;
+  color: #099;
+}
+
+#cutest {
+  height: 520px;
+  overflow: hidden;
+}
+
+#cutest_section {
+  position: absolute;
+  top: 0;
+  left: 50vw;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cutycat</title>
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="cuteycat.js" defer></script>
+    <link rel="stylesheet" href="cuteycat.css" />
+  </head>
+
+  <body>
+    <section id="candidates_section">
+      <h1>Our Cats</h1>
+      <ul id="candidates" class="kittenlist">
+        <li><img src="kittens/1.jpg" alt="cat 1" /><span>Chance</span></li>
+        <li><img src="kittens/2.jpg" alt="cat 2" /><span>MeowMix</span></li>
+        <li><img src="kittens/3.jpg" alt="cat 3" /><span>Stripes</span></li>
+        <li><img src="kittens/4.jpg" alt="cat 4" /><span>Schrodinger</span></li>
+        <li><img src="kittens/5.jpg" alt="cat 5" /><span>Waffles</span></li>
+        <li><img src="kittens/6.jpg" alt="cat 6" /><span>Tazmina</span></li>
+        <li><img src="kittens/7.jpg" alt="cat 7" /><span>Wiggle</span></li>
+        <li><img src="kittens/8.jpg" alt="cat 8" /><span>Gin</span></li>
+        <li><img src="kittens/9.jpg" alt="cat 9" /><span>Paws</span></li>
+        <li><img src="kittens/10.jpg" alt="cat 10" /><span>Marshmallow</span></li>
+        <li><img src="kittens/11.jpg" alt="cat 11" /><span>Caesar</span></li>
+        <li><img src="kittens/12.jpg" alt="cat 12" /><span>Trogdor</span></li>
+        <li><img src="kittens/13.jpg" alt="cat 13" /><span>Sourpuss</span></li>
+        <li><img src="kittens/14.jpg" alt="cat 14" /><span>Stitch</span></li>
+        <li><img src="kittens/15.jpg" alt="cat 15" /><span>Sunshine</span></li>
+      </ul>
+      <p>Choose the cutest cats. Pick three winners!</p>
+    </section>
+
+    <section id="cutest_section">
+      <h1>Cutest Cats</h1>
+      <ul id="cutest" class="kittenlist"></ul>
+      <p>Click to remove</p>
+    </section>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/11/exercises/cute_kittens/cuteycat.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/dom_example.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DOM-Example</title>
+    <link
+      rel="stylesheet"
+      href="../../css/styles.css"
+      type="text/css"
+      media="screen"
+    />
+  </head>
+
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <article>
+        <h1></h1>
+        <p></p>
+        <img alt="" src="#" />
+      </article>
+    </main>
+
+    <footer>
+      <nav></nav>
+    </footer>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/news.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Headlines</title>
+    <link
+      rel="stylesheet"
+      href="../../css/styles.css"
+      type="text/css"
+      media="screen"
+    />
+  </head>
+
+  <body>
+    <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>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/2/examples/selector_testing.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Selector Testing</title>
+  </head>
+
+  <body>
+    <ul id="ul1">
+      <li id="li11"><span>11</span></li>
+      <li id="li12">12</li>
+      <li id="li13">13</li>
+      <li id="li14">14</li>
+    </ul>
+    <ul id="ul2">
+      <li id="li21"><span>21</span></li>
+      <li id="li22">
+        <strong><span>22</span></strong>
+      </li>
+      <li id="li23">23</li>
+    </ul>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/010010000100111101010100.html

@@ -0,0 +1,121 @@
+<!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="../../css/styles.css"
+      type="text/css"
+      media="screen"
+    />
+    <link
+      rel="shortcut icon"
+      href="../../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="../../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="../../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>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/2/exercises/quotes.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Famous Quotes</title>
+
+    <link
+      rel="stylesheet"
+      href="../../css/styles.css"
+      type="text/css"
+      media="screen"
+    />
+    <link
+      rel="shortcut icon"
+      href="../../img/favicon.ico"
+      type="image/x-icon"
+    />
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1>Famous Quotes</h1>
+
+      <blockquote></blockquote>
+    </main>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>The Chat</title>
+    <link
+      rel="stylesheet"
+      href="../../css/styles.css"
+      type="text/css"
+      media="screen"
+    />
+    <link
+      rel="shortcut icon"
+      href="../../img/favicon.ico"
+      type="image/x-icon"
+    />
+    <script src="chat.js" defer></script>
+  </head>
+
+  <body>
+    <header></header>
+
+    <main>
+      <h1>Chat</h1>
+
+      <div id="chat">
+        <div id="chat_window">
+          <div id="chat_history">
+            <p>
+              <span class="chat_member chat_member1">Ladislaus:</span>
+              Anybody there?
+            </p>
+            <p>
+              <span class="chat_member chat_member2">Friedlinde</span>
+              Yes, me!
+            </p>
+          </div>
+
+          <div id="chat_text">
+            <input type="text" placeholder="...new message..." />
+          </div>
+        </div>
+
+        <ul id="chat_members">
+          <li class="admin">Heribert</li>
+          <li>Friedlinde</li>
+          <li>Tusnelda</li>
+          <li>Berthold</li>
+          <li>Oswine</li>
+          <li>Ladislaus</li>
+        </ul>
+
+        <div id="member_search">
+          <input type="text" placeholder="...Find a member..." />
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/3/examples/chat.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/index.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Article Detail Page</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Lorem ipsum</h1>
+      <section id="content">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </section>
+    </main>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/script.js

@@ -0,0 +1,14 @@
+'use strict';
+
+{
+  const articleSizeCssClass = (contentLength) => {
+    if (contentLength <= 3000) return 'coffee_break_article';
+    if (contentLength <= 9000) return 'normal_length_article';
+    return 'lone_weekend_article';
+  };
+
+  const $ = (qs) => document.querySelector(qs);
+  const contentLength = () => $('#content').innerHTML.length;
+
+  $('h1').classList.add(articleSizeCssClass(contentLength()));
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/3/exercises/article_length/styles.css

@@ -0,0 +1,31 @@
+*, html {
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  color: #444;
+  font-weight: normal;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  padding: 0.5em;
+}
+
+.coffee_break_article {
+  background-color: BurlyWood;
+}
+
+.normal_length_article {
+  background-color: #cafe69;
+}
+
+.lone_weekend_article {
+  background-color: DarkTurquoise;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 1rem;
+  max-width: 1140px;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.css

@@ -0,0 +1,227 @@
+* {
+  margin: 0;
+}
+html {
+  font-size: 100%;
+  padding: 0;
+  background-attachment: fixed;
+  background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9);
+  background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9);
+  background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9);
+}
+body {
+  color: #333;
+  font-size: 1em;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align: left;
+  margin: 1em;
+  padding: 0;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 1rem;
+}
+p {
+  line-height: 1.5em;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+p:last-child {
+  margin-bottom: 0;
+}
+a {
+  color: #2f83e8;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+strong,
+b {
+  font-weight: bold;
+}
+em,
+i {
+  font-style: italic;
+}
+.float_left {
+  float: left;
+}
+.float_right {
+  float: right;
+}
+.disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.message_number {
+  color: #fff;
+  font-size: 0.8em;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1em;
+  position: absolute;
+  top: -0.5em;
+  left: -0.5em;
+  display: block;
+  padding-top: 0.3em;
+  min-width: 2em;
+  height: 2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: default;
+  background-color: #ea2314;
+  background-image: -webkit-linear-gradient(top, #f78f91, #c50404);
+  background-image: -moz-linear-gradient(top, #f78f91, #c50404);
+  background-image: linear-gradient(to bottom, #f78f91, #c50404);
+  border: 2px solid #fff;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+}
+.newsboard_wrapper {
+  margin: 0 auto 2em auto;
+  padding: 13px 0 0 17px;
+  max-width: 550px;
+  position: relative;
+  background: url(images/sheets.png) no-repeat;
+}
+.newsboard_wrapper:before {
+  content: url(images/paperclip.png);
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  z-index: 1;
+}
+.newsboard_wrapper .newsboard {
+  padding: 29px 1.25rem 4rem 1.25rem;
+  min-height: 20em;
+  position: relative;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px);
+  background-image: -moz-linear-gradient(#dddddd, #ffffff 1px);
+  background-image: linear-gradient(#dddddd, #ffffff 1px);
+  background-position: 0 1.3em;
+  -webkit-background-size: 100% 1.5em;
+  -moz-background-size: 100% 1.5em;
+  background-size: 100% 1.5em;
+  -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+}
+.newsboard_wrapper .newsboard .close_button {
+  color: #777;
+  font-size: 1.2em;
+  text-decoration: none;
+  line-height: 1em;
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  display: block;
+}
+.newsboard_wrapper .newsboard .close_button:hover {
+  color: #444;
+}
+.newsboard_wrapper .newsboard .newsboard_footer {
+  color: #999;
+  font-size: 0.8em;
+}
+.newsboard_wrapper .newsboard .paging_bar {
+  font-size: 1.8em;
+  padding: 0 1.25rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1rem;
+  white-space: nowrap;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_left a,
+.newsboard_wrapper .newsboard .paging_bar .float_right a {
+  color: #777;
+  text-decoration: none;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_left a {
+  margin-right: 0.3em;
+}
+.newsboard_wrapper .newsboard .paging_bar .float_right a {
+  margin-left: 0.3em;
+}
+.newsboard_wrapper .newsboard .paging_bar .progressbar {
+  display: block;
+  width: 40%;
+  margin: 0 auto;
+}
+.newsboard_wrapper .newsboard .paging_bar progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  vertical-align: 0;
+  line-height: normal;
+  color: #2f83e8;
+  width: 100%;
+  height: 0.6rem;
+  border-style: none;
+  padding: 0;
+  background-color: #eee;
+  -webkit-border-radius: 0.3rem;
+  -moz-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar {
+  padding: 0;
+  border-style: none;
+  background-color: transparent;
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value {
+  -webkit-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  background-color: #2f83e8;
+  background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd);
+  background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
+}
+.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar {
+  -moz-border-radius: 0.3rem;
+  border-radius: 0.3rem;
+  background-color: #2f83e8;
+  background-image: -moz-linear-gradient(top, #8bbaf2, #176acd);
+  background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
+}
+.newsboard_wrapper .newsboard .newsboard_content h1,
+.newsboard_wrapper .newsboard .newsboard_content h2 {
+  font-weight: normal;
+  font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial,
+    sans-serif;
+  letter-spacing: 0.03em;
+}
+.newsboard_wrapper .newsboard .newsboard_content h1 {
+  font-size: 1.75em;
+}
+.newsboard_wrapper .newsboard .newsboard_content h2 {
+  color: #2f83e8;
+  font-size: 1.2em;
+  line-height: 1.4em;
+}
+.newsboard_wrapper .newsboard .newsboard_content:empty {
+  color: #999;
+  font-size: 1.15em;
+  text-align: center;
+  padding-top: 10.5rem;
+  background: url(images/empty.png) no-repeat center 3.75rem;
+}
+.newsboard_wrapper .newsboard .newsboard_content:empty:after {
+  content: 'Keine neuen Mitteilungen.';
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Newsboard</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="newsboard.css"
+      media="screen"
+    />
+    <script src="newsboard.js" defer></script>
+  </head>
+
+  <body>
+    <div class="newsboard_wrapper">
+      <div class="newsboard">
+        <span class="message_number">3</span>
+
+        <a href="#" class="close_button" title="Delete message">&times;</a>
+
+        <div class="newsboard_content"></div>
+
+        <div class="paging_bar">
+          <span class="float_left">
+            <a href="#" title="first">«</a>
+            <a href="http://example.com" title="prev">‹</a>
+          </span>
+
+          <span class="float_right">
+            <a href="http://example.com" title="next">›</a>
+            <a href="#" title="last">»</a>
+          </span>
+
+          <span class="progressbar">
+            <progress max="3" value="1" id="messages_progress"></progress>
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/5/examples/newsboard/newsboard.js

@@ -0,0 +1,21 @@
+'use strict';
+
+{
+  const messages = [
+    `<h1>Tutors are on a strike!!!</h1>
+    <h2>All assignmnent are automatically graded with 0 points</h2>
+    <p>Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.</p>
+    <p class="newsboard_footer">9/25/2015 by N. O'body</p>`,
+
+    `<h1>Madness!</h1>
+    <h2>How to earn a fortune, with a complete stupid idea</h2>
+    <p>Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.</p>
+    <p class="newsboard_footer">08/13/20156 by Dr. Ken Hurt</p>`,
+
+    `<h1>I did something, and you will never guess what happened next...</h1>
+    <h2>Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!</h2>
+    <p>Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
+    <p>Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.</p>
+    <p class="newsboard_footer">2015/06/02 by Chris P. Bacon</p>`,
+  ];
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Progressbar</title>
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="buy_button.js" defer></script>
+  </head>
+
+  <body>
+    <button id="buy">Buy!</button>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/buy_button/buy_button.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Running light</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script src="running_light.js" defer></script>
+    <script src="../../../lib/dom_helper.js"></script>
+  </head>
+
+  <body>
+    <img src="light_on.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+    <img src="light_off.png" alt="lightbulb" />
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/6/exercises/running_light/running_light.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Font Size</title>
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="font_size.js" defer></script>
+  </head>
+
+  <body>
+    <button id="very_big">Very Large</button>
+    <button id="big">Large</button>
+    <button id="normal">Normal</button>
+    <button id="small">Small</button>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, error. Possimus in reiciendis quo numquam
+      assumenda, deleniti doloremque, facere alias odio animi est aliquam delectus corrupti ducimus fugiat ea commodi.
+    </p>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/font_size_big_small/font_size.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.css

@@ -0,0 +1,19 @@
+p {
+  font-size: 1.5em;
+}
+
+.keyword {
+  font-weight: bolder;
+  color: #225;
+}
+
+#tooltip {
+  width: 250px;
+  border: 2px solid #339;
+  padding: 5px;
+  background-color: #eef;
+  opacity: 0.9;
+
+  font-size: 1em;
+  text-align: justify;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tooltips</title>
+
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="tooltips.js" defer></script>
+
+    <link rel="stylesheet" href="tooltips.css" />
+  </head>
+
+  <body>
+    <h1>Quantum Entanglement Mugs</h1>
+    <h3>DRINK IN SYNC.</h3>
+
+    <p>
+      In the realm of <span class="keyword">quantum mechanics</span>, particles
+      can be <span class="keyword">entangled</span> in such a way that the state
+      of one instantly influences the state of another, no matter the distance.
+      This phenomenon fascinates physicists and challenges our understanding of
+      reality. Imagine sipping your coffee from a mug that celebrates this
+      <span class="keyword">quantum</span> wonder. Just like entangled
+      particles, you and a friend can share a connection over any distance with
+      these mugs. Introducing the Quantum
+      <span class="keyword">Entanglement</span> Mugs.
+    </p>
+
+    <p>
+      Each set of Quantum <span class="keyword">Entanglement</span> Mugs
+      includes two ceramic mugs designed to reflect the concept of entanglement.
+      Share one with a friend, and no matter how far apart you are, you'll feel
+      connected. Use them at your next physics meetup, and your colleagues will
+      appreciate your thoughtful nod to quantum theory. Enjoy your coffee!
+    </p>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/7/examples/tooltips/tooltips.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Document</title>
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="color_change.js" defer></script>
+  </head>
+
+  <body>
+    <button>Red</button>
+    <button>Green</button>
+    <button>Blue</button>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/color_change/color_change.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.css

@@ -0,0 +1,34 @@
+.tabs > nav ul {
+  margin: 0;
+  padding: 8px 0 0 5px;
+  list-style-type: none;
+  list-style: none;
+  height: 30px;
+  border: 1px solid #999999;
+  background-color: #b0b0b0;
+}
+.tabs > nav ul li {
+  display: block;
+  float: left;
+  padding: 0 10px;
+  margin: 0 2px 0 0;
+  height: 29px;
+  white-space: nowrap;
+  line-height: 30px;
+  border-color: #999999;
+  border-width: 1px;
+  border-style: solid solid none solid;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background-color: #d8d8d8;
+  background-image: linear-gradient(to bottom, #f9f9f9, #d8d8d8);
+}
+.tabs > nav ul li:hover {
+  background-color: #cacaca;
+  background-image: linear-gradient(to bottom, #eeeeee, #cacaca);
+}
+.tabs > nav ul li.active {
+  border-bottom: 2px solid #f9f9f9;
+  background-image: none;
+  background-color: #f9f9f9;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>SEO Seminar: 2-tägige Schulung Suchmaschinenoptimierung</title>
+
+    <link href="tabs.css" media="all" rel="stylesheet" type="text/css" />
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="tabs.js" defer></script>
+  </head>
+
+  <body>
+    <div class="tabs">
+      <nav>
+        <ul>
+          <li>Overview</li>
+          <li>Topics</li>
+          <li>Learning Objectives</li>
+          <li>Date</li>
+        </ul>
+      </nav>
+
+      <article>
+        <h1>2-day SEO intensive seminar: with search engine optimization (SEO) to success on the web!</h1>
+        <p>&hellip;</p>
+      </article>
+
+      <article>
+        <h2>Topics</h2>
+        <p>&hellip;</p>
+      </article>
+
+      <article>
+        <h2>Learning Objectives</h2>
+        <p>&hellip;</p>
+      </article>
+
+      <article>
+        <h2>Date</h2>
+        <p>&hellip;</p>
+      </article>
+    </div>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/7/exercises/tabbed_navigation/tabs.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.css

@@ -0,0 +1,34 @@
+#info {
+  position: absolute;
+  left: 20px;
+  top: 410px;
+  width: 639px;
+  border: 2px solid #000077;
+  padding: 4px;
+}
+
+#info h3 {
+  margin-top: 2px;
+}
+
+#pois {
+  position: absolute;
+  left: 20px;
+}
+
+#pois img {
+  position: absolute;
+}
+
+#fr {
+  top: 0px;
+  left: 0px;
+}
+#uk {
+  top: 0px;
+  left: 312px;
+}
+#it {
+  top: 201px;
+  left: 312px;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Awesome Tours</title>
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="awesome_tours.js" defer></script>
+    <link rel="stylesheet" type="text/css" href="awesome_tours.css" />
+  </head>
+
+  <body>
+    <section id="pois">
+      <img
+        src="eiffelturm.jpg"
+        id="fr"
+        alt="Eiffel Tower"
+        data-description="The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel French pronunciation: ​[tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower..."
+        data-country-code="fr"
+        data-flag-name="French Flag"
+      />
+
+      <img
+        src="tower_bridge.jpg"
+        id="uk"
+        alt="Tower Bride"
+        data-description="Tower Bridge (built 1886–1894) is a combined bascule and suspension bridge in London. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned..."
+        data-country-code="uk"
+        data-flag-name="Union Jack"
+      />
+
+      <img
+        src="colosseum.jpg"
+        id="it"
+        alt="Colosseum"
+        data-description="The Colosseum or Coliseum (/kɒləˈsiːəm/ kol-ə-see-əm), also known as the Flavian Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfiteˈaːtro ˈflaːvjo] or Colosseo [kolosˈsɛːo]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of concrete and sand,[1] it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum. Construction began..."
+        data-country-code="it"
+        data-flag-name="Italian Flag"
+      />
+    </section>
+
+    <section id="info">
+      <p>Move your mouse pointer over the images to read the descriptions here!</p>
+    </section>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/8/exercises/awesome_tours/awesome_tours.js

@@ -0,0 +1,3 @@
+'use strict';
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_list.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const PRODUCTS = [
+  { name: '3Doodler 3D Printing Pen', price: 29.99 },
+  { name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },
+  { name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 },
+];

03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Product Management</title>
+    <link rel="stylesheet" href="products.css" />
+    <script src="../../../lib/dom_helper.js" defer></script>
+    <script src="product_list.js" defer></script>
+    <script src="product_manager.js" defer></script>
+  </head>
+  <body>
+    <h1>Products</h1>
+    <table id="products">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price in €</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>3Doodler 3D Printing Pen</td>
+          <td>29.99</td>
+        </tr>
+        <tr>
+          <td>Powerstation 5- E. Maximus Chargus</td>
+          <td>44.95</td>
+        </tr>
+        <tr>
+          <td>8-Bit Legendary Hero Heat-Change Mug</td>
+          <td>6.99</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p id="new_product">
+      <input type="text" placeholder="name" class="name" />
+      €
+      <input type="number" max="999" placeholder="price" class="price" />
+      <button id="add_product">Add</button>
+    </p>
+  </body>
+</html>

03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/product_manager.js

@@ -0,0 +1,3 @@
+'use strict'
+
+// Implement your code here

03_dom/MATERIAL/accompanying_files/accompanying-files/9/examples/product_manager/products.css

@@ -0,0 +1,31 @@
+.price {
+  width: 4em;
+}
+
+#products td {
+  border: 1px solid black;
+}
+
+#products {
+  border-collapse: collapse;
+}
+
+#products th,
+#products td {
+  padding: 5px;
+  border: 1px solid black;
+}
+
+#products th {
+  background-color: #aaa;
+}
+
+#products td > button {
+  margin-right: 5px;
+  font-size: 120%;
+  width: 40px;
+}
+
+.remove_product {
+  color: red;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/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;
+}

03_dom/MATERIAL/accompanying_files/accompanying-files/lib/dom_helper.js

@@ -0,0 +1,4 @@
+'use strict';
+
+const $ = (q) => document.querySelector(q);
+const $$ = (q) => Array.from(document.querySelectorAll(q));

03_dom/MATERIAL/accompanying_files/template/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Index</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body></body>
+</html>

03_dom/MATERIAL/accompanying_files/template/script.js

@@ -0,0 +1 @@
+'use strict';

03_dom/agenda.md

@@ -0,0 +1,388 @@
+---
+marp: true
+theme: default
+---
+
+## JavaScript Grundlagen Teil 1.
+
+---
+
+#### Tag 01
+
+**Inhalt:**
+
+- Vorstellungsrunde
+- Einrichtung der IDE
+- Tools für die Webentwicklung (Emmet, Markdown, VS-Code)
+- Arbeiten mit VSCode
+- Konsolenausgaben mit `console.log()`
+
+**Übungen:**
+
+- Übungen Content Factory
+
+---
+
+#### Tag 02
+
+**Inhalt:**
+
+- Dialogfenster in JS `prompt()`, `alert()`, `confirm()`
+- Kommentare in JS
+- Rechnen in JS
+- Datentyp String, Number, Boolean
+- literal und typeof
+- Prioritätsreihenfolge
+
+**Übungen:**
+
+Übung 3 - 6
+
+---
+
+#### Tag 03
+
+**Inhalt:**
+
+- Variablen und Konstanten in JS
+- Zusammengesetzte Zuweisungsoperatoren
+- Increment & Decrement
+- Strings verketten mit +
+
+**Übungen:**
+
+Übung 7 - 12
+
+---
+
+#### Tag 04
+
+**Inhalt:**
+
+- Escape-Notation
+- Implizite und explizite Typkonvertierung
+- NaN - Paradoxon
+- Math Object
+- Number.toFixed()
+
+**Übungen:**
+
+Übung 14 - 18
+
+---
+
+#### Tag 05
+
+**Inhalt:**
+
+- Repetition der Inhalte
+- Relationale Operatoren & Vergleichoperatoren
+- isNaN
+- Lexikographische Vergleiche
+- **Exkurs: HTML-Formularfelder**
+- 1:1 Meeting
+
+**Übungen:**
+
+Übung Kontaktformular mit HTML und BS
+
+---
+
+#### Tag 06
+
+**Inhalt:**
+
+- **Exkurs: HTML Formularfelder mit BS**
+- if else Verzweigung und ternärer Operator
+- logische Operatoren UND und ODER
+- unärer Operator (!)
+- String Methoden Part I
+
+**Übungen:**
+
+Übung 19 - 26
+
+---
+
+#### Tag 07
+
+**Inhalt:**
+
+- String Methoden Part II
+- Funktionen in JS
+- Funktionen mit Übergabeparameter
+- Funktionen mit Rückgabewerten
+
+**Übungen:**
+
+Übung 26 - 35
+
+---
+
+#### Tag 08
+
+**Inhalt:**
+
+- Funktionen mit Übergabeparameter
+- Funktionen mit Rückgabewerten
+- Guards
+- Array Part 1
+
+**Übungen:**
+
+Übung 35 - 38
+
+---
+
+#### Tag 09
+
+**Inhalt:**
+
+- Array Methoden toSorted, toReversed, toSpliced
+- toSorted, toReversed
+- Array sort mit "compare function"
+- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every)
+
+**Übungen:**
+
+Übung 39 - 48
+
+---
+
+#### Tag 10
+
+**Inhalt:**
+
+- Array.find und Array.findIndex
+- Alle Array Higher Order Funktionen im Überblick
+- local scoping
+- **Exkurs: Schleifen**
+
+**Übungen:**
+
+Übung 46 - 48
+
+---
+
+## JavaScript für Fortgeschrittene
+
+---
+
+#### Tag 11
+
+**Inhalt:**
+
+- Einführung in JS für Fortgeschrittene
+- Objekte in JS
+
+**Übungen:**
+
+Projektarbeit
+Abschlussquiz - JS Grundlagen
+
+---
+
+#### Tag 12
+
+**Inhalt:**
+
+- Destructuring von Objekten und Arrays
+- Rekursion
+
+**Übungen:**
+
+Übung 01 - 10
+
+---
+
+#### Tag 13
+
+**Inhalt:**
+
+- Promises
+- Callback-Hell
+- Installation von node (npm) und Windows Terminal (für Node)
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part I**
+
+**Übungen:**
+
+---
+
+#### Tag 14
+
+**Inhalt:**
+
+- Promise Aufbau
+- Promise in Funktionen
+- File System von Node
+- commonjs vs esm
+- async await
+
+**Übungen:**
+
+Übung 09 - 11
+
+---
+
+#### Tag 15
+
+**Inhalt:**
+
+- Wiederholung der Inhalte
+- Promise.all()
+- **Exkurs: Switch Case Abfragen**
+- **Exkurs: Statische Webseite mit Sass und HTML**
+- **Exkurs: Versionierung mit Github Part I**
+- 1:1 Meeting
+
+---
+
+#### Tag 16
+
+**Inhalt:**
+
+- **Exkurs: Statische Webseite mit Sass und HTML Part II**
+- Mehrdimensionale Arrays
+
+**Übungen:**
+
+Projektarbeiten
+Übungen 11 -13
+
+---
+
+#### Tag 17
+
+**Inhalt:**
+
+- Chess-Beispiel
+- Arbeiten mit Fetch API
+- fetch mit Promise und async...await
+- Joke API auslesen
+- **Exkurs: Versionierung mit Github Part I**
+
+**Übungen:**
+
+Übungen 14 - 24
+
+---
+
+#### Tag 18
+
+**Inhalt:**
+
+- XML-HttpRequest und AJAX mit jQuery
+- Node Installation (Wiederholung)
+- Node Standardbib
+  - fs
+
+**Übungen:**
+
+Projektarbeit
+
+---
+
+#### Tag 19
+
+**Inhalt:**
+
+- NPM Befehle
+- CSV to HTML
+- Node Standardbib
+  - zlib (stream)
+  - Crypto
+- Abschluss von JS für Fortgeschrittene
+- Projektvorstellung 1 + 2
+
+**Übungen:**
+
+Übungen 25 - 31
+
+---
+
+#### Tag 20
+
+**Inhalt:**
+
+- **Einrichtung von Git**
+- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
+
+**Übungen:**
+
+Projektarbeit
+Übungen 31 - 32
+
+---
+
+# JavaScript und das Document Object Model (DOM)
+
+---
+
+#### Tag 21
+
+**Inhalt:**
+
+- Einführung in JS DOM
+- DOM Selection (querySelector, querySelectorAll)
+- $ & $$ Helper
+- CSS Selektoren
+
+**Übungen:**
+
+Übungen 01 - 05
+
+---
+
+#### Tag 22
+
+- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
+- **Wetter API auslesen**
+
+---
+
+#### Tag 23
+
+- Defer & Async
+- JS Dateien auslagern
+- Chat Gestaltung (DOMTokenList Objekt)
+- Optimierung von Projektstruktur
+- Events in JS MouseEvent, KeyboardEvent
+
+**Übungen:**
+
+Übungen 06 - 08
+
+---
+
+#### Tag 24
+
+**Inhalt:**
+
+- Projekt: Newsboard
+- HTML Element Progress
+- IDL-Attribut vs. Content-Attribut
+- HTML Attribute mit boolescher Zuweisung
+- getComputedStyle() und style-Attribute
+
+**Übungen:**
+
+Übung 09 - 13
+
+---
+
+#### Tag 25
+
+**Inhalt:**
+
+- Repetition der Inhalte
+- Tooltip: HTML erweitern mit Data-Attribut
+- Dataset Attribut
+
+- **Projektarbeit / Content Factory**
+
+**Übungen:**
+
+Übung 14
+
+---

03_dom/docs/nodejs-installation.md

@@ -0,0 +1,114 @@
+## NVM - Node Version Manager
+
+nvm ist ein Versionsmanager für node.js. Über nvm können mehrere unterschiedliche Node Versionen installiert werden. NVM wird über die Konsole aufgerufen und ist mit verschiedenen Shells kompatibel (sh, dash, ksh, zsh, bash).
+
+#### Links
+
+- <https://github.com/coreybutler/nvm-windows> (Win)
+- <https://github.com/nvm-sh/nvm> (Mac OS)
+
+#### Installation Windows
+
+1. Lade den NVM-Installer über folgenden Link herunter: <https://github.com/coreybutler/nvm-windows/releases>
+2. Installiere NVM über den [Installer](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip)
+3. Sollte vorher bereits NodeJS global ohne NVM installiert worden sein, wird empfohlen die vorherige NodeJS Version zu [deinstallieren](https://stackoverflow.com/a/55300310).
+
+### Installation Mac OS
+
+- Installiere NVM über die Konsole mit:
+
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
+```
+
+- Füge den Pfad zum NVM Ordner zur Shell-Config hinzu. (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).
+
+```bash
+export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+```
+
+- Aktuelle Informationen zur Installation findet man unter folgendem Link: <https://github.com/nvm-sh/nvm>
+
+#### Erste Schritte
+
+Sobald NVM erfolgreich installiert wurde kann man über nvm in der Konsole eine neue Node Version mit folgendem Befehl installieren:
+
+```bash
+nvm install [NODE VERSIONSNUMMER]
+```
+
+> Hinweis: Die aktuellste Versionsnummer von NodeJS findet man am einfachsten auf der [NodeJS-Seite](https://nodejs.org/en/)
+
+Installierte Node Versionen auflisten
+
+```bash
+nvm list
+```
+
+Node Version verwenden/wechseln
+
+```bash
+nvm use [NODE VERSIONSNUMMER]
+```
+
+Node Version als Standard einrichten
+
+```bash
+nvm alias default [NODE VERSIONSNUMMER]
+```
+
+## Node.js
+
+### Definition
+
+Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
+
+## Neues Projekt erstellen
+
+- Über die Konsole in den Projektordner gehen.
+
+Projektordner wechsel über "change directory" (cd)
+
+```bash
+cd [projektpfad]
+```
+
+- Eigene Package.json Datei generieren (nur einmalig bei einem neuen Projekt notwendig.)
+
+```bash
+npm init
+```
+
+- Module installieren, die nur für die Entwicklung benötigt werden. (devDependicies)
+
+| Befehl                                                                   | Zweck                                                                                                                        |
+| ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| `npm install Modul@Version`                                              | installiere Modul in der Version Version (semantic versioning)                                                               |
+| `npm install Modul@Version --save`<br>`npm install Modul@Version -S`     | Modul wird in der Datei `package.json` unter dependencies hinzugefügt (Mittlerweile default)                                 |
+| `npm install Modul@Version --save-dev`<br>`npm install Modul@Version -D` | Modul wird in der Datei `package.json` unter devdependencies hinzugefügt                                                     |
+| `npm install Modul@Version --global`<br>`npm install Modul@Version -g`   | Modul wird global installiert. (Von jedem Ordner aus anwendbar)                                                              |
+| `npm uninstall Modul@Version`                                            | entfernt Modul aus `node_modules`                                                                                            |
+| `npm uninstall Modul@Version --save`                                     | entfernt Modul aus `node_modules` und aus der dependencies- Eigenschaft in der `package.json`.                               |
+| `npm update Modul`                                                       | Aktualisiert Modul auf die neueste Version                                                                                   |
+| `npm update Modul --save`                                                |  Aktualisiert Modul auf die neueste Version und auch die Versionsnummer der dependencies- Eigenschaft in der `package.json`. |
+| `npm init`                                                               | erstellt eine package.json-Datei (der Befehl fragt die Eigenschaften ab)                                                     |
+| `npm init --yes`                                                         | erstellt eine package.json-Datei (der Befehl setzt Default-Werte ein)                                                        |
+| `npm list`                                                               | listet alle installierten Module auf.                                                                                        |
+| `npm search`                                                             | Suchbegriff sucht Module, deren Namen den Suchbegriff enthält                                                                |
+
+# Globale Module
+
+## SASS
+
+### Definition
+
+> Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
+
+Sass ist eine CSS-Preprocessor Sprache.
+
+```bash
+npm install sass -g
+```
+
+## Liste von verwendeten Modulen

03_dom/linksammlung.md

@@ -0,0 +1,102 @@
+# Linksammlung
+
+## Repo
+
+- <https://git.gkontra.de/ptorrel/JS>
+
+## Allgemeine Links
+
+- [StackOverflow Survey 2023](https://survey.stackoverflow.co/2023)
+- [StackOverflow Survey 2024](https://survey.stackoverflow.co/2024)
+- [StackOverflow Survey 2025](https://survey.stackoverflow.co/2025)
+- [State Of JS 2023](https://2023.stateofjs.com/en-US)
+- [State Of JS 2024](https://2024.stateofjs.com/en-US)
+- [State Of JS 2025](https://2025.stateofjs.com/en-US)
+- [Bootstrap 5](https://getbootstrap.com/)
+- [MDN - Mozilla Developer Network](https://developer.mozilla.org/)
+- [JavaScript Historie](https://de.wikipedia.org/wiki/JavaScript)
+- [Can I Use](https://caniuse.com/)
+- [ASCII Table](https://asciitable.xyz/)
+- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
+- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
+- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
+- [CSS BEM (Block-Element-Modifier)](https://getbem.com/introduction/)
+
+## Tools/ Software
+
+- [Microsoft Powertoys](https://learn.microsoft.com/fr-fr/windows/powertoys/install?tabs=gh%2Cextract-094)
+- [Tipp10](https://online.tipp10.com/de/)
+- [NVM - Node Version Manager](https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip)
+- [Git - SCM](https://git-scm.com/)
+
+## Passwordmanager
+
+- [Enpass](https://www.enpass.io/pricing/)
+- [1password](https://1password.com/de/pricing/password-manager)
+- [KeepassXC](https://keepassxc.org/)
+- [Safe in cloud](https://safe-in-cloud.com/)
+- [BitWarden](https://bitwarden.com/de-de/)
+<!-- - [Dashlane](https://www.dashlane.com/) -->
+
+## JS Tuts
+
+- [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
+
+## CSS/SCSS Tuts
+
+- [CSS Reference](https://cssreference.io/)
+- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
+- [CSS Gridgarden](https://cssgridgarden.com/#de)
+
+## JS Styleguide
+
+- [AirBnb Styleguide](https://github.com/airbnb/javascript)
+- [Google](https://google.github.io/styleguide/jsguide.html)
+- [jQuery Styleguide](https://contribute.jquery.org/style-guide/js/)
+- [MDN (ES6) Styleguide](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript)
+
+## Fonts
+
+- [Hack Font](https://sourcefoundry.org/hack/)
+- [Meslo Nerd Font](https://github.com/romkatv/powerlevel10k#fonts)
+- [Google Fonts Download](https://gwfh.mranftl.com/fonts)
+- [50 Best Google Fonts](https://www.pagecloud.com/blog/best-google-fonts-pairings)
+- [200 best google Webfonts](https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html)
+- [Google Fonts](https://fonts.google.com/)
+- [FontAwesome](https://fontawesome.com/icons?d=gallery)
+- [FontSquirrl](https://www.fontsquirrel.com/)
+- [Dafont](https://www.dafont.com/de/)
+
+## Bilder/ Vektoren
+
+- [Freepik](https://www.freepik.com/)
+- [Flaticon](https://www.flaticon.com/)
+- [Pexels](https://www.pexels.com/de-de/)
+- [FavIcon Generator](https://realfavicongenerator.net/)
+
+## Farben
+
+- [CSS Gradient](https://cssgradient.io/)
+- [Color Adobe](https://color.adobe.com/de/create/color-wheel)
+- [Color Adobe Explore](https://color.adobe.com/de/explore)
+
+## CSS/SCSS Tuts
+
+- [CSS Reference](https://cssreference.io/)
+- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
+- [CSS Gridgarden](https://cssgridgarden.com/#de)
+- [CSS Sticky Footer](https://css-tricks.com/couple-takes-sticky-footer/)
+- [SASS Structure YT](https://www.youtube.com/watch?v=9Ld-aOKsEDk&t=47s)
+- [SASS Structure Guidelines](https://sass-guidelin.es/#architecture)
+
+## Terminals
+
+- [iterm - Unix](https://iterm2.com/) - RECOMMENDED (WIN)
+- [Ghostty - Unix](https://ghostty.org/) - NEW
+- [Warp](https://www.warp.dev/) - NEW
+- [Hyper.js](https://hyper.is/)
+- [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701?icid=CNavAppsWindowsApps&hl=de-DE&gl=DE) - RECOMMENDED (WIN)
+- [Git Bash](https://git-scm.com/)
+- [Cmdr Terminal mit Bash](https://cmder.app/)