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

feat: finalized project

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-21 09:31:17 +02:00
parent 33e6bef2e5
commit 1c64e896e4
7 changed files with 169 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
03_dom/agenda.md
View File

@@ -417,10 +417,10 @@ Projektarbeit
**Inhalt:** **Inhalt:**
- **Exkurs: Weitere Events: Drag and Drop** - **Exkurs: Weitere Events: Drag and Drop**
- **Routing in JS**
- **Rest API erstellen mit Express** - **Rest API erstellen mit Express**
- JS DOM Projektvorstellung - JS DOM Projektvorstellung
- Abschlussquiz JS DOM - Abschlussquiz JS DOM
- **Routing in JS**
**Übungen:** **Übungen:**

9
03_dom/unterricht/tag26/01_product-manager-final/assets/js/main.js
View File

@@ -141,8 +141,8 @@
// classes: ['btn-primary', 'button-login'], // classes: ['btn-primary', 'button-login'],
// label: 'login', // label: 'login',
// iconName: 'right-to-bracket', // iconName: 'right-to-bracket',
// clickHandler: () => { // clickHandler() {
// console.log('login'); // console.log(`${this.type} process...`);
// }, // },
// }), // }),
// ); // );
@@ -182,6 +182,9 @@
// classes: ['btn-primary', 'button-login-user'], // classes: ['btn-primary', 'button-login-user'],
// iconName: 'right-to-bracket', // iconName: 'right-to-bracket',
// label: 'Login', // label: 'Login',
// // clickHandler() {
// // console.log(`${this.label} process...`);
// // },
// clickHandler: () => { // clickHandler: () => {
// console.log('login process...'); // console.log('login process...');
// }, // },
@@ -264,7 +267,7 @@
const btnMoveUp = tr.querySelector('.button-product-move-up'); const btnMoveUp = tr.querySelector('.button-product-move-up');
const btnMoveDown = tr.querySelector('.button-product-move-down'); const btnMoveDown = tr.querySelector('.button-product-move-down');
btnMoveUp.disabled = !tr.previousElementSibling; btnMoveUp.disabled = !tr.previousElementSibling; // !(false) -> true | !(true) -> false
btnMoveDown.disabled = !tr.nextElementSibling; btnMoveDown.disabled = !tr.nextElementSibling;
}); });
}; };

4
03_dom/unterricht/tag26/02_dom-bereiche/dom-creation.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -39,6 +39,8 @@
// Node.cloneNode(true) // Node.cloneNode(true)
const liCloneEl = $('ul.list li').cloneNode(true); const liCloneEl = $('ul.list li').cloneNode(true);
// const img = new Image(); // document.createElement('img');
// DOM Manipulation ========== // DOM Manipulation ==========
$('ul.list').appendChild(liEl); $('ul.list').appendChild(liEl);
$('ul.list').appendChild(liCloneEl); $('ul.list').appendChild(liCloneEl);

4
03_dom/unterricht/tag26/02_dom-bereiche/dom-manipulation.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -54,7 +54,7 @@
// //
$('ul.list').classList.add('list-group'); $('ul.list').classList.add('list-group');
$('ul.list').dataset.id = 'list'; $('ul.list').dataset.id = 'list'; // <ul data-id="list">...</ul>
$('.container').id = 'main-container'; $('.container').id = 'main-container';
$('h1').style.backgroundColor = 'tomato'; $('h1').style.backgroundColor = 'tomato';
$('h1').setAttribute('title', 'headline'); $('h1').setAttribute('title', 'headline');

2
03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/main.js
View File

@@ -10,7 +10,7 @@ import ProductManager from './modules/ProductManager.js';
const init = () => { const init = () => {
DOM.productManagers.forEach((el) => { DOM.productManagers.forEach((el) => {
const pm = ProductManager(el); const pm = ProductManager(el);
// pm.init() // pm.initProducts()
}); });
}; };

4
03_dom/unterricht/tag26/06_product-manager-tpl-json/assets/js/modules/ProductManager.js
View File

@@ -121,7 +121,7 @@ const ProductManager = (el = null) => {
const addProduct = (product) => { const addProduct = (product) => {
const { name, price } = product; const { name, price } = product;
// // https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true); const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
const tdNameEl = trEl.querySelector('.td-name'); const tdNameEl = trEl.querySelector('.td-name');
@@ -163,7 +163,9 @@ const ProductManager = (el = null) => {
return { return {
init, init,
initProducts,
}; };
}; };
// Freigabe für import
export default ProductManager; export default ProductManager;

153
03_dom/unterricht/tag26/06_product-manager-tpl-json/index.html
View File

@@ -12,6 +12,159 @@
</head> </head>
<body> <body>
<main> <main>
<!-- ▼ product-manager ▼ -->
<div class="product-manager my-5">
<div class="container">
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 -->
<table class="table table-striped table-products">
<thead class="table-dark">
<tr>
<th class="th-name">Name</th>
<th class="th-price">Price in &euro;</th>
<th class="th-actions">Actions</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<input
type="text"
class="form-control input-product-name"
name="product-name"
placeholder="Insert product name"
aria-label="Product Name" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="input-group">
<input
type="number"
name="product-price"
class="form-control input-product-price"
placeholder="00.00"
aria-label="Product Price"
step="0.01"
min="0" />
<span class="input-group-text">€</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg">
<button class="btn btn-dark button-product-add">
<i class="fas fa-plus"></i>
Add product
</button>
</div>
</div>
<!-- ▲ /row ▲ -->
</td>
</tr>
</tfoot>
</table>
</div>
<template class="template-row">
<tr>
<td class="td-name">[PRODUCT_NAME]</td>
<td class="td-price">[PRODUCT_PRICE]</td>
<td class="td-actions">
<button class="btn btn-sm btn-danger button-product-remove">
<i class="fas fa-trash-can"></i>
<span class="visually-hidden">Remove Product</span>
</button>
<button class="btn btn-sm btn-secondary button-product-move-up">
<i class="fas fa-caret-up"></i>
<span class="visually-hidden">Move Up</span>
</button>
<button class="btn btn-sm btn-secondary button-product-move-down">
<i class="fas fa-caret-down"></i>
<span class="visually-hidden">Move Down</span>
</button>
</td>
</tr>
</template>
</div>
<!-- ▲ /product-manager ▲ -->
<!-- ▼ product-manager ▼ -->
<div class="product-manager my-5">
<div class="container">
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 -->
<table class="table table-striped table-products">
<thead class="table-dark">
<tr>
<th class="th-name">Name</th>
<th class="th-price">Price in &euro;</th>
<th class="th-actions">Actions</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<input
type="text"
class="form-control input-product-name"
name="product-name"
placeholder="Insert product name"
aria-label="Product Name" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="input-group">
<input
type="number"
name="product-price"
class="form-control input-product-price"
placeholder="00.00"
aria-label="Product Price"
step="0.01"
min="0" />
<span class="input-group-text">€</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg">
<button class="btn btn-dark button-product-add">
<i class="fas fa-plus"></i>
Add product
</button>
</div>
</div>
<!-- ▲ /row ▲ -->
</td>
</tr>
</tfoot>
</table>
</div>
<template class="template-row">
<tr>
<td class="td-name">[PRODUCT_NAME]</td>
<td class="td-price">[PRODUCT_PRICE]</td>
<td class="td-actions">
<button class="btn btn-sm btn-danger button-product-remove">
<i class="fas fa-trash-can"></i>
<span class="visually-hidden">Remove Product</span>
</button>
<button class="btn btn-sm btn-secondary button-product-move-up">
<i class="fas fa-caret-up"></i>
<span class="visually-hidden">Move Up</span>
</button>
<button class="btn btn-sm btn-secondary button-product-move-down">
<i class="fas fa-caret-down"></i>
<span class="visually-hidden">Move Down</span>
</button>
</td>
</tr>
</template>
</div>
<!-- ▲ /product-manager ▲ -->
<!-- ▼ product-manager ▼ -->
<div class="product-manager my-5"> <div class="product-manager my-5">
<div class="container"> <div class="container">
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 --> <!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 -->