Learn SwiftUI (Day 18/100)

Project

Based on the current "We Split" app, make changes:

• Add a header to the third section, saying “Amount per person”
• Add another section showing the total amount for the check – i.e., the original amount plus tip value, without dividing by the number of people.
• Change the tip percentage picker to show a new screen rather than using a segmented control, and give it a wider range of options – everything from 0% to 100%. Tip: use the range 0..<101 for your range rather than a fixed array.

import SwiftUI

struct ContentView: View {
    @State private var checkAmount:Double = 0
    @State private var numOfPeopleIndex:Int = 0
    @State private var tipsPercent:Int = 10
    @FocusState private var isFocused: Bool

    private let minPeopleCount = 2
    private let tipsPercentList: [Int] = Array(0...100)


    var total : Double {
        checkAmount * (1.0 + Double(tipsPercent) / 100.0)
    }
    var amountPerPerson: Double {
        total / Double(numOfPeopleIndex + minPeopleCount)
    }

    var body: some View {
        NavigationStack {
            Form {
                Section{
                    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                        .keyboardType(.numberPad)
                        .focused($isFocused)
                    Picker("Number of people", selection: $numOfPeopleIndex) {
                        ForEach(2..<20) {
                            Text("\($0) People")
                        }
                    }
                    .pickerStyle(.navigationLink)
                }

                Section("Tip") {
                    Picker("Tip Percentage", selection: $tipsPercent) {
                        ForEach(tipsPercentList, id: \.self) {
                            Text($0, format: .percent)
                        }
                    }
                    .pickerStyle(.navigationLink)
                }

                Section("Total") {
                    Text(total, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                }

                Section("Amount per person") {
                    Text(amountPerPerson, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                }

            }
            .navigationTitle("We Split")
            .toolbar {
                if isFocused {
                    Button("Done") {
                        isFocused = false
                    }
                }
            }
        }
    }
}

Result: