ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-09 14:33:21 +02:00
parent fb85aad1ae
commit 7f12902b23
6 changed files with 179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
02_advanced/unterricht/tag19/02_csv-to-html/data/products.csv Normal file
View File

@@ -0,0 +1,9 @@
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
1 Code Short Description Tagline Quantity Price
2 MUG0007 coffee mug with LCD level indicator never again reach for the empty mug 20 49.90
3 MUG0013 coffee mug with bluetooth-connected coffee grounds scanner for automatized fortune telling put the smart into coffee reading 20 99.90
4 OFF3145 pen with pre-warmed ink (tested on the South Pole) the pen is mightier than the cold 50 29.90
5 COM1001 ambidextrous computer mouse end the dictate of left and right 10 19.90
6 COM0404 Easter egg themed webcam for your monitor put an Easter egg on hardware too 20 149.90
7 COM0001 Vulcan language vi cheatsheet learn vi and Vulcan at the same time 3 9.90
8 COM1536 Klingon language emacs cheatsheet learn emacs and Klingon at the same time 50 9.90
9 MOB0555 smartphone case with built-in screen never miss a message 20 39.90

14
02_advanced/unterricht/tag19/02_csv-to-html/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!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"></div>
</main>
</body>
</html>

66
02_advanced/unterricht/tag19/02_csv-to-html/index.js Normal file
View File

@@ -0,0 +1,66 @@
// const fs = require('node:fs') // commonjs
import fs from 'node:fs'; // module - esm
import color from 'chalk';
// VARS ======================
const STOCK_WARN_AMOUNT = 5;
const data = fs.readFileSync('data/products.csv', 'utf-8');
const products = data.split('\n');
const headerAr = products.shift().split(/\s*,\s*/); // => [ 'Code', 'Short Description', 'Tagline', 'Quantity', 'Price' ]
// Funktionen ================
const recordToHtml = (row) => {
const [code, shortDescription, tagline, quantity, price] = row.split(/\s*,\s*/); //=> ['MUG0007','coffee mug with LCD level indicator','never again reach for the empty mug','20','49.90']
const html = `<li class="list-group-item">
<h2>${shortDescription}</h2>
<p>${tagline}</p>
<p><strong>Price:</strong> $${Number(price).toFixed(2)}</p>
${quantity < STOCK_WARN_AMOUNT ? '<p class="alert alert-warning">Nur noch wenige Exemplare verfügbar!</p>' : ''}</li>`;
return html;
};
const writeHtmlDocument = (content = '') => {
const headerStr = `<!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">`;
const footerStr = `</div>
</main>
</body>
</html>
`;
const htmlDoc = `${headerStr}${content}${footerStr}`;
fs.writeFile('products.html', htmlDoc, 'utf-8', (err) => {
if (err) console.log(color.red(err));
console.log(color.green('File created!'));
});
};
// logic
const listItems = products
.filter((row) => row !== '') // leere String Einträge rausgefiltert
.map((row) => {
return recordToHtml(row); // => '<li>...</li>'
});
const list = `<ul class="list-group">${listItems.join('')}</ul>`;
// Output ===================
console.log(list);
writeHtmlDocument(list);

28
02_advanced/unterricht/tag19/02_csv-to-html/package-lock.json generated Normal file
View File

@@ -0,0 +1,28 @@
{
"name": "02_csv-to-html",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "02_csv-to-html",
"version": "1.0.0",
"license": "ISC",
"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"
}
}
}
}

16
02_advanced/unterricht/tag19/02_csv-to-html/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "02_csv-to-html",
"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"
}
}

46
02_advanced/unterricht/tag19/02_csv-to-html/products.html Normal file
View File

@@ -0,0 +1,46 @@
<!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>