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

feat: added initProduct

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-17 13:25:58 +02:00
parent b23ee7e29b
commit ddc774e0dd
4 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
03_dom/unterricht/tag25/01_product-manager/assets/js/main.js
View File

@@ -17,6 +17,9 @@
// === INIT ============= // === INIT =============
const init = () => { const init = () => {
console.log('init'); console.log('init');
// Funktionaufrufe zu beginn der Anwendung
initProducts();
// Event-Lauscher zu beginn der Anwendung
DOM.btnAdd.addEventListener('click', onClickAdd); DOM.btnAdd.addEventListener('click', onClickAdd);
}; };
@@ -24,18 +27,35 @@
const onClickAdd = (e) => { const onClickAdd = (e) => {
console.log('click'); console.log('click');
const tdName = createTd(DOM.inputName.value, 'td-name'); const product = {
const tdPrice = createTd(DOM.inputPrice.value, 'td-price'); name: DOM.inputName.value,
const trEl = createTr(tdName, tdPrice); price: Number(DOM.inputPrice.value),
};
DOM.tBody.appendChild(trEl); // Im DOM hinzufügen addProduct(product);
console.log(trEl);
}; };
// === XHR/FETCH ======== // === XHR/FETCH ========
// === FUNCTIONS ======== // === FUNCTIONS ========
const initProducts = () => {
PRODUCTS.forEach((product) => {
addProduct(product);
});
// PRODUCTS.forEach(addProduct);
};
const addProduct = (product) => {
const { name, price } = product;
const tdName = createTd(name, 'td-name');
const tdPrice = createTd(price, 'td-price');
const trEl = createTr(tdName, tdPrice);
DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
};
const createTd = (text, className = '') => { const createTd = (text, className = '') => {
const td = document.createElement('td'); const td = document.createElement('td');
td.classList.add(className); td.classList.add(className);

6
03_dom/unterricht/tag25/01_product-manager/data/products.js Normal file
View File

@@ -0,0 +1,6 @@
const PRODUCTS = [
{ name: '3Doodler 3D Printing Pen', price: 29.99 },
{ name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },
{ name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 },
{ name: '16-Bit Legendary Hero Heat-Change Mug', price: 10.99 },
];

5
03_dom/unterricht/tag25/01_product-manager/data/products.json Normal file
View File

@@ -0,0 +1,5 @@
[
{ "name": "3Doodler 3D Printing Pen", "price": 29.99 },
{ "name": "Powerstation 5- E. Maximus Chargus", "price": 44.95 },
{ "name": "8-Bit Legendary Hero Heat-Change Mug", "price": 6.99 }
]

17
03_dom/unterricht/tag25/01_product-manager/index.html
View File

@@ -7,6 +7,7 @@
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
<link rel="stylesheet" href="assets/css/main.css" /> <link rel="stylesheet" href="assets/css/main.css" />
<script src="data/products.js"></script>
<script src="assets/js/main.js" defer></script> <script src="assets/js/main.js" defer></script>
</head> </head>
<body> <body>
@@ -22,18 +23,12 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!--
<tr> <tr>
<td>3Doodler 3D Printing Pen</td> <td class="td-name">[PRODUCT_NAME]</td>
<td>29.99</td> <td class="td-price">[PRODUCT_PRICE]</td>
</tr> </tr>
<tr> -->
<td>Powerstation 5- E. Maximus Chargus</td>
<td>44.95</td>
</tr>
<tr>
<td>8-Bit Legendary Hero Heat-Change Mug</td>
<td>6.99</td>
</tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>