For the Tenth prompt, we have Goodwill. What will you create?

I’m looking forward to seeing what you come up with today.

Build a Charity Donation Tracker App in SwiftUI

Getting Started

---

1. Set Up Your Project

You can find the sample project in the GitHub repository here

Here is the Background Image I used.

Create a new SwiftUI project in Xcode:

1. Open Xcode and select Create a new project.
2. Choose the App template, click Next.
3. Enter your project name (e.g., “CharityDonationTracker”), set the interface to SwiftUI, and click Create.

---

What You’ll Learn

1. Storing data in an array using @State.
2. Using TextField for user input.
3. Displaying dynamic content in a List.
4. Styling UI elements with buttons, text fields, and backgrounds.

---

Step 1: Define the Donation Model

We’ll begin by defining a Donation model to represent each donation’s details.

Code Snippet: Donation Model

struct Donation: Identifiable {
    let id = UUID()
    let organization: String
    let amount: Double
}

Explanation:

• Identifiable: Conforms to Identifiable so donations can be easily used in SwiftUI lists.
• Fields:
• organization: Name of the charitable organization.
• amount: The donation amount.

---

Step 2: Setting Up State Variables

We’ll use @State variables to manage the donations array and user inputs for the organization name and donation amount.

Code Snippet: State Variables

@State private var donations: [Donation] = []
@State private var organization = ""
@State private var amount = ""

Explanation:

• donations: Stores the list of donations.
• organization: Holds the user input for the organization name.
• amount: Holds the user input for the donation amount.

---

Step 3: Adding Input Fields

We’ll use two TextFields to collect the organization name and donation amount.

Code Snippet: Input Fields

TextField("Organization Name", text: $organization)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding(.horizontal)

TextField("Donation Amount", text: $amount)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .keyboardType(.decimalPad)
    .padding(.horizontal)

Explanation:

1. Rounded Style: Improves the appearance of the text fields.
2. Keyboard Type: Sets the keyboard to numeric for the amount field.

---

Step 4: Adding a Donation

Next, we’ll add a button to validate the input and append a new donation to the list.

Code Snippet: Add Donation Button

Button {
    guard let amountValue = Double(amount), !organization.isEmpty else { return }

    let newDonation = Donation(
        organization: organization,
        amount: amountValue
    )
    donations.append(newDonation)

    // Clear input fields
    organization = ""
    amount = ""
} label: {
    Text("Add Donation")
        .font(.headline)
        .foregroundColor(.white)
        .padding()
        .background(Color.green)
        .cornerRadius(10)
}

Explanation:

1. Validation:

• Ensures the amount is a valid number.
• Checks that organization is not empty.

1. Add to List:

• Creates a new Donation object and appends it to the donations array.

1. Clear Inputs: Resets the input fields after adding a donation.

---

Step 5: Displaying the Donation List

We’ll use a List to display all recorded donations.

Code Snippet: Donation List

List(donations) { donation in
    VStack(alignment: .leading, spacing: 5) {
        Text(donation.organization)
            .font(.headline)
        Text("Amount: £\(donation.amount, specifier: "%.2f")")
            .font(.subheadline)
    }
}
.listStyle(PlainListStyle())
.scrollContentBackground(.hidden)
.scrollIndicators(.hidden)

Explanation:

1. Dynamic Content:

• Each donation is displayed as a VStack with the organization name and amount.

1. List Styling:

• PlainListStyle: Provides a clean look.
• Hides scroll indicators and the default background for a sleek appearance.

---

Step 6: Adding a Background

Let’s give the app a stylish background to make it more visually appealing.

Code Snippet: Background Styling

.background(
    Image("bg").overlay(.black.opacity(0.2)).opacity(0.9)
        .blur(radius: 10)
)

Explanation:

1. Image Overlay:

• Applies a semi-transparent black overlay on top of the background image.
• Adds a blur effect for a soft, modern look.

1. Image Source:

• Replace "bg" with the name of your background image in the asset catalog.

---

Step 7: Bringing It All Together

Here’s the complete code for your Charity Donation Tracker App:

import SwiftUI

struct Donation: Identifiable {
    let id = UUID()
    let organization: String
    let amount: Double
}

struct ContentView: View {

    @State private var donations: [Donation] = []
    @State private var organization = ""
    @State private var amount = ""

    var body: some View {

        VStack(spacing: 20) {
            // Header
            Text("Charity Donation Tracker")
                .font(.largeTitle)
                .multilineTextAlignment(.center)
                .fontWeight(.bold)
                .padding()
                .foregroundStyle(.white)

            // Organisation
            TextField("Organization Name", text: $organization)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)

            // Donation
            TextField("Donation Amount", text: $amount)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.decimalPad)
                .padding(.horizontal)

            // Add donation to list
            Button {
                guard let amountValue = Double(amount), !organization.isEmpty else { return }

                let newDonation = Donation(
                    organization: organization,
                    amount: amountValue
                )
                donations.append(newDonation)

                // Clear input fields
                organization = ""
                amount = ""
            } label: {
                Text("Add Donation")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.green)
                    .cornerRadius(10)
            }

            // Donation List
            List(donations) { donation in
                VStack(alignment: .leading, spacing: 5) {
                    Text(donation.organization)
                        .font(.headline)
                    Text("Amount: £\(donation.amount, specifier: "%.2f")")
                        .font(.subheadline)
                }
            }
            .listStyle(PlainListStyle())
            .scrollContentBackground(.hidden)
            .scrollIndicators(.hidden)
        }
        .padding()
        .background(
            Image("bg").overlay(.black.opacity(0.2)).opacity(0.9)
                .blur(radius: 10)
        )
    }
}

---

Step 8: Run Your App

Run the app on an iOS Simulator or device. Test the following features:

---

What’s Next?

Here are some ideas to expand your app:

1. Total Donations: Add a header showing the total donation amount.
2. Delete Donations: Enable users to swipe to delete donations from the list.
3. Save Data: Use UserDefaults or a database to persist donation data across app launches.
4. Currency Symbol Based on Location: Automatically display the correct currency symbol (e.g., $ for USD, £ for GBP, €for EUR) by detecting the user’s region settings using Locale.

🎉 Congratulations! You’ve built a functional Charity Donation Tracker App in SwiftUI. 🌟