From 35c96453b34ceca79e45cc39647f851653ee8f87 Mon Sep 17 00:00:00 2001
From: Hong-Phuc Bui <hong-phuc.bui@htwsaar.de>
Date: Sat, 24 Oct 2026 11:50:10 +0200
Subject: [PATCH] Vorlesung 2026-10-22
---
02-2-toRadians/winkel.js | 28 ++++
02-1-dom-io/interactive-elements.html | 217 ++++++++++++++++++++++++++++++++++++
02-1-dom-io/division.html | 11 +
02-1-dom-io/hallo.js | 5
02-1-dom-io/string_interpolation.py | 6 +
02-1-dom-io/division.js | 3
02-3-laptop/laptop.js | 21 +++
02-2-toRadians/index.html | 22 +++
02-3-laptop/index.html | 17 ++
02-1-dom-io/hallo.html | 12 ++
10 files changed, 342 insertions(+), 0 deletions(-)
diff --git a/02-1-dom-io/division.html b/02-1-dom-io/division.html
new file mode 100644
index 0000000..e5546f0
--- /dev/null
+++ b/02-1-dom-io/division.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>DOM-output</title>
+</head>
+<body>
+<div id="result"></div>
+<script src="division.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02-1-dom-io/division.js b/02-1-dom-io/division.js
new file mode 100644
index 0000000..811dd5d
--- /dev/null
+++ b/02-1-dom-io/division.js
@@ -0,0 +1,3 @@
+const rest = -11 % 7;
+const resultEl = document.getElementById("result");
+
diff --git a/02-1-dom-io/hallo.html b/02-1-dom-io/hallo.html
new file mode 100644
index 0000000..34f19c6
--- /dev/null
+++ b/02-1-dom-io/hallo.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Hallo</title>
+</head>
+<body>
+<label>Name:<input type="text" id="name" /></label>
+<button type="button" id="ok">Ok</button>
+<script src="hallo.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02-1-dom-io/hallo.js b/02-1-dom-io/hallo.js
new file mode 100644
index 0000000..5331547
--- /dev/null
+++ b/02-1-dom-io/hallo.js
@@ -0,0 +1,5 @@
+document.getElementById("ok").addEventListener("click", () => {
+ const nameInput = document.getElementById("name");
+ const name = nameInput.value;
+ console.log(`Hallo ${name}`);
+});
\ No newline at end of file
diff --git a/02-1-dom-io/interactive-elements.html b/02-1-dom-io/interactive-elements.html
new file mode 100644
index 0000000..8cf7f9b
--- /dev/null
+++ b/02-1-dom-io/interactive-elements.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<!-- generated by Claude -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Interactive HTML elements</title>
+<style>
+:root{
+ --bg:#eef1f6; --panel:#ffffff; --ink:#1b2433; --muted:#5b6578; --line:#ccd3e0;
+ --accent:#2f5bff; --accent-ink:#ffffff; --warn:#d8431c; --ok:#17794a;
+ box-sizing:border-box;
+ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
+ color-scheme:light;
+}
+@media (prefers-color-scheme:dark){
+ :root{
+ --bg:#10141d; --panel:#181e2b; --ink:#e7ebf3; --muted:#9aa5ba; --line:#2d3649;
+ --accent:#7d9bff; --accent-ink:#0b1020; --warn:#ff7a55; --ok:#4cc58a; color-scheme:dark;
+ }
+}
+html{scroll-padding-top:env(safe-area-inset-top,0px)}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
+main{max-width:920px;margin:0 auto;padding:32px 20px 64px}
+h1{font-size:2.2rem;line-height:1.1;margin:0 0 8px;font-weight:600;letter-spacing:-.02em}
+h2{font-size:1.15rem;margin:0 0 4px;font-weight:600}
+p.lead{color:var(--muted);max-width:60ch;margin:0 0 24px}
+header.top{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
+section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin:0 0 16px}
+section>p{color:var(--muted);margin:0 0 14px;font-size:.92rem}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
+label.f{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:500}
+label.f small{color:var(--muted);font-weight:400}
+label code{font:500 .85rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent);overflow-wrap:anywhere}
+input,select,textarea,button{font:inherit;color:inherit}
+input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week],input[type=file],select,textarea{
+ width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
+textarea{min-height:90px;resize:vertical}
+input[type=color]{width:56px;height:36px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
+input[type=range]{width:100%}
+:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+input:user-invalid{border-color:var(--warn)}
+.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
+.row label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
+input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
+fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0}
+legend{padding:0 6px;font-size:.88rem;font-weight:500}
+button,.btn{padding:8px 16px;border-radius:6px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:500}
+button:hover{border-color:var(--accent)}
+button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
+button.danger{color:var(--warn);border-color:var(--warn)}
+button:disabled{opacity:.45;cursor:not-allowed}
+progress,meter{width:100%;height:18px}
+details{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--bg)}
+details+details{margin-top:8px}
+summary{cursor:pointer;font-weight:500}
+dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);max-width:420px;padding:20px}
+dialog::backdrop{background:rgba(10,14,24,.55)}
+[contenteditable]{border:1px dashed var(--line);border-radius:6px;padding:10px;min-height:48px}
+a.demo{color:var(--accent)}
+pre{margin:0;padding:14px;border-radius:8px;background:var(--bg);border:1px solid var(--line);overflow-x:auto;font-size:.82rem;max-height:320px}
+output{font-weight:600;color:var(--accent)}
+</style>
+</head>
+<body>
+<main>
+<header class="top">
+ <div>
+ <h1>Interactive HTML elements</h1>
+ <p class="lead">Every native control in one place.</p>
+ </div>
+</header>
+
+<form id="demo" autocomplete="off">
+
+<section>
+ <h2>Text inputs</h2>
+ <p>Each type brings its own keyboard, validation or picker.</p>
+ <div class="grid">
+ <label class="f"><code><input type="text"></code><input type="text" name="text" placeholder="Your name"></label>
+ <label class="f"><code><input type="password" minlength="6"></code><input type="password" name="password" minlength="6" placeholder="At least 6 characters"></label>
+ <label class="f"><code><input type="email"></code><input type="email" name="email" placeholder="you@example.com"></label>
+ <label class="f"><code><input type="tel"></code><input type="tel" name="tel" placeholder="+49 681 123456"></label>
+ <label class="f"><code><input type="url"></code><input type="url" name="url" placeholder="https://example.com"></label>
+ <label class="f"><code><input type="search"></code><input type="search" name="search" placeholder="Search…"></label>
+ <label class="f"><code><input type="number" min="0" max="100" step="5"></code><input type="number" name="number" min="0" max="100" step="5" value="10"></label>
+ <label class="f"><code><input list="browsers"></code>
+ <input type="text" name="browser" list="browsers" placeholder="Pick or type a browser">
+ <datalist id="browsers"><option value="Firefox"><option value="Chrome"><option value="Safari"><option value="Edge"></datalist>
+ </label>
+ </div>
+ <label class="f" style="margin-top:14px"><code><textarea></code><textarea name="message" placeholder="Write a longer message…"></textarea></label>
+</section>
+
+<section>
+ <h2>Date and time</h2>
+ <p>Browsers show a native picker for each of these.</p>
+ <div class="grid">
+ <label class="f"><code><input type="date"></code><input type="date" name="date"></label>
+ <label class="f"><code><input type="time"></code><input type="time" name="time"></label>
+ <label class="f"><code><input type="datetime-local"></code><input type="datetime-local" name="datetime"></label>
+ <label class="f"><code><input type="month"></code><input type="month" name="month"></label>
+ <label class="f"><code><input type="week"></code><input type="week" name="week"></label>
+ </div>
+</section>
+
+<section>
+ <h2>Choices</h2>
+ <p>Checkboxes allow several answers, radio buttons exactly one, and a select works as either.</p>
+ <div class="grid">
+ <fieldset>
+ <legend>Checkboxes</legend>
+ <div class="row" style="flex-direction:column;align-items:flex-start;gap:8px">
+ <label><input type="checkbox" id="all"> <code><input type="checkbox"></code></label>
+ <label><input type="checkbox" class="opt" name="topics" value="news"> <code><input type="checkbox" value="news"></code></label>
+ <label><input type="checkbox" class="opt" name="topics" value="tips" checked> <code><input type="checkbox" value="tips" checked></code></label>
+ <label><input type="checkbox" class="opt" name="topics" value="offers"> <code><input type="checkbox" value="offers"></code></label>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Radio buttons</legend>
+ <div class="row" style="flex-direction:column;align-items:flex-start;gap:8px">
+ <label><input type="radio" name="plan" value="free" checked> <code><input type="radio" value="free" checked></code></label>
+ <label><input type="radio" name="plan" value="plus"> <code><input type="radio" value="plus"></code></label>
+ <label><input type="radio" name="plan" value="team"> <code><input type="radio" value="team"></code></label>
+ <label><input type="radio" name="plan" value="legacy" disabled> <code><input type="radio" value="legacy" disabled></code></label>
+ </div>
+ </fieldset>
+ <div style="display:flex;flex-direction:column;gap:14px">
+ <label class="f"><code><select></code>
+ <select name="country">
+ <option value="">Choose a country</option>
+ <optgroup label="Europe"><option>Germany</option><option>France</option><option>Spain</option></optgroup>
+ <optgroup label="Americas"><option>Canada</option><option>Brazil</option></optgroup>
+ </select>
+ </label>
+ <label class="f"><code><select multiple></code><small>Hold Ctrl or Cmd to pick several</small>
+ <select name="langs" multiple size="4"><option>German</option><option>English</option><option>French</option><option>Spanish</option></select>
+ </label>
+ </div>
+ </div>
+</section>
+
+<section>
+ <h2>Sliders, colors and files</h2>
+ <p>Values update as you drag, pick or choose.</p>
+ <div class="grid">
+ <label class="f"><span><code><input type="range"></code> <output id="volOut">40</output></span>
+ <input type="range" name="volume" min="0" max="100" value="40">
+ </label>
+ <label class="f"><code><input type="color"></code><span><input type="color" name="color" value="#2f5bff"> <output id="colOut">#2f5bff</output></span></label>
+ <label class="f"><code><input type="file" multiple></code><input type="file" name="file" multiple></label>
+ <input type="hidden" name="hidden" value="secret-token-42">
+ </div>
+</section>
+
+<section>
+ <h2>Progress and meter</h2>
+ <p>Read-only indicators that you drive from script.</p>
+ <div class="grid">
+ <div>
+ <label class="f"><span><code><progress></code> <output id="progOut">35%</output></span><progress id="prog" max="100" value="35"></progress></label>
+ <div class="row" style="margin-top:10px">
+ <button type="button" id="less">−10</button><button type="button" id="more">+10</button>
+ </div>
+ </div>
+ <label class="f"><code><meter></code>
+ <meter id="meter" min="0" max="100" low="30" high="70" optimum="90" value="55"></meter>
+ </label>
+ </div>
+</section>
+
+<section>
+ <h2>Buttons</h2>
+ <p>Submit validates and sends, reset restores defaults, plain buttons only run script.</p>
+ <div class="row">
+ <button type="submit" class="primary">Submit form</button>
+ <button type="reset">Reset form</button>
+ <button type="button" id="toast">Plain button</button>
+ <button type="button" class="danger">Danger</button>
+ <button type="button" disabled>Disabled</button>
+ <input type="button" value="Input button" id="inputBtn">
+ </div>
+ <p id="msg" role="status" style="margin:12px 0 0;color:var(--ok)"></p>
+</section>
+
+</form>
+
+<section>
+ <h2>Disclosure, dialog and links</h2>
+ <p>Elements that open, expand or navigate without a form.</p>
+ <details open><summary>Details and summary</summary><p style="margin:8px 0 0">This content is hidden or shown by the browser, no JavaScript needed.</p></details>
+ <details><summary>Another panel</summary><p style="margin:8px 0 0">Panels can be grouped with a shared <code>name</code> attribute so only one stays open.</p></details>
+ <div class="row" style="margin-top:14px">
+ <button type="button" id="openDlg">Open dialog</button>
+ <a class="demo" href="#top" id="lnk">Anchor link</a>
+ </div>
+ <dialog id="dlg">
+ <form method="dialog">
+ <h2>Dialog element</h2>
+ <p>This modal traps focus and closes with the Escape key.</p>
+ <div class="row" style="justify-content:flex-end"><button value="cancel">Cancel</button><button value="ok" class="primary">Confirm</button></div>
+ </form>
+ </dialog>
+</section>
+
+<section>
+ <h2>Editable content</h2>
+ <p>Any element becomes editable with the <code>contenteditable</code> attribute.</p>
+ <div contenteditable="true" spellcheck="true">Click here and type to edit this paragraph.</div>
+</section>
+
+</main>
+
+</body>
+</html>
diff --git a/02-1-dom-io/string_interpolation.py b/02-1-dom-io/string_interpolation.py
new file mode 100644
index 0000000..9733850
--- /dev/null
+++ b/02-1-dom-io/string_interpolation.py
@@ -0,0 +1,6 @@
+title = "The TeX book"
+author = "Donald Knuth"
+book_html = f'''
+<span class="title">{title}</span>
+<span class="author">{author}</span>'''
+print(book_html)
diff --git a/02-2-toRadians/index.html b/02-2-toRadians/index.html
new file mode 100644
index 0000000..bf117c4
--- /dev/null
+++ b/02-2-toRadians/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>toRandians</title>
+</head>
+<body>
+
+<input id="x1">
+<input id="y1">
+<input id="x2">
+<input id="y2">
+
+<!--
+<p>Geben Sie die Koordinaten in Reihenfolge x1;y1;x2;y2 ein!</p>
+<input id="coordinaten">
+-->
+<button type="button" id="ok">OK</button>
+<p id="output"></p>
+<script src="winkel.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02-2-toRadians/winkel.js b/02-2-toRadians/winkel.js
new file mode 100644
index 0000000..9413378
--- /dev/null
+++ b/02-2-toRadians/winkel.js
@@ -0,0 +1,28 @@
+const toRadians = (degrees) => degrees * Math.PI / 180;
+
+const distance = (x1, y1, x2, y2) => {
+ const deltaX = x2 - x1;
+ const deltaY = y2 - y1;
+ return Math.hypot(deltaX, deltaY);
+}
+
+document.getElementById("ok").addEventListener("click", () => {
+ const x1 = document.getElementById("x1").value;
+ const y1 = document.getElementById("y1").value;
+ const x2 = document.getElementById("x2").value;
+ const y2 = document.getElementById("y2").value;
+
+ /*const inputValue = document.getElementById("coordinaten").value;
+ const coordinates = inputValue.split(";");
+ const x1 = coordinates[0];
+ const y1 = coordinates[1];
+ const x2 = coordinates[2];
+ const y2 = coordinates[3];
+
+ */
+ const h = distance(
+ Number.parseFloat(x1), Number.parseFloat(y1),
+ Number.parseFloat(x2), Number.parseFloat(y2)
+ )
+ document.getElementById("output").textContent = `${h}`;
+})
\ No newline at end of file
diff --git a/02-3-laptop/index.html b/02-3-laptop/index.html
new file mode 100644
index 0000000..29923df
--- /dev/null
+++ b/02-3-laptop/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Laptop</title>
+</head>
+<body>
+
+<input id="diagonal" type="number">
+<input id="ratio" type="text">
+<button id="ok" type="button">OK</button>
+
+<p id="output"></p>
+
+<script src="laptop.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02-3-laptop/laptop.js b/02-3-laptop/laptop.js
new file mode 100644
index 0000000..87113ac
--- /dev/null
+++ b/02-3-laptop/laptop.js
@@ -0,0 +1,21 @@
+const convertRatioInNumber = (r) => {
+ const fraction = r.split(":");
+ return Number.parseInt(fraction[0]) / Number.parseInt(fraction[1]);
+}
+
+const calDimension = (d, r) => {
+ const h = d/(Math.sqrt(r**2 + 1));
+ const b = r * h;
+ return [b, h];
+}
+
+document.getElementById("ok").addEventListener("click", () => {
+ const diagonal = document.getElementById("diagonal").value;
+ const ratio = document.getElementById("ratio").value;
+ //console.log({diagonal, ratio});
+ const r = convertRatioInNumber(ratio);
+ const d = Number.parseInt(diagonal);
+ const result = calDimension(d, r);
+ const output = document.getElementById("output");
+ output.textContent = `${result[0].toFixed(2)} x ${result[1].toFixed(2)}`;
+});
\ No newline at end of file
--
Gitblit v1.10.0