Mini-Projekt (Teil 3): Trinkgeldrechner mit if/else if/else und switch

In diesen Übungen erweitern wir den Trinkgeldrechner aus den vorherigen Lektionen um Verzweigungen mit if/else und switch.

Aufgabe 1: Service-Bewertung mit Auswahl (Einstieg)

Erweitere den Trinkgeldrechner um eine Funktion suggestTip, die basierend auf einem “Service-Level” einen Prozentsatz vorschlägt:

• Parameter: serviceLevel (1 = schlecht, 2 = okay, 3 = gut)
• Rückgabewert: Vorgeschlagener Prozentsatz (5%, 10%, 15%)

function suggestTip(serviceLevel) {
  // Mit if/else if/else implementieren
}
 
// Tests:
console.log(suggestTip(1)); // 5
console.log(suggestTip(2)); // 10
console.log(suggestTip(3)); // 15

Integriere diese Funktion in den Trinkgeldrechner, sodass der Benutzer zwischen manuellem Prozentsatz und Service-Bewertung wählen kann:

import { keyInSelect } from 'readline-sync';
 
const options = ['Prozentsatz eingeben', 'Service bewerten'];
const choice = keyInSelect(options, 'Auswahl');
 
if (choice === 0) {
  // Prozentsatz direkt abfragen
} else if (choice === 1) {
  // Service-Level abfragen und suggestTip aufrufen
}

[1] Prozentsatz eingeben
[2] Service bewerten
[0] CANCEL

Auswahl [1, 2, 0]:

Aufgabe 2: Eingabevalidierung mit Fehlermeldung (Einstieg)

Erweitere die Validierungsfunktion, sodass sie nicht nur true/false zurückgibt, sondern bei ungültigen Eingaben eine passende Fehlermeldung ausgibt:

function validateAndReport(bill, percent, persons) {
  // Prüfe bill, percent, persons mit if-Anweisungen
  // Bei Fehler: Meldung ausgeben und false zurückgeben
  // Am Ende: true zurückgeben
}

Verwende diese Funktion im Hauptprogramm und führe die Berechnung nur aus, wenn die Validierung erfolgreich war.

Aufgabe 3: Erweiterte Bewertung (Übung)

Ersetze die Funktion getRating durch eine Version mit if/else, die mehr Kategorien unterstützt:

function getRating(percent) {
  // Mit if/else if/else implementieren
}
 
// Tests:
console.log(getRating(3));   // "Sehr sparsam"
console.log(getRating(7));   // "Sparsam"
console.log(getRating(12));  // "Normal"
console.log(getRating(17));  // "Großzügig!"
console.log(getRating(25));  // "Sehr großzügig"

Aufgabe 4: Bewertung mit switch (Übung)

Implementiere die Funktion suggestTip alternativ mit switch:

function suggestTip(serviceLevel) {
  switch (serviceLevel) {
    // Fälle hier ergänzen
  }
}

Aufgabe 5: Trinkgeldrechner komplett (Vertiefung)

Kombiniere alle Verbesserungen zu einem vollständigen Trinkgeldrechner:

1. Auswahl: manueller Prozentsatz oder Service-Bewertung
2. Eingabevalidierung mit Fehlermeldungen
3. Erweiterte Bewertung (5 Kategorien)
4. Formatierte Ausgabe

Beispielablauf:

=== Trinkgeldrechner ===
[1] Prozentsatz eingeben
[2] Service bewerten
[0] CANCEL

Auswahl [1, 2, 0]: 2

Service-Level (1=schlecht, 2=okay, 3=gut): 3
Rechnungsbetrag: 85.50
Anzahl Personen: 3

--- Ergebnis ---
Rechnungsbetrag:  85.50
Trinkgeld (15%):  12.83
Gesamtbetrag:     98.33
Pro Person:       32.78
Bewertung:        Großzügig!

Zusatzaufgabe: Smiley/Sadly in p5js.org

Mit dieser Zusatzaufgabe werden Funktionen zur Abwechslung in der JavaScript-Bibliothek p5js.org  eingesetzt.

Im p5js-Editor  lassen sich in einer interaktiven Umgebung Grafiken und Animationen erstellen.

Im Code werden zwei Funktionen deklariert (setup und draw). In den beiden Funktionen werden jeweils im Funktionsrumpf andere Funktionen aus dem Framework p5js aufgerufen (createCanvas() mit zwei Parametern und background() mit einem Parameter).

function setup() {	
  createCanvas(400, 400);	
}
	
function draw() {
  background(220);	
}

Aufgabe

Baue in editor.p5js.org einen interaktiven Smiley bzw. Sadly.

Der Smiley soll aus verschiedenen Kreisen (circle) für den Kopf, die Augen und den lächelnden Mund bestehen. Wenn der Mauszeiger in der oberen Hälfte der Leinwand (canvas) ist, soll der Smiley zu sehen sein. Bewegt sich der Mauszeiger in die untere Hälfte, dann wird der Smiley zu einem Sadly, d.h. die Mundwinkel zeigen nach unten. Die Mausposition kann jederzeit mit mouseX und mouseY abgefragt werden.

Versuche mindestens den Smiley in p5js zu bauen:

Hinweise zum Vorgehen:
Erstelle für die Zeichnung der einzelnen Bestandteile des Smileys jeweils passende Funktionen, die du dann in der draw-Funktion aufrufst, z. B.

function draw() {
  background(220);
  // die folgenden drei Funktionen sind zu schreiben!
  drawFace();
  drawEyes();
  drawMouth();
}

Der Sadly sieht dann so aus und sollte erscheinen, wenn der Mauszeiger in die untere Hälfte der canvas bewegt wird:

Mögliche Zusatzaufgaben:

Gestalte den Smiley nach eigenen Ideen: Pupillen, Augenbrauen, Brille, Hut, Zähne, usw. oder baue mehrere unterschiedliche Smileys ein.

Hier kannst du gerne kreativ werden und KI-Tools einsetzen!

→ Durch KI-Tools gelingt die Verwendung von p5js schneller und einfacher.