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-23 14:26:45 +02:00
parent 7c76b37a32
commit ae62a154b3
16 changed files with 166 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
01_grundlagen/uebungen/#u33_newsletter.html Normal file
View File

@@ -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>