114 lines
3.8 KiB
HTML
114 lines
3.8 KiB
HTML
<!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>
|