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-06-24 15:06:38 +02:00
parent 3da605979d
commit 3d73f1617b
33 changed files with 1359 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
01_grundlagen/uebungen/#o01_palindrom.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Optionale Übung optional 01: Palindrom Checker</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">
<h2>Optionale Übung 01: Palindrom Checker</h2>
<p>
Ein Palindrom ist ein Wort, das vorwärts und rückwärts gelesen dasselbe ist. Ein guter Weg, um das zu
überprüfen, ist, das Wort umzukehren und zu sehen, ob es dem Original entspricht. Allerdings sollte man
dabei die Groß- und Kleinschreibung sowie Leerzeichen oder Sonderzeichen berücksichtigen.
</p>
<p>
Schreibe eine JavaScript-Funktion namens <code>isPalindrom</code>, die eine Zeichenkette (string) als
Eingabe akzeptiert. Die Funktion soll <code>true</code> zurückgeben, wenn es sich bei der Zeichenkette um
ein Palindrom handelt, und <code>false</code> andernfalls.
</p>
<h3>Beispiele:</h3>
<ul>
<li>"anna"</li>
<li>"Lagerregal"</li>
<li>"Ein Esel lese nie"</li>
</ul>
<h3>Anforderungen:</h3>
<ul>
<li>
Die Funktion soll nicht zwischen Groß- und Kleinschreibung unterscheiden (z. B. 'Anna' ist ein Palindrom).
</li>
<li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

50
01_grundlagen/uebungen/#u30_quiz-dark-side.html
View File

@@ -1,50 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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">
<h1>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
<p>
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
</p>
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
<p>
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
</p>
<p>
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
wenn das Spiel seine Antwort Wenn als falsch quittiert.
</p>
<p>
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
Prüfung der if-Bedingung.
</p>
</div>
</div>
</main>
<script>
'use strict';
// const QUESTION_1 = 'es geht los! Sag mir mal, welcher Operator die höhere Priorität hat: * oder + ?';
// const SOLUTION_1 = '*';
// const QUESTION_2 = 'Was ist das deutsche Wort für if?';
// const SOLUTION_2A = 'falls';
// const SOLUTION_2B = 'wenn';
// const QUESTION_3 = 'Jetzt gib bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
// const SOLUTION_3A = 8;
// const SOLUTION_3B = 15;
</script>
</body>
</html>

88
01_grundlagen/uebungen/#u36_kekse-array.html Normal file
View File

@@ -0,0 +1,88 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 36: Kekse backen mit Arrays</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">
<h2>Übung 36: Kekse backen mit Arrays</h2>
<img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/526/800-534/53f6cb7feb9e9a7580d88ce5fa5a6d5c.jpg?1739200429"
alt=""
width="300"
class="img-thumbnail" />
<p>
Du möchtest ein digitales Rezeptbuch schreiben. Die Zutaten für das jeweilige Rezept stellst du in einem
Array zur Verfügung.
</p>
<ol>
<li>
Lege für das erste Rezept — Haferflocken-Kekse — ein Array mit den folgenden Zutaten an:
<code>
<pre>
1/4 cup vegetable oil
1 separated egg
1/2 cup sugar
1 tsp baking powder
</pre>
</code>
</li>
<li>Da in der Liste das Mehl fehlt, musst du 1 EL Mehl (1 tsp flour) noch nachträglich ergänzen.</li>
<li>
Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g
Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
</li>
<li>
Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste
dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
</li>
<li>
Wandle das Array nun in einen String um und speichere diesen in einer Variablen. Dabei sollen die Zutaten
als Liste ausgegeben werden.
</li>
<li>
Und damit die Rezeptspielerei nicht total sinnlos war, bekommst du natürlich noch die Anleitung von uns
dazu. Speichere auch diese in einer Variable und gib das komplette Rezept in der Konsole aus.
</li>
</ol>
<p>Anleitung:</p>
<blockquote>
Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let
it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now
mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be
too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a
pre-heated oven.
</blockquote>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const introduction = `Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a pre-heated oven.`;
const receipeAr = [
'1/4 cup vegetable oil', //
'1 separated egg',
'1/2 cup sugar',
'1 tsp baking powder',
];
</script>
</body>
</html>

81
01_grundlagen/uebungen/#u37-bus-stations.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 37: Die Kurzstreckenfahrt</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">
<h2>Übung 37: Die Kurzstreckenfahrt</h2>
<p>
Nach dem Backen möchtest du ein bisschen Zug fahren. Du selbst befindest dich in New York in der Nähe der
Haltestelle Astoria-Ditmars Blvd. Deine Freunde, die dich und deine Kekse schon freudig erwarten, wohnen bei
der Haltestelle Queensboro Plaza. Da du aber nur ein Kurzstrecken-Ticket lösen möchtest, musst du den Rest
der Strecke laufen. Deswegen benötigst du die Haltestellen-Liste (siehe Grafik) nur bis zur Haltestelle
Broadway.
</p>
<p><strong>Hinweis:</strong> Für diese Übung bietet es sich an, mit `slice` und `indexOf` zu arbeiten.</p>
<img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/527/800-590/3b5ac28c38d961b21846b5adfe676dc1.png?1739200430"
width="400"
alt=""
class="img-thumbnail" />
<ol>
<li>
Erstelle ein Array mit den Haltestellen der Linie W:
<code>
<pre>
'use strict';
const LINE_W = [
'Astoria-Ditmars Blvd',
'Astoria Blvd',
'30 Av',
'Broadway',
'36 Av',
'39 Av',
'Queensboro Plaza',
];
</pre>
</code>
</li>
<li>Finde die Position der gewünschten Zielhaltestelle Broadway heraus.</li>
<li>Entferne alle Haltestellen nach Broadway aus dem Array.</li>
<li>
Schreibe eine Funktion, die dir nach Übergabe einer beliebigen Zielhaltestelle ein Array mit allen
Haltestellen ab Astoria-Ditmars Blvd bis zur Zielhaltestelle zurückgibt.
</li>
<li>Erweitere die Funktion, sodass du auch die Starthaltestelle übergeben kannst.</li>
</ol>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const LINE_W = [
'Astoria-Ditmars Blvd',
'Astoria Blvd',
'30 Av',
'Broadway',
'36 Av',
'39 Av',
'Queensboro Plaza',
];
</script>
</body>
</html>

34
01_grundlagen/uebungen/#u38_alte-listen.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 38: Alte Listen</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">
<h2>Übung 38: Alte Listen</h2>
<p>
NerdWorld stellt dir eine neue Aufgabe: Die Mitarbeiter haben Produkte früher in Excel-Listen verwaltet. Zu
Migrationszwecken haben die Mitarbeiter sie nun als CSV-Dateien (comma separated values) exportiert. Damit
sind dann alle Elemente in einer Liste durch Kommas getrennt.
</p>
<p>
Schreibe eine Funktion handleCsv, die einen übergebenen CSV-String in ein Array splittet und alphabetisch
sortiert. Logge das fertig verarbeitete Array als Liste (pro Produkt eine Zeile) in die Konsole.
</p>
</div>
</div>
</main>
<script>
'use strict';
const productList =
'3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar, Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
</script>
</body>
</html>

9
01_grundlagen/uebungen/#u27-zerlegter-heribert.html → 01_grundlagen/uebungen/u27-zerlegter-heribert.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -25,6 +25,13 @@
const outputElement = document.querySelector('.output');
const name = 'Heribert Gold '.trim();
const spacePosition = name.indexOf(' ');
const firstName = name.substring(0, spacePosition);
const lastName = name.substring(spacePosition + 1).trim();
console.log(firstName);
console.log(lastName);
</script>
</body>
</html>

12
01_grundlagen/uebungen/#u28_transformierte-ladislaus.html → 01_grundlagen/uebungen/u28_transformierte-ladislaus.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -27,6 +27,16 @@
const outputEl = document.querySelector('.output');
const name = 'Ladislaus Jones'.trim();
const firstSpacePos = name.indexOf(' ');
const lastSpacePos = name.lastIndexOf(' ');
const firstName = name.substr(0, firstSpacePos);
const secondName = name.substr(lastSpacePos);
const firstNamefirstLetter = firstName.substr(0, 1).toUpperCase();
outputEl.textContent = `${secondName}, ${firstNamefirstLetter}.`;
</script>
</body>
</html>

10
01_grundlagen/uebungen/#u29_fuehrende-nullen.html → 01_grundlagen/uebungen/u29_fuehrende-nullen.html
View File

@@ -26,12 +26,20 @@
<li>007 =&gt; 007</li>
</ul>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let itemNumber = '123';
const outputEl = document.querySelector('.output');
const itemNumber = '123';
// const correctedItemNr = (itemNumber.charAt(0) !== '0' ? '0' : '') + itemNumber;
const correctedItemNr = (itemNumber.startsWith('0') ? '' : '0') + itemNumber;
outputEl.textContent = `ItemNr: ${itemNumber}, CorrectedItemNr: ${correctedItemNr}.`;
</script>
</body>
</html>

88
01_grundlagen/uebungen/u30_quiz-dark-side.html Normal file
View File

@@ -0,0 +1,88 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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">
<h1>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
<p>
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
</p>
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
<p>
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
</p>
<p>
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
wenn das Spiel seine Antwort Wenn als falsch quittiert.
</p>
<p>
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
Prüfung der if-Bedingung.
</p>
</div>
</div>
</main>
<script>
'use strict';
const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
const SOLUTION_1 = '*';
const QUESTION_2 = 'Was ist das deutsche Wort für if?';
const SOLUTION_2_1 = 'wenn';
const SOLUTION_2_2 = 'falls';
const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
const SOLUTION_3_1 = 8;
const SOLUTION_3_2 = 15;
const outputEl = document.querySelector('.output');
const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
const playerFitness = prompt(
`${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
)
.trim()
.toLowerCase();
if (playerFitness === 'ja' || playerFitness === 'y') {
alert('Okay, mögen die Spiele beginnen');
const answer1 = prompt(QUESTION_1).trim().toLowerCase();
if (answer1 === SOLUTION_1) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
}
const answer2 = prompt(QUESTION_2).trim().toLowerCase();
if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
}
const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
} else {
alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
}
} else {
alert(`${username}, die dunkle Seite ist stark in dir!`);
}
</script>
</body>
</html>

21
01_grundlagen/uebungen/#u31_function-console.html → 01_grundlagen/uebungen/u31_function-console.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -19,9 +19,22 @@
const outputEl = document.querySelector('.output');
/*
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
*/
const outputName = (name) => {
console.log(name);
alert(name);
};
outputName('Max Power');
// =====
const getName = (name) => {
return name[0].toUpperCase() + name.substring(1).toLowerCase();
};
console.log(getName('philippe'));
alert(getName('adel'));
outputEl.textContent = getName('KaHlEeL');
</script>
</body>
</html>

10
01_grundlagen/uebungen/#u32-tranformed-ladislaus.html → 01_grundlagen/uebungen/u32-tranformed-ladislaus.html
View File

@@ -24,6 +24,16 @@
</main>
<script>
'use strict';
const logTransformedName = (firstName, secondName) => {
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
console.log(tName);
};
logTransformedName('Max', 'Power');
logTransformedName('adEL', 'jabaRkHel');
logTransformedName('kAHlEel', 'johNson');
logTransformedName('andreAs', 'rohLedEr');
</script>
</body>
</html>

33
01_grundlagen/uebungen/#u33_newsletter.html → 01_grundlagen/uebungen/u33_newsletter.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -99,15 +99,38 @@ showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
</li>
</ol>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
/*
TODO: showInvitationFor Function
*/
const outputEl = document.querySelector('.output');
const showInventationFor = (name, event, date, VIP) => {
return `Dear ${name},
${VIP ? 'You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.' : 'Thank you for your registration.'}
Event Details:
- Event: ${event}
- Date: ${date}
- Venue: Main Hall, Conference Center
We look forward to seeing you at the event!
Best regards,
The Event Team`;
};
console.log(showInventationFor('Heribert', 'Tech Conference', 'July 24', true));
console.log('==============================');
console.log(showInventationFor('Goldy', 'Art Workshop', 'August 15', false));
console.log('==============================');
showInventationFor('Ladislaus', 'Music Festival', 'September 10', true);
console.log(console.log('=============================='));
outputEl.innerHTML = showInventationFor('Andreas', 'JS Conference', 'June 24', true).replaceAll('\n', '<br />');
</script>
</body>
</html>

16
01_grundlagen/uebungen/#u34-tranformed-ladislaus.html → 01_grundlagen/uebungen/u34-tranformed-ladislaus.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -69,12 +69,24 @@
const inputLastnameEl = document.querySelector('input[name="lastname"]');
// Funktionsdefinition
const transformName = (firstName, secondName) => {
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
return tName;
};
formTransformEl.addEventListener('submit', (e) => {
e.preventDefault();
const name = transformName(inputFirstnameEl.value, inputLastnameEl.value);
outputEl.textContent = name;
});
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
// =====
console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
console.log(transformName('Max', 'Power'));
console.log(transformName('adEL', 'jabaRkHel'));
console.log(transformName('kAHlEel', 'johNson'));
console.log(transformName('andreAs', 'rohLedEr'));
</script>
</body>
</html>

18
01_grundlagen/uebungen/#u35_reichweite-verbrauch.html → 01_grundlagen/uebungen/u35_reichweite-verbrauch-1.html
View File

@@ -62,7 +62,7 @@
<script>
'use strict';
// DOM & Variabendeklaration ==
// DOM & Variabendeklaration ========
const formCalculatorEl = document.querySelector('.form-calculator');
const outputAEl = document.querySelector('#output');
const outputBEl = document.querySelector('#output2');
@@ -72,19 +72,27 @@
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
//const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
//const strecke = prompt('Geben Sie die Strecke an!');
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
// const strecke = prompt('Geben Sie die Strecke an!');
// Funktionen =========
// Funktionen =========================
//
const berechneBenzinVerbrauch = (benzinMenge, strecke) => {
const verbrauch = (benzinMenge / strecke) * 100;
return Number(verbrauch.toFixed(1));
};
// EventHandler =======
const onSubmit = (e) => {
e.preventDefault();
console.log(berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value));
outputAEl.textContent = berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value);
};
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
// berechneBenzinVerbrauch(benzinMenge, strecke);
</script>
</body>
</html>

112
01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html Normal file
View File

@@ -0,0 +1,112 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 35: Reichweite & Verbrauch, Teil 3</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">
<h1>Übung 35: Reichweite & Verbrauch, Teil 3</h1>
<p>
Überarbeiten Sie Reichweite & Verbrauch, Teil 2 (Übung 18). Erstellen Sie passende Funktionen, die die
Benutzereingaben zurückgeben.
</p>
</div>
</div>
<section class="section-calculator">
<div class="container">
<form class="form-calculator" method="get">
<div class="row">
<div class="col-12 col-sm-6">
<div class="mb-3">
<label for="input-strecke" class="form-label">Strecke</label>
<input type="number" class="form-control" name="strecke" id="input-strecke" />
</div>
</div>
<div class="col-12 col-sm-6">
<div class="mb-3">
<label for="input-benzinmenge" class="form-label">verbrauchte Benzinmenge</label>
<input type="number" class="form-control" name="benzinmenge" id="input-benzinmenge" />
</div>
</div>
</div>
<!-- ▲ /.row ▲ -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-tankgroesse" class="form-label">Tankgröße</label>
<input type="number" class="form-control" name="tangroesse" id="input-tankgroesse" />
</div>
</div>
</div>
<!-- ▲ /.row ▲ -->
<div class="row">
<div class="col">
<!-- <input type="submit" value="Rechnen" class="btn btn-dark button-calculate" /> -->
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
</div>
</div>
</form>
<div class="alert alert-secondary my-3" id="output"></div>
<div class="alert alert-secondary my-3" id="output2"></div>
</div>
</section>
</main>
<script>
'use strict';
// DOM & Variabendeklaration ========
const formCalculatorEl = document.querySelector('.form-calculator');
const outputAEl = document.querySelector('#output');
const outputBEl = document.querySelector('#output2');
const streckeEl = document.querySelector('input[name="strecke"]');
const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
// const strecke = prompt('Geben Sie die Strecke an!');
// Funktionen =========
const askFuelConsumption = () => {
return benzinMengeEl.value;
};
//
const askDistance = () => {
return streckeEl.value;
};
const askTankSize = () => {
return tankGroesseEL.value;
};
const calcConsumptionKm = (fuelConsumption, distance) => (fuelConsumption / distance) * 100;
const calcMaxDistance = (tankSize, distance, fuelConsumption) => (tankSize * distance) / fuelConsumption;
// EventHandler =======
const onSubmit = (e) => {
e.preventDefault();
const fuelConsumption = askFuelConsumption();
const distance = askDistance();
const tankSize = askTankSize();
const resultConsumption = calcConsumptionKm(fuelConsumption, distance);
const resultDistance = calcMaxDistance(tankSize, distance, fuelConsumption);
outputAEl.textContent = `Ihr Verbrauch liegt bei ${resultConsumption.toFixed(2)} l/100km`;
outputBEl.textContent = `Die maximale Reichweite beträgt ${Math.round(resultDistance)}km`;
};
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-35-38-o1.zip Normal file
View File

Binary file not shown.