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 =============
const init = () => {
console.log('init');
// Funktionaufrufe zu beginn der Anwendung
initProducts();
// Event-Lauscher zu beginn der Anwendung
DOM.btnAdd.addEventListener('click', onClickAdd);
};
@@ -24,18 +27,35 @@
const onClickAdd = (e) => {
console.log('click');
const tdName = createTd(DOM.inputName.value, 'td-name');
const tdPrice = createTd(DOM.inputPrice.value, 'td-price');
const trEl = createTr(tdName, tdPrice);
const product = {
name: DOM.inputName.value,
price: Number(DOM.inputPrice.value),
};
DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
console.log(trEl);
addProduct(product);
};
// === XHR/FETCH ========
// === 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 td = document.createElement('td');
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 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" />
<script src="data/products.js"></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
@@ -22,18 +23,12 @@
</tr>
</thead>
<tbody>
<!--
<tr>
<td>3Doodler 3D Printing Pen</td>
<td>29.99</td>
</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>
<td class="td-name">[PRODUCT_NAME]</td>
<td class="td-price">[PRODUCT_PRICE]</td>
</tr>
-->
</tbody>
<tfoot>
<tr>