This commit is contained in:
Philippe Torrel
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 33: Hello, dear ${recipient}</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 33: Hello, dear ${recipient}</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>
|
||||
Stell dir vor, du arbeitest für ein Unternehmen, das Veranstaltungen organisiert. Du sollst für diesen
|
||||
Auftraggeber Einladungen verschicken:
|
||||
</p>
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
Dear Heribert,
|
||||
|
||||
Thank you for your registration.
|
||||
|
||||
Event Details:
|
||||
- Event: Tech Conference
|
||||
- Date: July 24
|
||||
- Venue: Main Hall, Conference Center
|
||||
|
||||
We look forward to seeing you at the event!
|
||||
|
||||
Best regards,
|
||||
The Event Team
|
||||
</pre>
|
||||
</code>
|
||||
<p>
|
||||
Programmiere eine Funktion, die eine Einladung, simuliert durch eine Konsolenausgabe, für die Teilnehmer
|
||||
generiert. Dabei soll statt Heribert ein beliebiger Name verwendbar sein.
|
||||
</p>
|
||||
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert');
|
||||
showInvitationFor('Goldy');
|
||||
showInvitationFor('Ladislaus');
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Da unser Auftraggeber verschiedene Veranstaltungen zu verschiedenen Zeitpunkten organisiert, sollen im
|
||||
nächsten Schritt zwei weitere Parameter angegeben werden, in dem die Art der Veranstaltung, sowie ein
|
||||
Datum, jeweils als Text, übergeben wird.
|
||||
</p>
|
||||
<p>
|
||||
Einen zweiten Parameter kannst du bei der Funktionsdefinition innerhalb der Klammern durch Komma
|
||||
getrennt angeben.
|
||||
</p>
|
||||
<code>
|
||||
<pre>
|
||||
let showInvitationFor = (recipient, event, date) => {
|
||||
// ...
|
||||
}
|
||||
</pre>
|
||||
</code>
|
||||
<p>
|
||||
Es sind auch weitere Parameter möglich, aber hier benötigst du nur drei. Innerhalb des Rumpfes kannst du
|
||||
die neuen Parameter wie gewohnt wie eine Variable verwenden.
|
||||
</p>
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert', 'Tech Conference', 'July 24');
|
||||
showInvitationFor('Goldy', 'Art Workshop', 'August 15');
|
||||
showInvitationFor('Ladislaus', 'Music Festival', 'September 10');
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Dein Auftraggeber bietet auch einen VIP-Status für Teilnehmer an. Fall ein Teilnehmer diesen Status
|
||||
gebucht hat, soll der einleitende Text der Einladung entsprechend angepasst werden:
|
||||
</p>
|
||||
<h3>Standard-Version</h3>
|
||||
<p><code>Thank you for your registration.</code></p>
|
||||
<h3>VIP-Version</h3>
|
||||
<p><code>You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.</code></p>
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert', 'Tech Conference', 'July 24', true);
|
||||
showInvitationFor('Goldy', 'Art Workshop', 'August 15', false);
|
||||
showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
|
||||
TODO: showInvitationFor Function
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 34: Der transformierte Ladislaus, 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 34: Der transformierte Ladislaus, Teil 3</h1>
|
||||
<p>
|
||||
Schreiben Sie eine Funktion <code>transformName</code>, die Vor- und Nachname als Parameter entgegennimmt
|
||||
und einen String der Form
|
||||
</p>
|
||||
<p>
|
||||
<code><Nachname>, <Anfangsbuchstabe des Vornamens>.</code>
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="mt-3">Formular:</h3>
|
||||
<form class="form-transform">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="input-firstname">Vorname:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
placeholder="Vorname eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="input-lastname">Nachname:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="lastname"
|
||||
id="input-lastname"
|
||||
placeholder="Nachname eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
|
||||
|
||||
<button type="submit" class="btn btn-dark button-transform button">Transform name</button>
|
||||
<button type="reset" class="btn btn-danger button-transform button">resetted</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<h3 class="mt-3">Transformierter Name:</h3>
|
||||
<div class="output alert alert-secondary"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const formTransformEl = document.querySelector('.form-transform');
|
||||
const outputEl = document.querySelector('.output');
|
||||
const inputFirstnameEl = document.querySelector('input[name="firstname"]');
|
||||
const inputLastnameEl = document.querySelector('input[name="lastname"]');
|
||||
|
||||
// Funktionsdefinition
|
||||
|
||||
formTransformEl.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!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 =========
|
||||
|
||||
//
|
||||
|
||||
// EventHandler =======
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Binary file not shown.
Reference in New Issue
Block a user