From 057001ad0357f9c2e74f82fe91686feb4f85c873 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Tue, 6 Oct 2026 12:12:17 +0200 Subject: [PATCH] --- .../index.html | 125 ++++++++++++++++++ .../tag22/02_attribut-boolean/index.html | 90 +++++++++++++ .../03_style-font-size/assets/js/main.js | 96 ++++++++++++++ .../tag22/03_style-font-size/index.html | 60 +++++++++ 4 files changed, 371 insertions(+) create mode 100644 03_js-dom/unterricht/tag22/01_progress-element-idl-vs-content/index.html create mode 100644 03_js-dom/unterricht/tag22/02_attribut-boolean/index.html create mode 100644 03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js create mode 100644 03_js-dom/unterricht/tag22/03_style-font-size/index.html diff --git a/03_js-dom/unterricht/tag22/01_progress-element-idl-vs-content/index.html b/03_js-dom/unterricht/tag22/01_progress-element-idl-vs-content/index.html new file mode 100644 index 0000000..256cacc --- /dev/null +++ b/03_js-dom/unterricht/tag22/01_progress-element-idl-vs-content/index.html @@ -0,0 +1,125 @@ + + + + + + HTML5 - Progress Element | IDL vs. Content-Attribut + + + +
+
+

HTML5 - Progress Element | IDL vs. Content-Attribut

+
+
+
+
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+ +
+ +
+ +
    +
  1. Listenpunkt 1
    2. +
  2. + Listenpunkt 2 +
      +
    1. Unterpunkt 1
      2. +
    2. Unterpunkt 2
      3. +
    3. Unterpunkt 3
      4. +
    +
    3. +
  3. Listenpunkt 3
    4. +
  4. Listenpunkt 4
    5. +
+ + Alex
+
+
+ + + diff --git a/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html b/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html new file mode 100644 index 0000000..2a90c87 --- /dev/null +++ b/03_js-dom/unterricht/tag22/02_attribut-boolean/index.html @@ -0,0 +1,90 @@ + + + + + + IDL (mit Boolean) vs Content Attribute (get|setAttribute) + + + +
+
+

IDL (mit Boolean) vs Content Attribute (get|setAttribute)

+
+
+
+ +
+ +
+ +
+ +
+ + + +
+ + + +
+ + + + + + +
+
+
+ + + diff --git a/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js b/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js new file mode 100644 index 0000000..8cc8739 --- /dev/null +++ b/03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js @@ -0,0 +1,96 @@ +'use strict'; + +(() => { + const $ = (qs) => document.querySelector(qs); + const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + + // === DOM & VARS ======= + const SMALL = 14; + const NORMAL = 16; + const BIG = 24; + const VERY_BIG = 36; + + const DOM = { + // btnVeryLarge: $('.button-very-large'), + // btnBig: $('.button-big'), + // btnNormal: $('.button-normal'), + // btnSmall: $('.button-small'), + // btnIncrease: $('.button-increase'), + // btnDecrease: $('.button-decrease'), + btns: $$('.button-controls button'), + text: $('p'), + }; + + console.log(DOM); + + // === INIT ============= + const init = () => { + DOM.btns.forEach((el) => { + el.addEventListener('click', onClickFontSize); + }); + // DOM.btnVeryLarge.addEventListener('click', onClickVeryLarge); + // DOM.btnBig.addEventListener('click', onClickBig); + // DOM.btnNormal.addEventListener('click', onClickNormal); + // DOM.btnSmall.addEventListener('click', onClickSmall); + // DOM.btnIncrease.addEventListener('click', onClickInc); + // DOM.btnDecrease.addEventListener('click', onClickDec); + + console.log(DOM.text.offsetWidth); // => 1296 + console.log(DOM.text.getBoundingClientRect()); // => DOMRect {x: 216, y: 254, width: 1296, height: 312, top: 254, …} + + console.log(window.getComputedStyle(DOM.text)); // => CSSStyleDeclaration {} + + // Einmalig in der init-funktion Schriftgröße aus CSS ausgelesen und zugewiesen + DOM.text.style.fontSize = window.getComputedStyle(DOM.text).fontSize; + }; + + // === EVENTHANDLER ===== + const onClickFontSize = (e) => { + const btnEl = e.currentTarget; + const label = btnEl.getAttribute('data-label'); + const size = btnEl.getAttribute('data-size'); + switch (label) { + case 'INCREASE': + setFontSize(currentFontSize() + 5); + break; + case 'DECREASE': + setFontSize(currentFontSize() - 5); + break; + default: + setFontSize(size); + } + }; + + // const onClickVeryLarge = (e) => { + // setFontSize(VERY_BIG); + // }; + // const onClickBig = (e) => { + // setFontSize(BIG); + // }; + // const onClickNormal = (e) => { + // setFontSize(NORMAL); + // }; + // const onClickSmall = (e) => { + // setFontSize(SMALL); + // }; + // const onClickInc = (e) => { + // setFontSize(currentFontSize() + 5); + // }; + // const onClickDec = (e) => { + // setFontSize(currentFontSize() - 5); + // }; + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + const setFontSize = (size) => { + DOM.text.style.fontSize = `${size}px`; + }; + + const currentFontSize = () => parseInt(DOM.text.style.fontSize); // '16px' -> 16 + + console.log(parseInt('16px')); // => 16 + console.log(parseInt('€16')); // => NaN + + init(); +})(); diff --git a/03_js-dom/unterricht/tag22/03_style-font-size/index.html b/03_js-dom/unterricht/tag22/03_style-font-size/index.html new file mode 100644 index 0000000..3663178 --- /dev/null +++ b/03_js-dom/unterricht/tag22/03_style-font-size/index.html @@ -0,0 +1,60 @@ + + + + + + Style Font-Size (Beispiel) + + + + + +
+
+

Style Font-Size (Beispiel)

+
+ +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eveniet, voluptatem sint enim culpa dicta + accusamus maiores consequuntur quisquam nisi, itaque voluptas, corrupti velit. Adipisci quo suscipit, + repellendus, necessitatibus modi dolore inventore incidunt, tenetur odit numquam dolorum saepe doloribus + voluptatum eaque in quisquam neque. Nemo animi facere ipsam earum ipsa tempore porro, exercitationem debitis + perspiciatis quisquam ut ea eum. Ea quia delectus odit labore atque nesciunt esse voluptatibus reiciendis + saepe nam provident aspernatur sapiente cumque, incidunt quasi neque dignissimos impedit amet sequi aut + minus optio aliquam officiis. Deserunt dolorem quod, in voluptas sunt, praesentium tenetur ullam dolore + doloremque repudiandae reiciendis veniam debitis eaque nobis quisquam ex quibusdam fugit. Ullam nemo tenetur + perferendis iusto neque fugit excepturi, dolorum ab totam maiores ut aspernatur? Cumque dicta dolore + mollitia, porro sit hic tenetur error voluptate facere iste nisi natus? Libero quaerat ullam explicabo modi + beatae eveniet, aliquid debitis facere enim id rem illum nobis sequi hic quasi. In qui et illo officiis, + animi doloremque ipsa harum, natus voluptate quod, voluptatum architecto doloribus asperiores cupiditate. + Tenetur fuga tempore voluptatum illo velit, sed nemo commodi. Unde perspiciatis aspernatur est iusto + quisquam, magni quibusdam accusantium illo laborum nesciunt laboriosam. Quam reiciendis et ipsum sequi dolor + minus aspernatur commodi repellat, aut vero expedita libero quod consequatur! Explicabo temporibus dolore + nihil labore fugit nisi velit veniam dignissimos aperiam id eaque blanditiis, expedita voluptas inventore. + Quisquam minus consequuntur ipsum eos, pariatur fuga minima eaque, temporibus illo placeat dignissimos + laborum maiores incidunt. Dignissimos delectus eum nostrum fuga hic cum aut nesciunt eveniet, cumque ut + beatae officiis et minus vero soluta accusamus corporis aliquam eligendi. Ad, qui ipsum. Distinctio + temporibus ea sequi dignissimos voluptatum quidem! Consequuntur, veniam odit exercitationem sint a + blanditiis voluptatibus quae doloribus adipisci cupiditate, dignissimos placeat asperiores, vel at enim + impedit id debitis! Provident asperiores reprehenderit sit nesciunt? +

+
+
+
+ +