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:
Top comments (0)