This commit is contained in:
Philippe Torrel
@@ -0,0 +1,125 @@
|
|||||||
|
<!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"></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>
|
||||||
|
|
||||||
|
<ol type="I">
|
||||||
|
<li>Listenpunkt 1</li>
|
||||||
|
<li>
|
||||||
|
Listenpunkt 2
|
||||||
|
<ol type="a" start="3">
|
||||||
|
<li>Unterpunkt 1</li>
|
||||||
|
<li>Unterpunkt 2</li>
|
||||||
|
<li>Unterpunkt 3</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>Listenpunkt 3</li>
|
||||||
|
<li>Listenpunkt 4</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<meter min="0" low="16" value="71" high="92" max="100">Alex</meter><br />
|
||||||
|
</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); // => NameNodeMap { 0: type, 1: name, 2: id, 3: min ... }
|
||||||
|
|
||||||
|
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", value: "form-control input-zip-code"]
|
||||||
|
console.log(inputEl.classList.value); // => "form-control input-zip-code"
|
||||||
|
|
||||||
|
// AUSNAHME des Datentyps (number)
|
||||||
|
|
||||||
|
// Progress Element (AUSNAHME)
|
||||||
|
console.log(progressEl.max); // => 100 <- number
|
||||||
|
console.log(progressEl.value); // => 0 <- number
|
||||||
|
|
||||||
|
// Ol Element (AUSNAHME)
|
||||||
|
console.log($('ol ol').start); // => 3 <- number
|
||||||
|
|
||||||
|
// Meter Element (AUSNAHME)
|
||||||
|
console.log($('meter').value); // => 71 <- number
|
||||||
|
|
||||||
|
// 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');
|
||||||
|
console.log(progressEl.getAttribute('value')); // => "50" <-- IMMER STRING
|
||||||
|
console.log(progressEl.getAttribute('class')); // => "form-progress progress" <-- IMMER STRING
|
||||||
|
|
||||||
|
inputEl.addEventListener('input', (e) => {
|
||||||
|
console.log('IDL - inputEl.value: ', inputEl.value); // Aktuelle wert
|
||||||
|
|
||||||
|
console.log('Content Methode - inputEl.getAttribute("value"): ', inputEl.getAttribute('value')); // => 65555 <---- Ursprungswert
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</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.cbAgb.settAtribute('checked', ''); // <- Alternative
|
||||||
|
|
||||||
|
DOM.inputSearch.required = false;
|
||||||
|
DOM.inputSearch.readOnly = true;
|
||||||
|
|
||||||
|
DOM.cbAgb.checked = false;
|
||||||
|
DOM.btnSend.disabled = true;
|
||||||
|
|
||||||
|
// Content Attribut Methoden
|
||||||
|
DOM.btnSend.removeAttribute('disabled');
|
||||||
|
DOM.btnSend.setAttribute('disabled', ''); // (NOT RECOMMENDED)
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// // Ternärer Operator
|
||||||
|
// DOM.btnSend.disabled = !cbEl.checked ? true : false;
|
||||||
|
|
||||||
|
// DOM.btnSend.disabled = !cbEl.checked;
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO: Die letzten 3 Buttons mit Aktion zuweisen.
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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();
|
||||||
|
})();
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Style Font-Size (Beispiel)</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<script src="assets/js/main.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>Style Font-Size (Beispiel)</h1>
|
||||||
|
<hr />
|
||||||
|
<nav class="button-controls mb-3">
|
||||||
|
<button class="btn btn-dark button-very-large" data-label="VERY_LARGE" data-size="36">Very Large</button>
|
||||||
|
<button class="btn btn-dark button-big" data-label="BIG" data-size="24">Big</button>
|
||||||
|
<button class="btn btn-dark button-normal" data-label="NORMAL" data-size="16">Normal</button>
|
||||||
|
<button class="btn btn-dark button-small" data-label="SMALL" data-size="14">Small</button>
|
||||||
|
<hr />
|
||||||
|
<button class="btn btn-dark button-increase" data-label="INCREASE" aria-label="increase">
|
||||||
|
<i class="fa-solid fa-plus"></i>
|
||||||
|
<span class="visually-hidden">Increase</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-dark button-decrease" data-label="DECREASE" aria-label="decrease">
|
||||||
|
<i class="fa-solid fa-minus"></i>
|
||||||
|
<span class="visually-hidden">Decrease</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<section class="section-content">
|
||||||
|
<p>
|
||||||
|
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?
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user