2026-07-15 14:11:18 +02:00
parent 1627fb7260
commit a78c7aa1be
27 changed files with 1200 additions and 1 deletions
--- a/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js
+++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/assets/js/main.js
@@ -0,0 +1,50 @@
+'use strict';
+
+{
+  const init = () => {
+    showFirstMessage();
+    $('[title=next]').addEventListener('click', nextMessage);
+    $('[title=prev]').addEventListener('click', prevMessage);
+  };
+
+  const showFirstMessage = () => showMessageByNumber(1);
+
+  const showMessageByNumber = (messageNumber) => {
+    $('.newsboard_content').innerHTML = messages[messageNumber - 1];
+  };
+
+  const nextMessage = (e) => {
+    e.preventDefault(); // Standardverhalten unterbinden
+    showMessageByNumber(++currentMessageNumber);
+    console.log('next');
+  };
+  const prevMessage = (e) => {
+    e.preventDefault(); // Standardverhalten unterbinden
+    showMessageByNumber(--currentMessageNumber);
+    console.log('prev');
+  };
+
+  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>`,
+  ];
+  let currentMessageNumber = 1;
+
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+  init();
+}
--- a/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html
+++ b/03_dom/unterricht/tag23/03_newsboard-lernheft/index.html
@@ -13,7 +13,7 @@
  <body>
    <div class="newsboard_wrapper">
      <div class="newsboard">
-        <span class="message_number">3</span>
+        <span class="message_number">X</span>

        <a href="#" class="close_button" title="Delete message">&times;</a>

--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/css/main.css
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/css/main.css
@@ -0,0 +1,239 @@
+* {
+  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('../img/sheets.png') no-repeat;
+}
+.newsboard_wrapper:before {
+  content: url('../img/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('../img/empty.png') no-repeat center 3.75rem;
+}
+.newsboard_wrapper .newsboard .newsboard_content:empty:after {
+  content: 'Keine neuen Mitteilungen.';
+}
+
+.sr-only {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  display: inline-block !important;
+}
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/empty.png
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/empty.png
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/paperclip.png
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/paperclip.png
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/sheets.png
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/img/sheets.png
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/main.js
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/main.js
@@ -0,0 +1,54 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const module = document.querySelector('.newsboard') || console.error('newsboard not found');
+  const DOM = {
+    messageNumber: module.querySelector('.message_number'),
+    newsboardContent: module.querySelector('.newsboard_content'),
+    buttonNext: module.querySelector('.button-next'),
+    buttonLast: module.querySelector('.button-last'),
+    buttonPrev: module.querySelector('.button-prev'),
+    buttonFirst: module.querySelector('.button-first'),
+    progressBar: module.querySelector('.progressbar progress'),
+  };
+
+  console.log(DOM);
+
+  // === INIT =============
+  const init = () => {
+    // Funktionaufrufe zu beginn der Anwendung
+    showMessageByNumber(1);
+    initProgressbar();
+
+    // Eventlauscher zu beginn der Anwendung
+    DOM.buttonNext.addEventListener('click', onClickNext);
+    DOM.buttonPrev.addEventListener('click', onClickPrev);
+    window.addEventListener('keyup', onKeyUp);
+  };
+
+  // === EVENTHANDLER =====
+  const onKeyUp = (e) => {
+    // Übung 8.3 && 8.4 Tastatursteuerung
+  };
+
+  const onClickNext = (e) => {
+    showMessageByNumber((DOM.progressBar.value += 1));
+  };
+  const onClickPrev = (e) => {
+    showMessageByNumber((DOM.progressBar.value -= 1));
+  };
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const showMessageByNumber = (n) => {
+    DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
+  };
+
+  const initProgressbar = () => {
+    DOM.progressBar.max = MESSAGES.length;
+    DOM.progressBar.value = 1;
+  };
+
+  init();
+})();
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/messages.js
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/assets/js/messages.js
@@ -0,0 +1,19 @@
+// Konfigurationsvariablen
+
+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/2019 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>`,
+];
--- a/03_dom/unterricht/tag23/04_newsboard-refactored/index.html
+++ b/03_dom/unterricht/tag23/04_newsboard-refactored/index.html
@@ -0,0 +1,54 @@
+<!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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
+    <script src="assets/js/messages.js"></script>
+    <script src="assets/js/main.js" defer></script>
+  </head>
+
+  <body>
+    <div class="newsboard_wrapper">
+      <div class="newsboard">
+        <span class="message_number">X</span>
+
+        <a href="#" class="close_button" title="Delete message">&times;</a>
+
+        <div class="newsboard_content"></div>
+
+        <div class="paging_bar">
+          <span class="float_left">
+            <button class="button-first" title="first" aria-label="First News">
+              <i class="fa-solid fa-angles-left"></i>
+              <span class="sr-only">First News</span>
+            </button>
+            <button class="button-prev" title="prev" aria-label="Previous News">
+              <i class="fa-solid fa-angle-left"></i>
+              <span class="sr-only">Previous News</span>
+            </button>
+          </span>
+
+          <span class="float_right">
+            <button class="button-next" title="next" aria-label="Next News">
+              <i class="fa-solid fa-angle-right"></i>
+              <span class="sr-only">Next News</span>
+            </button>
+            <button class="button-last" title="last" aria-label="Last News">
+              <i class="fa-solid fa-angles-right"></i>
+              <span class="sr-only">Last News</span>
+            </button>
+          </span>
+
+          <span class="progressbar">
+            <progress max="" value="" id="messages_progress"></progress>
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
--- a/03_dom/unterricht/tag23/05_progress-element/index.html
+++ b/03_dom/unterricht/tag23/05_progress-element/index.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML5 - Progress Element | IDL vs. Content-Attribut</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>HTML5 - Progress Element | IDL vs. Content-Attribut</h1>
+        <hr />
+        <form action="">
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="progress-percent" class="form-label">Fortschrittsbalken</label>
+                <progress
+                  id="progress-percent"
+                  name="percent"
+                  max="100"
+                  value="0"
+                  class="form-progress progress"
+                  data-ref=""></progress>
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+          </div>
+          <!-- ▲ /row ▲ -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="input-zip-code" class="form-label">PLZ</label>
+                <input
+                  type="number"
+                  name="zip-code"
+                  id="input-zip-code"
+                  min="0"
+                  max="10000"
+                  step="1"
+                  value="60431"
+                  class="form-control input-zip-code" />
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+          </div>
+          <!-- ▲ /row ▲ -->
+        </form>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      const progressEl = $('#progress-percent');
+      const inputEl = $('#input-zip-code');
+
+      // IDL Attribute
+
+      console.log(inputEl.attributes); // => NamedNodeMap { 0: type, 1: name ... }
+
+      console.log(inputEl.id); // => "input-zip-code"
+      console.log(inputEl.type); // => "number"
+      console.log(inputEl.min); // => "0"
+      console.log(inputEl.max); // => "100000"
+      console.log(inputEl.step); // => "1"
+      console.log(inputEl.value); // => "60431"
+
+      console.log(inputEl.class); // => undefined
+      console.log(inputEl.classList); //=> DOMTokenList ["form-control", "input-zip-code" ]
+      console.log(inputEl.classList.value); //=>  "form-control input-zip-code"
+
+      // IDL Attribute
+      console.log(progressEl.class); // => undefined
+      console.log(progressEl.classList); //=> DOMTokenList ["form-progress", "progress" ]
+      console.log(progressEl.classList.value); //=>  "form-progress progress"
+
+      // Progress Element (AUSNAHME)
+      console.log(progressEl.max); //=> 100 <--- Number Ausnahme
+      console.log(progressEl.value); //=> 0 <--- Number Ausnahme
+
+      // Content Attribut (Methoden)
+
+      // Node.setAttribute('ATTRIBUT_NAME', 'VALUE');
+      progressEl.setAttribute('value', '50');
+      inputEl.setAttribute('value', '65555');
+      inputEl.setAttribute('disabled', 'disabled');
+
+      // Node.removeAttribute('ATTRIBUT_NAME')
+      inputEl.removeAttribute('disabled');
+      // progressEl.removeAttribute('class');
+
+      // Node.getAttribute('ATTRIBUT_NAME')
+      progressEl.getAttribute('value'); // => '50' <--- IMMER STRING
+      progressEl.getAttribute('class'); // => "form-progress progress" <--- IMMER STRING
+
+      inputEl.addEventListener('input', (e) => {
+        console.log('IDL: ', inputEl.value); // Aktueller VALUE
+
+        console.log('Content (getAtrribute()): ', inputEl.getAttribute('value'));
+        // getAttribute - gibt immer den Ursprungswert zurück
+      });
+    </script>
+  </body>
+</html>
--- a/03_dom/unterricht/tag23/06_attribut-boolean/index.html
+++ b/03_dom/unterricht/tag23/06_attribut-boolean/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IDL (mit Boolean) vs Content Attribute (get|setAttribute)</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>IDL (mit Boolean) vs Content Attribute (get|setAttribute)</h1>
+        <hr />
+        <form action="">
+          <div class="mb-3">
+            <input type="search" name="search" id="input-search" class="form-control input-search" pattern="[a-z]" />
+          </div>
+
+          <div class="mb-3">
+            <input type="range" name="price" id="input-range" min="0" max="100" step="5" class="form-range" value="0" />
+          </div>
+
+          <div class="mb-3 form-check">
+            <input type="checkbox" class="form-check-input" value="agb" id="input-cb-agb" />
+
+            <label for="input-cb-agb">AGB gelesen?</label>
+          </div>
+
+          <button class="btn btn-dark button-send mt-3" disabled>Senden</button>
+
+          <hr />
+
+          <button class="btn btn-success button-check-on mt-3">Aktiviere Checkbox über diesen Button</button>
+
+          <button class="btn btn-danger button-check-off mt-3">Deaktiviere Checkbox über diesen Button</button>
+
+          <button class="btn btn-info button-check-on-off mt-3">De- /und aktiviere Checkbox über diesen Button</button>
+        </form>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      const DOM = {};
+      DOM.cbAgb = $('#input-cb-agb');
+      DOM.inputRange = $('input[type="range"]');
+      DOM.btnSend = $('.button-send');
+      DOM.inputSearch = $('input[type="search"]');
+
+      DOM.buttonCheckOn = $('.button-check-on');
+      DOM.buttonCheckOff = $('.button-check-off');
+      DOM.buttonCheckOnOff = $('.button-check-on-off');
+
+      // IDL mit boolscher Wertzuweisung (RECOMMENDED)
+      DOM.cbAgb.checked = true;
+      DOM.inputSearch.required = false;
+      DOM.inputSearch.readOnly = false;
+
+      DOM.btnSend.disabled = true;
+
+      // Content Attribut Methoden
+      DOM.btnSend.removeAttribute('disabled');
+      DOM.btnSend.setAttribute('disabled', '');
+
+      DOM.inputRange.addEventListener('input', (e) => {
+        console.log('value: ', e.target.value); // aktueller Wert
+
+        // console.log(e.target.getAttribute('value')); // ACHTUNG: Immer nur der Ursprungswert
+      });
+
+      DOM.cbAgb.addEventListener('change', (e) => {
+        const cbEl = e.target;
+        console.log(cbEl.checked); // => true | false
+
+        if (!cbEl.checked) {
+          DOM.btnSend.disabled = true;
+        } else {
+          DOM.btnSend.disabled = false;
+        }
+
+        // DOM.btnSend.disabled = (!cbEl.checked) ? true : false
+
+        // DOM.btnSend.disabled = !cbEl.checked;
+      });
+    </script>
+  </body>
+</html>