Herausforderung: Bedingte Darstellung - Bankalarm

Aufgabe: Erstellen eines Bankalarms

Arbeiten wir mit einem Bankkonto. Wir möchten eine Logik entwickeln, die den Benutzer darüber informiert, ob er genügend Geld auf seiner Karte hat, um einen bestimmten Preis zu decken. Abhängig vom Ergebnis werden wir dem Benutzer unterschiedliche Nachrichten anzeigen.

Die Aufgabe ist:

• Erstellen Sie zwei Komponenten - App, Eltern, und Message, Kind.
• Die Elternkomponente (App) überträgt die Props moneyAvailable, price und name.
  1. moneyAvailable - repräsentiert den Geldbetrag, den der Benutzer hat;
  2. price - bezeichnet den Geldbetrag, den der Benutzer zahlen muss;
  3. name - bezieht sich auf den Namen des Benutzers.
• Wenn der Benutzer genug Geld hat, um zu zahlen, zeigen wir die Nachricht: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Wenn der Benutzer nicht genug Geld hat, um zu zahlen, zeigen wir die Nachricht: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. In React verwenden wir den ternären Operator condition ? ... : ..., um die Logik einer if...else-Anweisung zu implementieren.
2. Um den String korrekt zu konstruieren,
   • Ersetzen Sie den Platzhalter user_name durch den tatsächlichen Benutzernamen: name-Prop;
   • Ersetzen Sie den Platzhalter calculated_amount_of_money_left durch den berechneten Betrag des verbleibenden Geldes - moneyAvailable - price;
   • Ersetzen Sie den Platzhalter moneyAvailable durch das tatsächlich verfügbare Geld - moneyAvailable-Prop;
   • Ersetzen Sie den Platzhalter price durch den tatsächlichen Preis - price-Prop.
3. Verwenden Sie geschweifte Klammern {...}, um einen Wert zuzuweisen, der kein String-Typ ist.