This commit is contained in:
Philippe Torrel
@@ -20,6 +20,7 @@
|
|||||||
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
|
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
|
||||||
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
|
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
|
||||||
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
|
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
|
||||||
|
- [CSS BEM (Block-Element-Modifier)](https://getbem.com/introduction/)
|
||||||
|
|
||||||
## Tools/ Software
|
## Tools/ Software
|
||||||
|
|
||||||
|
|||||||
@@ -73,6 +73,51 @@
|
|||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
// DOM & Variablendeklaration
|
||||||
|
const DOM = {
|
||||||
|
// eigenschaft: 'Wert',
|
||||||
|
formCalculator: document.querySelector('.form-calculator'),
|
||||||
|
inputDistance: document.querySelector('.input-distance'),
|
||||||
|
inputFuelUsed: document.querySelector('.input-fuel-used'),
|
||||||
|
inputTankSize: document.querySelector('.input-tank-size'),
|
||||||
|
buttonCalculate: document.querySelector('.button-calculate'),
|
||||||
|
output: document.querySelector('.output'),
|
||||||
|
};
|
||||||
|
// const formCalculatorEl = document.querySelector('.form-calculator');
|
||||||
|
// const inputDistanceEl = document.querySelector('.input-distance');
|
||||||
|
// const inputFuelUsedEl = document.querySelector('.input-fuel-used');
|
||||||
|
// const inputTankSizeEl = document.querySelector('.input-tank-size');
|
||||||
|
// const buttonCalculate = document.querySelector('.button-calculate');
|
||||||
|
|
||||||
|
// const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
// console.log(formCalculatorEl, inputDistanceEl, inputFuelUsedEl, inputTankSizeEl, outputEl, buttonCalculate);
|
||||||
|
console.log(DOM);
|
||||||
|
|
||||||
|
DOM.formCalculator.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten an action-URL versenden wird unterbunden)
|
||||||
|
|
||||||
|
// ====
|
||||||
|
const distance = Number(DOM.inputDistance.value);
|
||||||
|
const fuelUsed = Number(DOM.inputFuelUsed.value);
|
||||||
|
const tankSize = Number(DOM.inputTankSize.value);
|
||||||
|
|
||||||
|
// Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100
|
||||||
|
const consumption = (fuelUsed / distance) * 100;
|
||||||
|
// Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l]
|
||||||
|
const maxDistance = (tankSize * distance) / fuelUsed;
|
||||||
|
|
||||||
|
const textConsumption = `${consumption.toFixed(1)} l/100km.`;
|
||||||
|
const textMaxDistance = `Die maximale Reichweite beträgt: ${Math.round(maxDistance)}km`;
|
||||||
|
console.log(textConsumption);
|
||||||
|
console.log(textMaxDistance);
|
||||||
|
|
||||||
|
DOM.output.innerHTML = `<p>${textConsumption}</p><p>${textMaxDistance}</p>`;
|
||||||
|
// ===
|
||||||
|
|
||||||
|
console.log('Event: ', e);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
82
01_grundlagen/unterricht/tag05/03_contact-form.html
Normal file
82
01_grundlagen/unterricht/tag05/03_contact-form.html
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>HTML Kontaktformular</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>HTML Kontaktformular</h1>
|
||||||
|
<!-- form.form-contact>.row>.col>.mb-3 -->
|
||||||
|
<form class="form-contact">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-firstname" class="form-label">Vorname</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="input-firstname"
|
||||||
|
name="firstname"
|
||||||
|
class="form-control input-firstname"
|
||||||
|
placeholder="Vorname eingeben..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-lastname" class="form-label">Nachname</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="input-lastname"
|
||||||
|
name="lastname"
|
||||||
|
class="form-control input-lastname"
|
||||||
|
placeholder="Nachname eingeben..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /row ▲ -->
|
||||||
|
<!-- .row>.col>.mb-3 -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-email" class="form-label">E-Mail</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="input-email"
|
||||||
|
class="form-control input-email"
|
||||||
|
placeholder="E-Mail eingeben..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /row ▲ -->
|
||||||
|
<!-- .row>.col>.mb-3 -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="textarea-message" class="form-label">Nachricht</label>
|
||||||
|
<textarea name="message" id="textarea-message" class="form-control textarea-message"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /row ▲ -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="mb-3">
|
||||||
|
<!-- button:submit.btn.btn-dark.button-submit{Senden} -->
|
||||||
|
<button type="submit" class="btn btn-dark button-submit">Senden</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
111
01_grundlagen/unterricht/tag05/04_cards-in-grid.html
Normal file
111
01_grundlagen/unterricht/tag05/04_cards-in-grid.html
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Col Grid von BS</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.container {
|
||||||
|
background-color: #888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
background-color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>Col Grid von BS</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="card">
|
||||||
|
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="card">
|
||||||
|
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="card">
|
||||||
|
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="card">
|
||||||
|
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /col ▲ -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
01_grundlagen/unterricht/tag05/meeting.md
Normal file
6
01_grundlagen/unterricht/tag05/meeting.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# Meeting Fr. 19.06.2026
|
||||||
|
|
||||||
|
- [ ] 15:00 - 15:10 Uhr Ersin
|
||||||
|
- [ ] 15:10 - 15:20 Uhr Adel
|
||||||
|
- [ ] 15:20 - 15:30 Uhr Kahleel
|
||||||
|
- [ ] 15:30 - 15:40 Uhr Andreas
|
||||||
Reference in New Issue
Block a user