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

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-10 09:05:08 +02:00
parent 94333161a4
commit 74f6ed1720
5 changed files with 113 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
01_grundlagen/linksammlung.md
View File

@@ -28,3 +28,10 @@
- [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/) - [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/)
## Blog/ Techartikelseiten
- Dev.to
- SmashingMagazine
- Awwwards
-

103
01_grundlagen/uebungen/u12b_prompt-lieblingsessen.html Normal file
View File

@@ -0,0 +1,103 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 12: Mit prompt das Lieblingsessen erfragen</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">
<div class="alert alert-primary my-3">
<h1>Übung 12: Mit prompt das Lieblingsessen erfragen</h1>
<ol>
<li>
Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
passend benannte Variablen.
</li>
<li>
Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
</li>
<li>
Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
Substitutions.
</li>
<li>
Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
gleichen Ausgabe verwenden lassen.
</li>
</ol>
</div>
<form name="userFavs">
<div class="row mb-3">
<div class="col-6">
<div class="form-floating">
<input type="text" class="form-control" name="userMeal" id="userMeal" />
<label for="userMeal">Lieblingsessen</label>
</div>
</div>
<div class="col-6">
<div class="form-floating">
<input type="text" class="form-control" name="userDrink" id="userDrink" />
<label for="userDrink">Lieblingsgetränk</label>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-center">
<button type="submit" class="btn btn-primary">Bestellen</button>
</div>
</div>
</form>
<div class="alert alert-success my-3 output-a invisible"></div>
<div class="alert alert-danger my-3 output-b invisible"></div>
<div class="alert alert-warning my-3 output-c invisible"></div>
</div>
</main>
<script>
'use strict';
const outputAEl = document.querySelector('.output-a');
const outputBEl = document.querySelector('.output-b');
const outputCEl = document.querySelector('.output-c');
const userForm = document.forms.userFavs;
userForm.addEventListener('submit', (e) => {
e.preventDefault();
const favMeal = userForm.userMeal.value;
const favDrink = userForm.userDrink.value;
if (favMeal === '' || favDrink === '') {
return;
}
outputAEl.classList.remove('invisible');
outputBEl.classList.remove('invisible');
outputCEl.classList.remove('invisible');
outputAEl.innerText =
'Salut User. Dein Lieblingsmahl ist also ' +
favMeal +
'? Und ' +
favDrink +
' dein Lieblingsgetränk? ... Hm, naja, jedem das Seine...';
outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registiert. Sie werden jetzt zum Bezahlungsprozess weitergeführt. Die Ausgabe der gewünschten Speisen ist optional und nicht garantiert. Einen schönen Tag noch! Beep`;
outputCEl.innerText =
`Mein Lieblingsmahl ist ${favMeal} und mein Lieblingsgetränk ist ` +
favDrink +
` und es ist mir scheißegal was ihr darüber denkt!!!111`;
});
</script>
</body>
</html>

2
01_grundlagen/unterricht/tag03/01_numbers.html
View File

@@ -33,7 +33,7 @@
// 15 + 240 // 15 + 240
// 0 - 9 A - F // 0 - 9 A - F
document.querySelector('h1').style.color = 'rgb(255, 153, 0)'; //'#ff9900'; //'#f90'; document.querySelector('h1').style.color = 'rgba(255, 153, 0, 1)'; //'#ff990099'; //'#f90';
// Exponential (z.B. 123e5 = 12300000) // Exponential (z.B. 123e5 = 12300000)
let exponentialExample = 123e5; // 12300000 let exponentialExample = 123e5; // 12300000

2
01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
View File

@@ -28,7 +28,7 @@
const totalPrice = netPrice * TAX_RATE; const totalPrice = netPrice * TAX_RATE;
const resultText = `total price: ${totalPrice.toFixed(2)}`; const resultText = `total price: $${totalPrice.toFixed(2)}`;
console.log(resultText); console.log(resultText);
outputEl.textContent = resultText; outputEl.textContent = resultText;

2
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
View File

@@ -59,7 +59,7 @@
// let for = 'me'; // let for = 'me';
// let typeof = 'file'; // let typeof = 'file';
// let 🚀 = 'rocket'; // let 🚀 = 'rocket';
// let 2ndCountet = 2; // Ziffern nicht am Anfang // let 2ndCounter = 2; // Ziffern nicht am Anfang
// let prozent% = '100' // let prozent% = '100'
// let counter-values = [1,20, 40] // let counter-values = [1,20, 40]
</script> </script>