feat: added 03_dom
This commit is contained in:
Philippe Torrel
@@ -1,10 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Übung 5: Summe einer Zahlenreihe rekursiv berechnen</title>
|
<title>Übung 5: Summe einer Zahlenreihe rekursiv berechnen</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
@@ -28,10 +29,29 @@
|
|||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const sumRecursive = (n) => {};
|
const sumRecursive = (n) => {
|
||||||
|
if (n === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return n + sumRecursive(n - 1); // 5 + 4 + 3 + 2 + 1 + 0
|
||||||
|
};
|
||||||
|
|
||||||
|
const sumReduce = (n) => {
|
||||||
|
return _.range(0, n + 1).reduce((a, b) => a + b, 0);
|
||||||
|
};
|
||||||
// Test Cases
|
// Test Cases
|
||||||
|
|
||||||
|
console.log(_.range(5)); // => [0,1,2,3,4]
|
||||||
|
console.log(_.range(2, 5)); // => [2,3,4]
|
||||||
|
console.log(_.range(2, 10, 2)); // => [2,4,6,8]
|
||||||
|
|
||||||
|
console.time('recursive');
|
||||||
console.log(sumRecursive(5)); // => 15 (5 + 4 + 3 + 2 + 1)
|
console.log(sumRecursive(5)); // => 15 (5 + 4 + 3 + 2 + 1)
|
||||||
|
console.timeEnd('recursive');
|
||||||
|
|
||||||
|
console.time('reduce');
|
||||||
|
console.log(sumReduce(5)); // => 15 (5 + 4 + 3 + 2 + 1)
|
||||||
|
console.timeEnd('reduce');
|
||||||
console.log(sumRecursive(10)); // => 55 (10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1)
|
console.log(sumRecursive(10)); // => 55 (10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1)
|
||||||
console.log(sumRecursive(0)); // => 0
|
console.log(sumRecursive(0)); // => 0
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -36,7 +36,17 @@
|
|||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const combinations = (n, k) => {};
|
const combinations = (n, k) => {
|
||||||
|
if (k === 0 || k === n) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (k > n) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return combinations(n - 1, k - 1) + combinations(n - 1, k);
|
||||||
|
};
|
||||||
|
|
||||||
// Test Cases
|
// Test Cases
|
||||||
console.log(combinations(5, 2)); // => 10
|
console.log(combinations(5, 2)); // => 10
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -21,7 +21,26 @@
|
|||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const sumNestedArray = (arr) => {};
|
const sumNestedArray = (arr) => {
|
||||||
|
// Basisfall: Wenn das Array leer ist, ist die Summe 0
|
||||||
|
if (arr.length === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
// Nimm das erste Element des Arrays
|
||||||
|
const first = arr[0];
|
||||||
|
const rest = arr.slice(1);
|
||||||
|
let sumFirst = 0;
|
||||||
|
|
||||||
|
// Wenn das erste Element ein Array ist, rufe die Funktion rekursiv auf
|
||||||
|
if (Array.isArray(first)) {
|
||||||
|
sumFirst = sumNestedArray(first);
|
||||||
|
} else if (!isNaN(first)) {
|
||||||
|
// Wenn es eine Zahl ist, füge sie zur Summe hinzu
|
||||||
|
sumFirst = Number(first);
|
||||||
|
}
|
||||||
|
// Rekursiver Fall: Summe des ersten Elements + Summe des restlichen Arrays
|
||||||
|
return sumFirst + sumNestedArray(rest);
|
||||||
|
};
|
||||||
|
|
||||||
// Test cases
|
// Test cases
|
||||||
console.log(sumNestedArray([1, [2, [3, 4], 5], 6])); // => 21
|
console.log(sumNestedArray([1, [2, [3, 4], 5], 6])); // => 21
|
||||||
1
02_advanced/uebungen/u26_csv-quotes2/data/csvDatei.csv
Normal file
1
02_advanced/uebungen/u26_csv-quotes2/data/csvDatei.csv
Normal file
@@ -0,0 +1 @@
|
|||||||
|
"very big, soft computer mouse","the cutest peripheral ever",10,39.90
|
||||||
|
11
02_advanced/uebungen/u26_csv-quotes2/data/products.csv
Normal file
11
02_advanced/uebungen/u26_csv-quotes2/data/products.csv
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
Code,Short Description,Tagline,Quantity,Price
|
||||||
|
MUG0007,coffee mug with LCD level indicator,never again reach for the empty mug,20,49.90
|
||||||
|
MUG0013,coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling,put the smart into coffee reading,20,99.90
|
||||||
|
OFF3145,pen with pre-warmed ink (tested on the South Pole),the pen is mightier than the cold,50,29.90
|
||||||
|
COM1001,ambidextrous computer mouse,end the dictate of left and right,10,19.90
|
||||||
|
COM0404,Easter egg themed webcam for your monitor,put an Easter egg on hardware too,20,149.90
|
||||||
|
COM0001,Vulcan language vi cheatsheet,learn vi and Vulcan at the same time,3,9.90
|
||||||
|
COM1536,Klingon language emacs cheatsheet,learn emacs and Klingon at the same time,50,9.90
|
||||||
|
MOB0555,smartphone case with built-in screen,never miss a message,20,39.90
|
||||||
|
|
||||||
|
|
||||||
|
58
02_advanced/uebungen/u26_csv-quotes2/index-andreas.js
Normal file
58
02_advanced/uebungen/u26_csv-quotes2/index-andreas.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import color from 'chalk';
|
||||||
|
|
||||||
|
const data = fs.readFileSync('data/products.csv', 'utf-8');
|
||||||
|
const productAr = data.split('\n').map((row) => row.replace('\n', ''));
|
||||||
|
const headerAr = productAr.shift().split(/\s*,\s*/);
|
||||||
|
|
||||||
|
console.log(productAr);
|
||||||
|
|
||||||
|
// console.log(headerAr);
|
||||||
|
// console.log('=======');
|
||||||
|
// console.log(productAr);
|
||||||
|
|
||||||
|
const convertCsvToJson = (products, headerAr) => {
|
||||||
|
let jsonStr = '[\n';
|
||||||
|
|
||||||
|
products.forEach((row, idxRow) => {
|
||||||
|
jsonStr += ' {\n';
|
||||||
|
row
|
||||||
|
.trim()
|
||||||
|
.split(',')
|
||||||
|
.forEach((elem, idxElem, ar) => {
|
||||||
|
if (ar.length === idxElem + 1) {
|
||||||
|
if (isNaN(elem)) {
|
||||||
|
jsonStr += ` "${headerAr[idxElem]}": "${elem}"\n`;
|
||||||
|
} else {
|
||||||
|
jsonStr += ` "${headerAr[idxElem]}": ${Number(elem)}\n`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isNaN(elem)) {
|
||||||
|
jsonStr += ` "${headerAr[idxElem]}": "${elem}",\n`;
|
||||||
|
} else {
|
||||||
|
jsonStr += ` "${headerAr[idxElem]}": ${Number(elem)},\n`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (products.length === idxRow + 1) {
|
||||||
|
jsonStr += ` }\n`;
|
||||||
|
} else {
|
||||||
|
jsonStr += ` },\n`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
jsonStr += ']';
|
||||||
|
|
||||||
|
console.log(color.yellow(`${jsonStr}`));
|
||||||
|
|
||||||
|
fs.writeFile('products.json', jsonStr, 'utf-8', (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
} else {
|
||||||
|
console.log(color.green('file created!'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
convertCsvToJson(productAr, headerAr);
|
||||||
21
02_advanced/uebungen/u26_csv-quotes2/index-ersin.js
Normal file
21
02_advanced/uebungen/u26_csv-quotes2/index-ersin.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import papa from 'papaparse';
|
||||||
|
|
||||||
|
//https://www.npmjs.com/package/papaparse
|
||||||
|
|
||||||
|
const data = fs.readFileSync('data/csvDatei.csv', 'utf-8').trim();
|
||||||
|
|
||||||
|
const parsed = papa.parse(data, {
|
||||||
|
dynamicTyping: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataRow = parsed.data[0];
|
||||||
|
|
||||||
|
const result = {
|
||||||
|
name: dataRow[0],
|
||||||
|
description: dataRow[1],
|
||||||
|
quantity: dataRow[2],
|
||||||
|
price: dataRow[3],
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(JSON.stringify(result, null, 2));
|
||||||
62
02_advanced/uebungen/u26_csv-quotes2/index-phil.js
Normal file
62
02_advanced/uebungen/u26_csv-quotes2/index-phil.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import color from 'chalk';
|
||||||
|
|
||||||
|
const data = fs.readFileSync('data/products.csv', 'utf-8');
|
||||||
|
|
||||||
|
const toCamelCase = (str) => {
|
||||||
|
return str
|
||||||
|
.trim()
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
|
||||||
|
};
|
||||||
|
|
||||||
|
const convertCsvToJson = (products, ar) => {
|
||||||
|
const resultAr = products.map((str) => {
|
||||||
|
const fields = str.split(/\s*,\s*/);
|
||||||
|
|
||||||
|
const labels = ar.map((label, idx) => {
|
||||||
|
return [label, isNaN(fields[idx]) ? fields[idx] : Number(fields[idx])];
|
||||||
|
});
|
||||||
|
|
||||||
|
const obj = Object.fromEntries(labels);
|
||||||
|
|
||||||
|
// console.log(labels); // Entries Array
|
||||||
|
//console.log(obj);
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// [ar[0]]: fields[0],
|
||||||
|
// [ar[1]]: fields[1],
|
||||||
|
// [ar[2]]: fields[2],
|
||||||
|
// [ar[3]]: Number(fields[3]),
|
||||||
|
// [ar[4]]: Number(fields[4]),
|
||||||
|
// };
|
||||||
|
});
|
||||||
|
// console.log(resultAr);
|
||||||
|
|
||||||
|
const jsonStr = JSON.stringify(resultAr, '', 2);
|
||||||
|
|
||||||
|
fs.writeFile('products.json', jsonStr, 'utf-8', (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
} else {
|
||||||
|
console.log(color.green('file created!'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const productAr = data
|
||||||
|
.split('\n')
|
||||||
|
.map((row) => row.replace('\n', ''))
|
||||||
|
.filter((row) => row !== '');
|
||||||
|
|
||||||
|
const headerAr = productAr
|
||||||
|
.shift()
|
||||||
|
.split(/\s*,\s*/)
|
||||||
|
.map(toCamelCase);
|
||||||
|
|
||||||
|
// console.log('=======');
|
||||||
|
// console.log(productAr);
|
||||||
|
|
||||||
|
convertCsvToJson(productAr, headerAr);
|
||||||
35
02_advanced/uebungen/u26_csv-quotes2/package-lock.json
generated
Normal file
35
02_advanced/uebungen/u26_csv-quotes2/package-lock.json
generated
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "u26_csv-quotes2",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "u26_csv-quotes2",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2",
|
||||||
|
"papaparse": "^5.5.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chalk": {
|
||||||
|
"version": "5.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
|
||||||
|
"integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/papaparse": {
|
||||||
|
"version": "5.5.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.4.tgz",
|
||||||
|
"integrity": "sha512-SwzWD9gl/ElwYLCI0nUja1mFJzjq2D8ziShfNBa7zCHzkOozeOGDwHWQ+tvCzEZcewecWZ5U7kUopDnG+DFYEQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
17
02_advanced/uebungen/u26_csv-quotes2/package.json
Normal file
17
02_advanced/uebungen/u26_csv-quotes2/package.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "u26_csv-quotes2",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2",
|
||||||
|
"papaparse": "^5.5.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
58
02_advanced/uebungen/u26_csv-quotes2/products.json
Normal file
58
02_advanced/uebungen/u26_csv-quotes2/products.json
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "MUG0007",
|
||||||
|
"shortDescription": "coffee mug with LCD level indicator",
|
||||||
|
"tagline": "never again reach for the empty mug",
|
||||||
|
"quantity": 20,
|
||||||
|
"price": 49.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "MUG0013",
|
||||||
|
"shortDescription": "coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling",
|
||||||
|
"tagline": "put the smart into coffee reading",
|
||||||
|
"quantity": 20,
|
||||||
|
"price": 99.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "OFF3145",
|
||||||
|
"shortDescription": "pen with pre-warmed ink (tested on the South Pole)",
|
||||||
|
"tagline": "the pen is mightier than the cold",
|
||||||
|
"quantity": 50,
|
||||||
|
"price": 29.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "COM1001",
|
||||||
|
"shortDescription": "ambidextrous computer mouse",
|
||||||
|
"tagline": "end the dictate of left and right",
|
||||||
|
"quantity": 10,
|
||||||
|
"price": 19.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "COM0404",
|
||||||
|
"shortDescription": "Easter egg themed webcam for your monitor",
|
||||||
|
"tagline": "put an Easter egg on hardware too",
|
||||||
|
"quantity": 20,
|
||||||
|
"price": 149.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "COM0001",
|
||||||
|
"shortDescription": "Vulcan language vi cheatsheet",
|
||||||
|
"tagline": "learn vi and Vulcan at the same time",
|
||||||
|
"quantity": 3,
|
||||||
|
"price": 9.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "COM1536",
|
||||||
|
"shortDescription": "Klingon language emacs cheatsheet",
|
||||||
|
"tagline": "learn emacs and Klingon at the same time",
|
||||||
|
"quantity": 50,
|
||||||
|
"price": 9.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "MOB0555",
|
||||||
|
"shortDescription": "smartphone case with built-in screen",
|
||||||
|
"tagline": "never miss a message",
|
||||||
|
"quantity": 20,
|
||||||
|
"price": 39.9
|
||||||
|
}
|
||||||
|
]
|
||||||
BIN
02_advanced/uebungen/u27_zlip.zip
Normal file
BIN
02_advanced/uebungen/u27_zlip.zip
Normal file
Binary file not shown.
51
02_advanced/uebungen/u27_zlip/Regex-erklaerung.md
Normal file
51
02_advanced/uebungen/u27_zlip/Regex-erklaerung.md
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
# Regex Beispiel
|
||||||
|
|
||||||
|
Am besten löst man das mit einem regulären Ausdruck, der entweder nach **Inhalten in Anführungszeichen** sucht _oder_ nach **Inhalten ohne Kommas**.
|
||||||
|
|
||||||
|
Hier ist der passende Reguläre Ausdruck:
|
||||||
|
|
||||||
|
`/"([^"\\]*(?:\\.[^"\\]*)*)"|([^,]+)/g`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Wie der Regex funktioniert
|
||||||
|
|
||||||
|
Der Ausdruck nutzt das **ODER-Prinzip (`|`)**, um zwei Szenarien zu matchen:
|
||||||
|
|
||||||
|
1. **`"([^"\\]*(?:\\.[^"\\]*)*)"` (Gruppe 1):** Matcht alles, was in doppelten Anführungszeichen steht. Er erlaubt sogar escaped Anführungszeichen (`\"`) im Text.
|
||||||
|
2. **`([^,]+)` (Gruppe 2):** Wenn keine Anführungszeichen da sind, matcht er alles bis zum nächsten Komma.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Anwendung in JavaScript (Beispiel)
|
||||||
|
|
||||||
|
Da du das Ergebnis sicherlich in einem Array von einzelnen Werten brauchst, kannst du den Regex wie folgt anwenden. Hierbei nutzen wir `matchAll`, um die Treffer sauber zu trennen und die Anführungszeichen direkt zu entfernen:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const input = '"very big, soft computer mouse","the cutest peripheral ever",10,39.90';
|
||||||
|
const regex = /"([^"\\]*(?:\\.[^"\\]*)*)"|([^,]+)/g;
|
||||||
|
|
||||||
|
const matches = [...input.matchAll(regex)];
|
||||||
|
|
||||||
|
const result = matches.map((match) => {
|
||||||
|
// Wenn Gruppe 1 existiert, war es ein String in Anführungszeichen
|
||||||
|
// Wenn Gruppe 2 existiert, war es ein unberührter Wert (Zahl)
|
||||||
|
const value = match[1] !== undefined ? match[1] : match[2].trim();
|
||||||
|
|
||||||
|
// Optional: Datentypen konvertieren
|
||||||
|
if (!isNaN(value) && value !== '') {
|
||||||
|
return Number(value);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(result);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Das Ergebnis (Output)
|
||||||
|
|
||||||
|
Nach dem Parsen erhältst du ein sauberes Array, bei dem die Kommas innerhalb der Strings ignoriert wurden und die Zahlen einsatzbereit sind:
|
||||||
|
|
||||||
|
```json
|
||||||
|
["very big, soft computer mouse", "the cutest peripheral ever", 10, 39.9]
|
||||||
|
```
|
||||||
1
02_advanced/uebungen/u27_zlip/data/csvDatei.csv
Normal file
1
02_advanced/uebungen/u27_zlip/data/csvDatei.csv
Normal file
@@ -0,0 +1 @@
|
|||||||
|
"very big, soft computer mouse","the cutest peripheral ever",10,39.90
|
||||||
|
11
02_advanced/uebungen/u27_zlip/data/products.csv
Normal file
11
02_advanced/uebungen/u27_zlip/data/products.csv
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
Code,Short Description,Tagline,Quantity,Price
|
||||||
|
MUG0007,coffee mug with LCD level indicator,never again reach for the empty mug,20,49.90
|
||||||
|
MUG0013,coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling,put the smart into coffee reading,20,99.90
|
||||||
|
OFF3145,pen with pre-warmed ink (tested on the South Pole),the pen is mightier than the cold,50,29.90
|
||||||
|
COM1001,ambidextrous computer mouse,end the dictate of left and right,10,19.90
|
||||||
|
COM0404,Easter egg themed webcam for your monitor,put an Easter egg on hardware too,20,149.90
|
||||||
|
COM0001,Vulcan language vi cheatsheet,learn vi and Vulcan at the same time,3,9.90
|
||||||
|
COM1536,Klingon language emacs cheatsheet,learn emacs and Klingon at the same time,50,9.90
|
||||||
|
MOB0555,smartphone case with built-in screen,never miss a message,20,39.90
|
||||||
|
|
||||||
|
|
||||||
|
63
02_advanced/uebungen/u27_zlip/index.js
Normal file
63
02_advanced/uebungen/u27_zlip/index.js
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import zlib from 'node:zlib';
|
||||||
|
import color from 'chalk';
|
||||||
|
|
||||||
|
const data = fs.readFileSync('data/products.csv', 'utf-8');
|
||||||
|
|
||||||
|
const toCamelCase = (str) => {
|
||||||
|
return str
|
||||||
|
.trim()
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase());
|
||||||
|
};
|
||||||
|
|
||||||
|
const convertCsvToJson = (products, ar) => {
|
||||||
|
const resultAr = products.map((str) => {
|
||||||
|
const fields = str.split(/\s*,\s*/);
|
||||||
|
|
||||||
|
const labels = ar.map((label, idx) => {
|
||||||
|
return [label, isNaN(fields[idx]) ? fields[idx] : Number(fields[idx])];
|
||||||
|
});
|
||||||
|
|
||||||
|
const obj = Object.fromEntries(labels);
|
||||||
|
|
||||||
|
// console.log(labels); // Entries Array
|
||||||
|
//console.log(obj);
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// [ar[0]]: fields[0],
|
||||||
|
// [ar[1]]: fields[1],
|
||||||
|
// [ar[2]]: fields[2],
|
||||||
|
// [ar[3]]: Number(fields[3]),
|
||||||
|
// [ar[4]]: Number(fields[4]),
|
||||||
|
// };
|
||||||
|
});
|
||||||
|
// console.log(resultAr);
|
||||||
|
|
||||||
|
const jsonStr = JSON.stringify(resultAr, '', 2);
|
||||||
|
|
||||||
|
fs.writeFile('products.json.gz', zlib.gzipSync(jsonStr), 'utf-8', (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
} else {
|
||||||
|
console.log(color.green('file created!'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const productAr = data
|
||||||
|
.split('\n')
|
||||||
|
.map((row) => row.replace('\n', ''))
|
||||||
|
.filter((row) => row !== '');
|
||||||
|
|
||||||
|
const headerAr = productAr
|
||||||
|
.shift()
|
||||||
|
.split(/\s*,\s*/)
|
||||||
|
.map(toCamelCase);
|
||||||
|
|
||||||
|
// console.log('=======');
|
||||||
|
// console.log(productAr);
|
||||||
|
|
||||||
|
convertCsvToJson(productAr, headerAr);
|
||||||
17
02_advanced/uebungen/u27_zlip/package.json
Normal file
17
02_advanced/uebungen/u27_zlip/package.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "u27_zlib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2",
|
||||||
|
"papaparse": "^5.5.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
02_advanced/uebungen/u27_zlip/products.json.gz
Normal file
BIN
02_advanced/uebungen/u27_zlip/products.json.gz
Normal file
Binary file not shown.
54
02_advanced/uebungen/u28_password-generator/index.js
Normal file
54
02_advanced/uebungen/u28_password-generator/index.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// const crypto = require('node:crypto');
|
||||||
|
import crypto from 'node:crypto';
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
|
const PASSWORD_LENGTH = 10;
|
||||||
|
const s = '23456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ!.,;#$%/+*';
|
||||||
|
|
||||||
|
const buf = crypto.randomBytes(PASSWORD_LENGTH);
|
||||||
|
|
||||||
|
console.log(buf, Array.from(buf));
|
||||||
|
|
||||||
|
const password = Array.from(buf)
|
||||||
|
.map((byte) => s.charAt(byte % s.length))
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
const getPassword = (amount = 10) => {
|
||||||
|
const chars = '23456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ!.,;#$%/+*'.split('');
|
||||||
|
return _.shuffle(chars).slice(0, amount).join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(password);
|
||||||
|
console.log(getPassword());
|
||||||
|
|
||||||
|
// Source - https://stackoverflow.com/a/2450976
|
||||||
|
// Posted by ChristopheD, modified by community. See post 'Timeline' for change history
|
||||||
|
// Retrieved 2026-07-10, License - CC BY-SA 4.0
|
||||||
|
|
||||||
|
function shuffle(array) {
|
||||||
|
let currentIndex = array.length;
|
||||||
|
|
||||||
|
// While there remain elements to shuffle...
|
||||||
|
while (currentIndex != 0) {
|
||||||
|
// Pick a remaining element...
|
||||||
|
let randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used like so
|
||||||
|
let arr = [2, 11, 37, 42];
|
||||||
|
shuffle(arr);
|
||||||
|
console.log(arr);
|
||||||
|
|
||||||
|
// Übung 28: Passwortgenerator
|
||||||
|
|
||||||
|
// Was macht der folgende Code?
|
||||||
|
|
||||||
|
// OK: Der Titel verrät es schon. Versuche dennoch, das Programm zu verstehen! Benutze die Dokumentation der Standardbibliothek, um nachzuschlagen, was crypto.randomBytes(…) genau macht!
|
||||||
|
|
||||||
|
// Bonusfrage: Warum sind in den Zeichen «1», «i» und «l» nicht enthalten, genau so wenig wie «0» und «o»?
|
||||||
21
02_advanced/uebungen/u28_password-generator/package-lock.json
generated
Normal file
21
02_advanced/uebungen/u28_password-generator/package-lock.json
generated
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "u28_password-generator",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "u28_password-generator",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"lodash": "^4.18.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/lodash": {
|
||||||
|
"version": "4.18.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
|
||||||
|
"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
02_advanced/uebungen/u28_password-generator/package.json
Normal file
14
02_advanced/uebungen/u28_password-generator/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "u28_password-generator",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"lodash": "^4.18.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
02_advanced/uebungen/u29_stream.zip
Normal file
BIN
02_advanced/uebungen/u29_stream.zip
Normal file
Binary file not shown.
8769
02_advanced/uebungen/u29_stream/data/products.html
Normal file
8769
02_advanced/uebungen/u29_stream/data/products.html
Normal file
File diff suppressed because it is too large
Load Diff
BIN
02_advanced/uebungen/u29_stream/data/products.html.gz
Normal file
BIN
02_advanced/uebungen/u29_stream/data/products.html.gz
Normal file
Binary file not shown.
21
02_advanced/uebungen/u29_stream/index.js
Normal file
21
02_advanced/uebungen/u29_stream/index.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
// const fs = require('node:fs');
|
||||||
|
// const zlib = require('node:zlib');
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import zlib from 'node:zlib';
|
||||||
|
|
||||||
|
const gzipCompressor = zlib.createGzip();
|
||||||
|
|
||||||
|
const inputStream = fs.createReadStream('data/products.html');
|
||||||
|
const outputStream = fs.createWriteStream('data/products.html.gz');
|
||||||
|
|
||||||
|
inputStream.on('data', (data) => {
|
||||||
|
console.log('Pakete (data chunks) werden geladen: ', data.length);
|
||||||
|
//outputStream.write(zlib.gzipSync(data));
|
||||||
|
});
|
||||||
|
|
||||||
|
inputStream.pipe(gzipCompressor).pipe(outputStream);
|
||||||
|
|
||||||
|
// Übung 29: Datenströme
|
||||||
|
// Schreibe Codebeispiel 239 um, ohne die Funktion pipe(…) zu verwenden!
|
||||||
|
|
||||||
|
// TIPP: Um eine Datei päckchenweise lesen- und schreiben zu können, gibt es für das fs Modul die Methoden createReadStream und createWriteStream.
|
||||||
13
02_advanced/uebungen/u29_stream/package.json
Normal file
13
02_advanced/uebungen/u29_stream/package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "03_stream",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
BIN
02_advanced/uebungen/u32_os-info.zip
Normal file
BIN
02_advanced/uebungen/u32_os-info.zip
Normal file
Binary file not shown.
35
02_advanced/uebungen/u32_os-info/index.js
Normal file
35
02_advanced/uebungen/u32_os-info/index.js
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import os from 'node:os';
|
||||||
|
import color from 'chalk';
|
||||||
|
|
||||||
|
const platform = os.platform();
|
||||||
|
|
||||||
|
const cpu = os.cpus().length;
|
||||||
|
|
||||||
|
console.log(color.yellow(`I am running on a machine with ${platform} and ${cpu} cores.`));
|
||||||
|
|
||||||
|
//console.log(os.cpus()); //gibt ein array aus jeweils cpu kernen
|
||||||
|
console.log(os.type()); // Darwin
|
||||||
|
console.log(os.version()); // Darwin mit kernelversion
|
||||||
|
console.log(os.totalmem()); //RAM in bytes
|
||||||
|
console.log(os.freemem());
|
||||||
|
console.log(os.availableParallelism()); // 8 -> ein programm sollte max 8 parallele tasks ausführen?
|
||||||
|
console.log(os.arch()); // cpu architektur -> arm64
|
||||||
|
console.log(os.machine()); // arm64
|
||||||
|
//console.log(os.networkInterfaces());
|
||||||
|
console.log(os.hostname()); //MacBookAir
|
||||||
|
console.log(os.release()); // die releasenr und nicht datum
|
||||||
|
console.log(os.userInfo()); // Object mit Userinfos
|
||||||
|
console.log(os.userInfo().username);
|
||||||
|
|
||||||
|
// Übung 32: Information zum Betriebssystem und der Anzahl der vorhandenen CPUs
|
||||||
|
|
||||||
|
// Im Kontext einer Monitoring-Lösung benötigt ein Kunde eine kleine CLI (Command Line Interface)-Anwendung, die es erlaubt, das aktuelle Betriebssystem und die Anzahl der CPUs auf dem jeweiligen Rechner zu ermitteln.
|
||||||
|
|
||||||
|
// Vorgehensweise
|
||||||
|
|
||||||
|
// 1.Schau dir die Online-Dokumentation zum os-Modul der Standardbibliothek an.
|
||||||
|
// 2.Erstelle dann ein kurzes Node.js-Programm, das ausgibt, auf welcher Plattform es gerade läuft (also etwa »linux«, »darwin« (OS X) oder »win32«) und wie viele Kerne der Rechner hat.
|
||||||
|
|
||||||
|
// Hier eine mögliche Beispielausgabe:
|
||||||
|
|
||||||
|
// I am running on a machine with linux and 2 cores.
|
||||||
27
02_advanced/uebungen/u32_os-info/package-lock.json
generated
Normal file
27
02_advanced/uebungen/u32_os-info/package-lock.json
generated
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "u32_os-info",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "u32_os-info",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chalk": {
|
||||||
|
"version": "5.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
|
||||||
|
"integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
02_advanced/uebungen/u32_os-info/package.json
Normal file
14
02_advanced/uebungen/u32_os-info/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "u32_os-info",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,31 +1,31 @@
|
|||||||
'use strict';
|
"use strict";
|
||||||
(() => {
|
(() => {
|
||||||
// dev/assets/js/main.js
|
// dev/assets/js/main.js
|
||||||
(() => {
|
(() => {
|
||||||
const DOM = {
|
const DOM = {
|
||||||
weatherBox: document.querySelector('.weather-box'),
|
weatherBox: document.querySelector(".weather-box"),
|
||||||
weatherIcon: document.querySelector('.weather-pic img'),
|
weatherIcon: document.querySelector(".weather-pic img"),
|
||||||
figcaption: document.querySelector('figcaption'),
|
figcaption: document.querySelector("figcaption"),
|
||||||
description: document.querySelector('.description'),
|
description: document.querySelector(".description"),
|
||||||
temp: document.querySelector('.temp'),
|
temp: document.querySelector(".temp"),
|
||||||
tempMin: document.querySelector('.temp-min'),
|
tempMin: document.querySelector(".temp-min"),
|
||||||
tempMax: document.querySelector('.temp-max'),
|
tempMax: document.querySelector(".temp-max"),
|
||||||
windIcon: document.querySelector('.wind-icon'),
|
windIcon: document.querySelector(".wind-icon"),
|
||||||
speed: document.querySelector('.speed'),
|
speed: document.querySelector(".speed"),
|
||||||
deg: document.querySelector('.deg'),
|
deg: document.querySelector(".deg")
|
||||||
};
|
};
|
||||||
console.log(DOM);
|
console.log(DOM);
|
||||||
const API_KEY = '';
|
const API_KEY = "";
|
||||||
const LAT = 43.72072300281546;
|
const LAT = 43.72072300281546;
|
||||||
const LON = 7.352450291796612;
|
const LON = 7.352450291796612;
|
||||||
const TEMP_MAX_ALERT_AMOUNT = 30;
|
const TEMP_MAX_ALERT_AMOUNT = 30;
|
||||||
const TEMP_MIN_ALERT_AMOUNT = 10;
|
const TEMP_MIN_ALERT_AMOUNT = 10;
|
||||||
const init = () => {
|
const init = () => {
|
||||||
console.log('init!');
|
console.log("init!");
|
||||||
getWeather().then((data) => {
|
getWeather().then((data) => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
if (data) {
|
if (data) {
|
||||||
DOM.weatherBox.classList.add('show', 'animate__flipInX');
|
DOM.weatherBox.classList.add("show", "animate__flipInX");
|
||||||
setWeather(data);
|
setWeather(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -33,9 +33,9 @@
|
|||||||
const getWeather = async () => {
|
const getWeather = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`,
|
`https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`
|
||||||
);
|
);
|
||||||
if (!res.ok) throw new Error('Fetch Error');
|
if (!res.ok) throw new Error("Fetch Error");
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
return data;
|
return data;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -57,9 +57,9 @@
|
|||||||
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
|
DOM.weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
|
||||||
DOM.windIcon.style.transform = `rotate(${Number(deg) - 45}deg)`;
|
DOM.windIcon.style.transform = `rotate(${Number(deg) - 45}deg)`;
|
||||||
if (Number(temp) >= TEMP_MAX_ALERT_AMOUNT) {
|
if (Number(temp) >= TEMP_MAX_ALERT_AMOUNT) {
|
||||||
DOM.temp.classList.add('danger');
|
DOM.temp.classList.add("danger");
|
||||||
} else if (Number(temp) <= TEMP_MIN_ALERT_AMOUNT) {
|
} else if (Number(temp) <= TEMP_MIN_ALERT_AMOUNT) {
|
||||||
DOM.temp.classList.add('frozen');
|
DOM.temp.classList.add("frozen");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
init();
|
init();
|
||||||
|
|||||||
@@ -20,6 +20,8 @@
|
|||||||
// BITTE EIGENEN API KEY VERWENDEN
|
// BITTE EIGENEN API KEY VERWENDEN
|
||||||
// (NICHT DIESEN KEY VERWENDEN: b62eaccfd1a09cf1d04b00bd2ec689e7)
|
// (NICHT DIESEN KEY VERWENDEN: b62eaccfd1a09cf1d04b00bd2ec689e7)
|
||||||
const API_KEY = '';
|
const API_KEY = '';
|
||||||
|
|
||||||
|
// https://www.latlong.net/
|
||||||
const LAT = 43.72072300281546;
|
const LAT = 43.72072300281546;
|
||||||
const LON = 7.352450291796612;
|
const LON = 7.352450291796612;
|
||||||
|
|
||||||
|
|||||||
@@ -2,10 +2,10 @@ const fs = require('fs');
|
|||||||
|
|
||||||
// asnyc prozess
|
// asnyc prozess
|
||||||
fs.readFile('data/products.csv', 'UTF8', (error, data) => {
|
fs.readFile('data/products.csv', 'UTF8', (error, data) => {
|
||||||
console.log(data); // 2 output
|
console.log('second output:', data); // 2 output
|
||||||
});
|
});
|
||||||
|
|
||||||
for (let i = 0; i < 2000000000; i++) {
|
for (let i = 0; i < 2000000000; i++) {
|
||||||
// be busy for a few seconds
|
// be busy for a few seconds
|
||||||
}
|
}
|
||||||
console.log('ready'); // 1 output
|
console.log('first output: ', '... more code ...'); // 1 output
|
||||||
|
|||||||
1
02_advanced/unterricht/tag20/01_fs-methoden/hello.txt
Normal file
1
02_advanced/unterricht/tag20/01_fs-methoden/hello.txt
Normal file
@@ -0,0 +1 @@
|
|||||||
|
hello World
|
||||||
54
02_advanced/unterricht/tag20/01_fs-methoden/index.js
Normal file
54
02_advanced/unterricht/tag20/01_fs-methoden/index.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import fs from 'fs'; // Modul aus der Standardbibliothek
|
||||||
|
|
||||||
|
let data;
|
||||||
|
|
||||||
|
fs.writeFileSync('hello.txt', 'hello World', 'utf8');
|
||||||
|
|
||||||
|
// fs.readFileSync(…)
|
||||||
|
// liest eine Datei ein (blockierende Variante)
|
||||||
|
data = fs.readFileSync('hello.txt', 'utf8');
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
// fs.readFile(…)
|
||||||
|
// liest eine Datei ein (asynchrone Variante)
|
||||||
|
fs.readFile('hello.txt', 'utf8', (error, data) => {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// fs.writeFileSync(…)
|
||||||
|
// schreibt Daten in eine Datei; bereits vorhandene Daten werden überschrieben (blockierende Variante)
|
||||||
|
fs.writeFileSync('hello.txt', data, 'utf8');
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
// fs.writeFile(…)
|
||||||
|
// schreibt Daten in eine Datei; bereits vorhandene Daten werden überschrieben (asynchrone Variante)
|
||||||
|
fs.writeFile('hello.txt', data, 'UTF8', (error) => {
|
||||||
|
if (error) console.log('Error: ' + error);
|
||||||
|
});
|
||||||
|
|
||||||
|
// fs.statSync(…)
|
||||||
|
// ermittelt Infos zur Datei (blockierende Variante)
|
||||||
|
const stats = fs.statSync('hello.txt');
|
||||||
|
|
||||||
|
// console.log('File Stats: ', stats);
|
||||||
|
|
||||||
|
console.log('File size: ', stats.size); // => size in bytes
|
||||||
|
console.log('File birthdate: ', stats.birthtime); // => enstehungsdatum der Datei
|
||||||
|
|
||||||
|
// fs.stat(…)
|
||||||
|
// ermittelt Infos zur Datei (asynchrone Variante)
|
||||||
|
fs.stat('hello.txt', (error, stats) => console.log(stats.size)); // => size in bytes
|
||||||
|
|
||||||
|
// fs.unlinkSync(…)
|
||||||
|
// löscht eine Datei (blockierende Variante)
|
||||||
|
fs.unlinkSync('hello.txt');
|
||||||
|
|
||||||
|
fs.writeFileSync('hello.txt', 'hello World', 'utf8');
|
||||||
|
|
||||||
|
// fs.unlink(…)
|
||||||
|
// löscht eine Datei (asynchrone Variante)
|
||||||
|
// fs.unlink('hello.txt', 'utf-8', (error) => {
|
||||||
|
// if (error) console.log('Error: ' + error);
|
||||||
|
// });
|
||||||
13
02_advanced/unterricht/tag20/01_fs-methoden/package.json
Normal file
13
02_advanced/unterricht/tag20/01_fs-methoden/package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "01_fs-methoden",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
58
02_advanced/unterricht/tag20/02_zlib/data/products.html
Normal file
58
02_advanced/unterricht/tag20/02_zlib/data/products.html
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Products</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">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>coffee mug with LCD level indicator</h2>
|
||||||
|
<p>never again reach for the empty mug</p>
|
||||||
|
<p><strong>Price:</strong> $49.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling</h2>
|
||||||
|
<p>put the smart into coffee reading</p>
|
||||||
|
<p><strong>Price:</strong> $99.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>pen with pre-warmed ink (tested on the South Pole)</h2>
|
||||||
|
<p>the pen is mightier than the cold</p>
|
||||||
|
<p><strong>Price:</strong> $29.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>ambidextrous computer mouse</h2>
|
||||||
|
<p>end the dictate of left and right</p>
|
||||||
|
<p><strong>Price:</strong> $19.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>Easter egg themed webcam for your monitor</h2>
|
||||||
|
<p>put an Easter egg on hardware too</p>
|
||||||
|
<p><strong>Price:</strong> $149.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>Vulcan language vi cheatsheet</h2>
|
||||||
|
<p>learn vi and Vulcan at the same time</p>
|
||||||
|
<p><strong>Price:</strong> $9.90</p>
|
||||||
|
<p class="alert alert-warning">Nur noch wenige Exemplare verfügbar!</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>Klingon language emacs cheatsheet</h2>
|
||||||
|
<p>learn emacs and Klingon at the same time</p>
|
||||||
|
<p><strong>Price:</strong> $9.90</p>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<h2>smartphone case with built-in screen</h2>
|
||||||
|
<p>never miss a message</p>
|
||||||
|
<p><strong>Price:</strong> $39.90</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
02_advanced/unterricht/tag20/02_zlib/data/products.html.gz
Normal file
BIN
02_advanced/unterricht/tag20/02_zlib/data/products.html.gz
Normal file
Binary file not shown.
16
02_advanced/unterricht/tag20/02_zlib/index.js
Normal file
16
02_advanced/unterricht/tag20/02_zlib/index.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// const fs = require('node:fs');
|
||||||
|
// const zlib = require('node:zlib');
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import zlib from 'node:zlib';
|
||||||
|
|
||||||
|
const data = fs.readFileSync('data/products.html', 'utf-8');
|
||||||
|
|
||||||
|
const compressedData = zlib.gzipSync(data);
|
||||||
|
console.log(compressedData); // => <Buffer 1f 8b 08 00 00 00 00 00 00 13 ad 96 cd 8e 1b 37 0c c7 ef 79 0a 66 d0 43 0b 64 ac 64 d3 00 d9 60 c6 28 d0 a6 97 16 c5 02 6d 7a a7 25 7a c4 56 a2 06 12 ... 701 more bytes>
|
||||||
|
|
||||||
|
try {
|
||||||
|
fs.writeFileSync('data/products.html.gz', compressedData);
|
||||||
|
console.log('compressed file');
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
13
02_advanced/unterricht/tag20/02_zlib/package.json
Normal file
13
02_advanced/unterricht/tag20/02_zlib/package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "02_zlib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
8769
02_advanced/unterricht/tag20/03_stream/data/products.html
Normal file
8769
02_advanced/unterricht/tag20/03_stream/data/products.html
Normal file
File diff suppressed because it is too large
Load Diff
BIN
02_advanced/unterricht/tag20/03_stream/data/products.html.gz
Normal file
BIN
02_advanced/unterricht/tag20/03_stream/data/products.html.gz
Normal file
Binary file not shown.
16
02_advanced/unterricht/tag20/03_stream/index.js
Normal file
16
02_advanced/unterricht/tag20/03_stream/index.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// const fs = require('node:fs');
|
||||||
|
// const zlib = require('node:zlib');
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import zlib from 'node:zlib';
|
||||||
|
|
||||||
|
const gzipCompressor = zlib.createGzip();
|
||||||
|
|
||||||
|
const inputStream = fs.createReadStream('data/products.html');
|
||||||
|
const outputStream = fs.createWriteStream('data/products.html.gz');
|
||||||
|
|
||||||
|
inputStream.on('data', (data) => {
|
||||||
|
console.log('Pakete (data chunks) werden geladen: ', data.length);
|
||||||
|
//outputStream.write(zlib.gzipSync(data));
|
||||||
|
});
|
||||||
|
|
||||||
|
inputStream.pipe(gzipCompressor).pipe(outputStream);
|
||||||
13
02_advanced/unterricht/tag20/03_stream/package.json
Normal file
13
02_advanced/unterricht/tag20/03_stream/package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "03_stream",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
8
02_advanced/unterricht/tag20/04_crypto/index.js
Normal file
8
02_advanced/unterricht/tag20/04_crypto/index.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import crypto from 'node:crypto';
|
||||||
|
|
||||||
|
const data = 'Ich werde verschlüsselt!';
|
||||||
|
const hash = crypto.createHash('sha256').update(data).digest('hex'); // 256-bit SHA-2 hash algorithm
|
||||||
|
|
||||||
|
console.log(hash); // 4803bce8b78d10b6bae3224c041f7c7311dedc056386870e50e6b56a109f4ee8
|
||||||
|
|
||||||
|
// https://cryptojs.gitbook.io/docs
|
||||||
13
02_advanced/unterricht/tag20/04_crypto/package.json
Normal file
13
02_advanced/unterricht/tag20/04_crypto/package.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "04_crypto",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
12
02_advanced/unterricht/tag20/05_import-vs-require/common.js
Normal file
12
02_advanced/unterricht/tag20/05_import-vs-require/common.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
const fs = require('node:fs'); // commonjs
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
// in code Blöcken ({}) kann require (commonjs) verwendet werden.
|
||||||
|
const dns = require('node:dns');
|
||||||
|
dns.lookup('www.google.de', 4, (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
15
02_advanced/unterricht/tag20/05_import-vs-require/esm.mjs
Normal file
15
02_advanced/unterricht/tag20/05_import-vs-require/esm.mjs
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import fs from 'node:fs'; // module
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
// in code Blöcken ({}) kann require (commonjs) verwendet werden.
|
||||||
|
// import dns from 'node:dns';
|
||||||
|
// seit 2020 dynamic imporrt
|
||||||
|
import('node:dns').then((dns) => {
|
||||||
|
dns.lookup('www.google.de', 4, (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
17
02_advanced/unterricht/tag20/06_npm-befehle/index.js
Normal file
17
02_advanced/unterricht/tag20/06_npm-befehle/index.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import express from 'express';
|
||||||
|
import color from 'chalk';
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
const PORT = 3000;
|
||||||
|
const HOST = '127.0.0.1'; // 'localhost'
|
||||||
|
const BASE_URL = `http://${HOST}:${PORT}`;
|
||||||
|
|
||||||
|
app.get('/', (req, res) => {
|
||||||
|
res.send('Hello from Server');
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(PORT, HOST, () => {
|
||||||
|
console.log(color.magenta(`🚀 Server is running at: ${BASE_URL}`));
|
||||||
|
console.log(color.yellow('CTRL + C to close.'));
|
||||||
|
});
|
||||||
874
02_advanced/unterricht/tag20/06_npm-befehle/package-lock.json
generated
Normal file
874
02_advanced/unterricht/tag20/06_npm-befehle/package-lock.json
generated
Normal file
@@ -0,0 +1,874 @@
|
|||||||
|
{
|
||||||
|
"name": "06_npm-befehle",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "06_npm-befehle",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2",
|
||||||
|
"express": "^5.2.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/accepts": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"mime-types": "^3.0.0",
|
||||||
|
"negotiator": "^1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/body-parser": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"bytes": "^3.1.2",
|
||||||
|
"content-type": "^2.0.0",
|
||||||
|
"debug": "^4.4.3",
|
||||||
|
"http-errors": "^2.0.1",
|
||||||
|
"iconv-lite": "^0.7.2",
|
||||||
|
"on-finished": "^2.4.1",
|
||||||
|
"qs": "^6.15.2",
|
||||||
|
"raw-body": "^3.0.2",
|
||||||
|
"type-is": "^2.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/body-parser/node_modules/content-type": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/bytes": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/call-bind-apply-helpers": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"function-bind": "^1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/call-bound": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bind-apply-helpers": "^1.0.2",
|
||||||
|
"get-intrinsic": "^1.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chalk": {
|
||||||
|
"version": "5.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
|
||||||
|
"integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/content-disposition": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/content-type": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "0.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
|
||||||
|
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/cookie-signature": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/debug": {
|
||||||
|
"version": "4.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||||
|
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ms": "^2.1.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"supports-color": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/depd": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/dunder-proto": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bind-apply-helpers": "^1.0.1",
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"gopd": "^1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/ee-first": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/encodeurl": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/es-define-property": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/es-errors": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/es-object-atoms": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/escape-html": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/etag": {
|
||||||
|
"version": "1.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||||
|
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/express": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
|
||||||
|
"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"accepts": "^2.0.0",
|
||||||
|
"body-parser": "^2.2.1",
|
||||||
|
"content-disposition": "^1.0.0",
|
||||||
|
"content-type": "^1.0.5",
|
||||||
|
"cookie": "^0.7.1",
|
||||||
|
"cookie-signature": "^1.2.1",
|
||||||
|
"debug": "^4.4.0",
|
||||||
|
"depd": "^2.0.0",
|
||||||
|
"encodeurl": "^2.0.0",
|
||||||
|
"escape-html": "^1.0.3",
|
||||||
|
"etag": "^1.8.1",
|
||||||
|
"finalhandler": "^2.1.0",
|
||||||
|
"fresh": "^2.0.0",
|
||||||
|
"http-errors": "^2.0.0",
|
||||||
|
"merge-descriptors": "^2.0.0",
|
||||||
|
"mime-types": "^3.0.0",
|
||||||
|
"on-finished": "^2.4.1",
|
||||||
|
"once": "^1.4.0",
|
||||||
|
"parseurl": "^1.3.3",
|
||||||
|
"proxy-addr": "^2.0.7",
|
||||||
|
"qs": "^6.14.0",
|
||||||
|
"range-parser": "^1.2.1",
|
||||||
|
"router": "^2.2.0",
|
||||||
|
"send": "^1.1.0",
|
||||||
|
"serve-static": "^2.2.0",
|
||||||
|
"statuses": "^2.0.1",
|
||||||
|
"type-is": "^2.0.1",
|
||||||
|
"vary": "^1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/finalhandler": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"debug": "^4.4.0",
|
||||||
|
"encodeurl": "^2.0.0",
|
||||||
|
"escape-html": "^1.0.3",
|
||||||
|
"on-finished": "^2.4.1",
|
||||||
|
"parseurl": "^1.3.3",
|
||||||
|
"statuses": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/forwarded": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/fresh": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/function-bind": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/get-intrinsic": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bind-apply-helpers": "^1.0.2",
|
||||||
|
"es-define-property": "^1.0.1",
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"es-object-atoms": "^1.1.1",
|
||||||
|
"function-bind": "^1.1.2",
|
||||||
|
"get-proto": "^1.0.1",
|
||||||
|
"gopd": "^1.2.0",
|
||||||
|
"has-symbols": "^1.1.0",
|
||||||
|
"hasown": "^2.0.2",
|
||||||
|
"math-intrinsics": "^1.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/get-proto": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"dunder-proto": "^1.0.1",
|
||||||
|
"es-object-atoms": "^1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/gopd": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/has-symbols": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/hasown": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"function-bind": "^1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/http-errors": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"depd": "~2.0.0",
|
||||||
|
"inherits": "~2.0.4",
|
||||||
|
"setprototypeof": "~1.2.0",
|
||||||
|
"statuses": "~2.0.2",
|
||||||
|
"toidentifier": "~1.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/iconv-lite": {
|
||||||
|
"version": "0.7.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
|
||||||
|
"integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/inherits": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
|
"node_modules/ipaddr.js": {
|
||||||
|
"version": "1.9.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||||
|
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-promise": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/math-intrinsics": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/media-typer": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/merge-descriptors": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mime-db": {
|
||||||
|
"version": "1.54.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
|
||||||
|
"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mime-types": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"mime-db": "^1.54.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/ms": {
|
||||||
|
"version": "2.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/negotiator": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/object-inspect": {
|
||||||
|
"version": "1.13.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
|
||||||
|
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/on-finished": {
|
||||||
|
"version": "2.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
|
||||||
|
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"ee-first": "1.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/once": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||||
|
"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"wrappy": "1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/parseurl": {
|
||||||
|
"version": "1.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||||
|
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/path-to-regexp": {
|
||||||
|
"version": "8.4.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
|
||||||
|
"integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/proxy-addr": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"forwarded": "0.2.0",
|
||||||
|
"ipaddr.js": "1.9.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/qs": {
|
||||||
|
"version": "6.15.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
|
||||||
|
"integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"dependencies": {
|
||||||
|
"es-define-property": "^1.0.1",
|
||||||
|
"side-channel": "^1.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/range-parser": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/raw-body": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"bytes": "~3.1.2",
|
||||||
|
"http-errors": "~2.0.1",
|
||||||
|
"iconv-lite": "~0.7.0",
|
||||||
|
"unpipe": "~1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/router": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"debug": "^4.4.0",
|
||||||
|
"depd": "^2.0.0",
|
||||||
|
"is-promise": "^4.0.0",
|
||||||
|
"parseurl": "^1.3.3",
|
||||||
|
"path-to-regexp": "^8.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/safer-buffer": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/send": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"debug": "^4.4.3",
|
||||||
|
"encodeurl": "^2.0.0",
|
||||||
|
"escape-html": "^1.0.3",
|
||||||
|
"etag": "^1.8.1",
|
||||||
|
"fresh": "^2.0.0",
|
||||||
|
"http-errors": "^2.0.1",
|
||||||
|
"mime-types": "^3.0.2",
|
||||||
|
"ms": "^2.1.3",
|
||||||
|
"on-finished": "^2.4.1",
|
||||||
|
"range-parser": "^1.2.1",
|
||||||
|
"statuses": "^2.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/serve-static": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"encodeurl": "^2.0.0",
|
||||||
|
"escape-html": "^1.0.3",
|
||||||
|
"parseurl": "^1.3.3",
|
||||||
|
"send": "^1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/setprototypeof": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
|
"node_modules/side-channel": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"object-inspect": "^1.13.4",
|
||||||
|
"side-channel-list": "^1.0.1",
|
||||||
|
"side-channel-map": "^1.0.1",
|
||||||
|
"side-channel-weakmap": "^1.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/side-channel-list": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"object-inspect": "^1.13.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/side-channel-map": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bound": "^1.0.2",
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"get-intrinsic": "^1.2.5",
|
||||||
|
"object-inspect": "^1.13.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/side-channel-weakmap": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bound": "^1.0.2",
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"get-intrinsic": "^1.2.5",
|
||||||
|
"object-inspect": "^1.13.3",
|
||||||
|
"side-channel-map": "^1.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/statuses": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/toidentifier": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/type-is": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"content-type": "^2.0.0",
|
||||||
|
"media-typer": "^1.1.0",
|
||||||
|
"mime-types": "^3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/type-is/node_modules/content-type": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/unpipe": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vary": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/wrappy": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
16
02_advanced/unterricht/tag20/06_npm-befehle/package.json
Normal file
16
02_advanced/unterricht/tag20/06_npm-befehle/package.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "06_npm-befehle",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"server": "npx http-server -c-1 -p 3000"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^5.6.2",
|
||||||
|
"express": "^5.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
15
03_dom/.vscode/extensions.json
vendored
Normal file
15
03_dom/.vscode/extensions.json
vendored
Normal file
@@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
332
03_dom/.vscode/marp-theme.css
vendored
Normal file
332
03_dom/.vscode/marp-theme.css
vendored
Normal file
@@ -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%;
|
||||||
|
}
|
||||||
30
03_dom/.vscode/settings.json
vendored
Normal file
30
03_dom/.vscode/settings.json
vendored
Normal file
@@ -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"
|
||||||
|
}
|
||||||
73
03_dom/.vscode/snippets.code-snippets
vendored
Normal file
73
03_dom/.vscode/snippets.code-snippets
vendored
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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 – Produkttext mit freundlicher Genehmigung von
|
||||||
|
ThinkGeek Inc.
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</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>
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
@@ -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>
|
||||||
@@ -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()));
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@@ -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.';
|
||||||
|
}
|
||||||
@@ -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">×</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>
|
||||||
@@ -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>`,
|
||||||
|
];
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Implement your code here
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user