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

modified table and added css

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-17 11:29:24 +02:00
parent b800871cdb
commit 28526c5239
2 changed files with 91 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
03_dom/unterricht/tag25/01_product-manager/assets/css/main.css
View File

@@ -0,0 +1,26 @@
*,
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #efefef;
}
/* Mobile first */
.product-manager table tfoot .row > * {
margin-bottom: 1rem;
}
@media (min-width: 992px) {
.product-manager table tfoot .row > * {
margin-bottom: 0;
}
}

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

@@ -5,14 +5,76 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Manager</title> <title>Product Manager</title>
<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="assets/css/main.css" /> <link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js" defer></script> <script src="assets/js/main.js" defer></script>
</head> </head>
<body> <body>
<main> <main>
<div class="container py-5"> <div class="product-manager my-5">
<h1>Product Manager!</h1> <div class="container">
<table></table> <!-- 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>Name</th>
<th>Price in &euro;</th>
</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>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<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>
</div> </div>
</main> </main>
</body> </body>