Compito: Creazione di un Avviso Bancario

Lavoriamo con un conto bancario. L'obiettivo è sviluppare una logica che informi l'utente se dispone di fondi sufficienti sulla propria carta per coprire un determinato prezzo. A seconda del risultato, verranno visualizzati messaggi diversi all'utente.

Il compito è:

• Creare due componenti - App, genitore, e Message, figlio.
• Il componente genitore (App) trasferisce le props moneyAvailable, price e name.
  1. moneyAvailable - rappresenta la somma di denaro disponibile per l'utente;
  2. price - indica la somma di denaro che l'utente deve pagare;
  3. name - si riferisce al nome dell'utente.
• Se l'utente ha abbastanza denaro per pagare, viene mostrato il messaggio: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Se l'utente non ha abbastanza denaro per pagare, viene mostrato il messaggio: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. In React, si utilizza l'operatore ternario condition ? ... : ... per implementare la logica di una dichiarazione if...else.
2. Per costruire correttamente la stringa,
   • Sostituire il segnaposto user_name con il vero nome dell'utente: prop name;
   • Sostituire il segnaposto calculated_amount_of_money_left con la quantità calcolata di denaro residuo - moneyAvailable - price;
   • Sostituire il segnaposto moneyAvailable con il denaro effettivamente disponibile - prop moneyAvailable;
   • Sostituire il segnaposto price con il prezzo effettivo - prop price.
3. Utilizzare le parentesi graffe {...} per assegnare un valore che non sia di tipo stringa.