This commit is contained in:
Philippe Torrel
@@ -0,0 +1,22 @@
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Mobile first */
|
||||
.product-manager table tfoot .row > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.product-manager table tfoot .row > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
|
||||
const module = document.querySelector('.product-manager') || console.warn('Product Manager Element not found');
|
||||
|
||||
if (!module) return;
|
||||
|
||||
const DOM = {
|
||||
module,
|
||||
table: module.querySelector('.table-products'),
|
||||
tbody: module.querySelector('tbody'),
|
||||
inputName: module.querySelector('.input-product-name'),
|
||||
inputPrice: module.querySelector('.input-product-price'),
|
||||
btnAdd: module.querySelector('.button-product-add'),
|
||||
};
|
||||
|
||||
console.log(DOM);
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {
|
||||
// Funktionsaufrufe zu beginn der Anwendung
|
||||
initProducts();
|
||||
// Event-Lauscher zu beginn der Anwendung
|
||||
DOM.btnAdd.addEventListener('click', onClickAdd);
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onClickAdd = (e) => {
|
||||
const product = {
|
||||
name: DOM.inputName.value, //
|
||||
price: Number(DOM.inputPrice.valueAsNumber),
|
||||
};
|
||||
|
||||
addProduct(product);
|
||||
};
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const initProducts = () => {
|
||||
// PRODUCTS.forEach((product) => {
|
||||
// addProduct(product);
|
||||
// });
|
||||
PRODUCTS.forEach(addProduct);
|
||||
};
|
||||
|
||||
const addProduct = (product) => {
|
||||
const { name, price } = product;
|
||||
const tdNameEl = createTd(name, 'td-name');
|
||||
const tdPriceEl = createTd(price, 'td-price');
|
||||
const trEl = createTr(tdNameEl, tdPriceEl);
|
||||
|
||||
DOM.tbody.appendChild(trEl);
|
||||
};
|
||||
|
||||
const createTd = (text, ...classNames) => {
|
||||
const td = document.createElement('td');
|
||||
td.classList.add(...classNames);
|
||||
td.textContent = text;
|
||||
|
||||
return td;
|
||||
};
|
||||
|
||||
const createTr = (...tds) => {
|
||||
const tr = document.createElement('tr');
|
||||
// tds.forEach((td) => {
|
||||
// tr.appendChild(td);
|
||||
// });
|
||||
tr.append(...tds);
|
||||
|
||||
return tr;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
@@ -0,0 +1,5 @@
|
||||
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 },
|
||||
];
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Productmanager</title>
|
||||
<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.3.1/css/all.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>
|
||||
<main>
|
||||
<!-- ▼ Product Manager ▼ -->
|
||||
<div class="product-manager">
|
||||
<div class="container py-5">
|
||||
<h1>Productmanager</h1>
|
||||
<!-- table.table.table-striped.table-products>thead.table-dark>tr>th*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 €</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tr>
|
||||
<td class="td-name">{PRODUCT_NAME}</td>
|
||||
<td class="td-price">{PRODUCT_PRICE}</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
name="product-name"
|
||||
class="form-control input-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">
|
||||
<span class="input-group-text">€</span>
|
||||
<input
|
||||
type="number"
|
||||
name="prodcut-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product price"
|
||||
min="0"
|
||||
step="0.01" />
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "01_product-manager",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "npx http-server -p 3000 -c-1"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "module"
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DOM Creation</title>
|
||||
<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/jquery/4.0.0/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>DOM Creation</h1>
|
||||
<hr />
|
||||
<ul class="list">
|
||||
<li>Listenpunkt 01</li>
|
||||
<li>Listenpunkt 02</li>
|
||||
<li>Listenpunkt 03</li>
|
||||
<li>Listenpunkt 04</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
// Node.innerHTML
|
||||
$('ul.list').innerHTML += '<li>Listenpunkt 05</li>';
|
||||
|
||||
// Node.innerText & Node.textContent
|
||||
$('ul.list li').textContent = 'Listenpunkt 001';
|
||||
$('ul.list li:nth-child(2)').innerText = 'Listenpunkt 002';
|
||||
|
||||
// document.createElement('HTML_ELEMENT')
|
||||
const liEl = document.createElement('li');
|
||||
liEl.textContent = 'Listenpunkt 06';
|
||||
|
||||
// Node.cloneNode(true)
|
||||
const liCloneEl = $('ul.list li').cloneNode(true);
|
||||
|
||||
// DOM Manipulation ==========
|
||||
$('ul.list').appendChild(liEl);
|
||||
$('ul.list').appendChild(liCloneEl);
|
||||
|
||||
// jQuery ====================
|
||||
// jQuery('<p>test</p>').insertAfter(document.body);
|
||||
// jQuery('<p />', { text: 'ich bin der Inhalt' }).insertAfter(document.body);
|
||||
// jQuery('<p></p>', { text: 'ich bin der Inhalt' }).insertBefore(document.body);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Mobile first */
|
||||
.product-manager table tfoot .row > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.product-manager table tfoot .row > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
|
||||
const module = document.querySelector('.product-manager') || console.warn('Product Manager Element not found');
|
||||
|
||||
if (!module) return;
|
||||
|
||||
const DOM = {
|
||||
module,
|
||||
table: module.querySelector('.table-products'),
|
||||
tbody: module.querySelector('tbody'),
|
||||
inputName: module.querySelector('.input-product-name'),
|
||||
inputPrice: module.querySelector('.input-product-price'),
|
||||
btnAdd: module.querySelector('.button-product-add'),
|
||||
};
|
||||
|
||||
console.log(DOM);
|
||||
|
||||
// === INIT =============
|
||||
const init = () => {
|
||||
// Funktionsaufrufe zu beginn der Anwendung
|
||||
initProducts();
|
||||
// Event-Lauscher zu beginn der Anwendung
|
||||
DOM.btnAdd.addEventListener('click', onClickAdd);
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onClickAdd = (e) => {
|
||||
const product = {
|
||||
name: DOM.inputName.value, //
|
||||
price: Number(DOM.inputPrice.valueAsNumber),
|
||||
};
|
||||
|
||||
addProduct(product);
|
||||
};
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const initProducts = () => {
|
||||
// PRODUCTS.forEach((product) => {
|
||||
// addProduct(product);
|
||||
// });
|
||||
PRODUCTS.forEach(addProduct);
|
||||
};
|
||||
|
||||
const addProduct = (product) => {
|
||||
const { name, price } = product;
|
||||
const tdNameEl = createTd(name, 'td-name');
|
||||
const tdPriceEl = createTd(price, 'td-price');
|
||||
const trEl = createTr(tdNameEl, tdPriceEl);
|
||||
|
||||
DOM.tbody.appendChild(trEl);
|
||||
};
|
||||
|
||||
const createTd = (text, ...classNames) => {
|
||||
const td = document.createElement('td');
|
||||
td.classList.add(...classNames);
|
||||
td.textContent = text;
|
||||
|
||||
return td;
|
||||
};
|
||||
|
||||
const createTr = (...tds) => {
|
||||
const tr = document.createElement('tr');
|
||||
// tds.forEach((td) => {
|
||||
// tr.appendChild(td);
|
||||
// });
|
||||
tr.append(...tds);
|
||||
|
||||
return tr;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
@@ -0,0 +1,5 @@
|
||||
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 },
|
||||
];
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Productmanager</title>
|
||||
<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.3.1/css/all.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>
|
||||
<main>
|
||||
<!-- ▼ Product Manager ▼ -->
|
||||
<div class="product-manager">
|
||||
<div class="container py-5">
|
||||
<h1>Productmanager</h1>
|
||||
<!-- table.table.table-striped.table-products>thead.table-dark>tr>th*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 €</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tr>
|
||||
<td class="td-name">{PRODUCT_NAME}</td>
|
||||
<td class="td-price">{PRODUCT_PRICE}</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
name="product-name"
|
||||
class="form-control input-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">
|
||||
<span class="input-group-text">€</span>
|
||||
<input
|
||||
type="number"
|
||||
name="prodcut-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product price"
|
||||
min="0"
|
||||
step="0.01" />
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "03_product-manager",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "npx http-server -p 3000 -c-1"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "module"
|
||||
}
|
||||
Reference in New Issue
Block a user