100 Days of SwiftUI – Day 18 – WeSplit Review

It’s day 18 of the 100 Days of SwiftUI! We finished our first project yesterday, so today, it was time to review what we learned to make sure it really hit home, as well as do a few challenges. Today’s post will be short as I will only go through the challenges, but it’s important nonetheless. Let’s dive in!

WeSplit challenges in SwiftUI

The challenges we faced:

• 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.

And to add to this list, we had a bonus challenge that was more difficult: put the currency formatter into a property, so that it can be called more easily whenever it is needed, instead of using a very long declaration every time.

The complete code I came up with that includes these challenges, is as follows:

import SwiftUI

struct ContentView: View {
    @State private var checkAmount = 0.0
    @State private var numberOfPeople = 2
    @State private var tipPercentage = 20
    @FocusState private var amountIsFocused: Bool
    
    let tipPercentages = Array(1..<101)
//    func currencyFormatter() -> FloatingPointFormatStyle<Double>.Currency {
//        .currency(code: Locale.current.currencyCode ?? "EUR")
//    }
    
    var currencyFormatter: FloatingPointFormatStyle<Double>.Currency {
        let currencyCode = Locale.current.currencyCode ?? "EUR"
        return FloatingPointFormatStyle<Double>.Currency(code: currencyCode)
    }
    
    var totalPerPerson: Double {
        // Calculate total per person
        let peopleCount = Double (numberOfPeople + 2)
        let tipSelection = Double (tipPercentage)
        
        let tipValue = checkAmount / 100 * tipSelection
        let grandTotal = checkAmount + tipValue
        let amountPerPerson = grandTotal / peopleCount
        
        return amountPerPerson
    }
    
    var grandTotal: Double {
        let tipSelection = Double (tipPercentage)
        
        let tipValue = checkAmount / 100 * tipSelection
        let grandTotal = checkAmount + tipValue
        
        return grandTotal
    }
    
    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Amount", value: $checkAmount, format:
                            .currency(code: Locale.current.currencyCode ?? "USD"))
                            .keyboardType(.decimalPad)
                            .focused($amountIsFocused)
                    
                    Picker("Number of people", selection: $numberOfPeople) {
                        ForEach(2..<100) {
                            Text("\($0) people")
                        }
                    }
                }
                
                Section {
                    Picker("Tip percentage", selection: $tipPercentage) {
                        ForEach(tipPercentages, id: \.self) {
                            Text($0, format: .percent)
                        }
                    }
                    
                    .pickerStyle(.automatic)
                } header: {
                    Text("Tip percentage")
                }
                
                Section {
                    Text(grandTotal, format: currencyFormatter)
                } header: {
                    Text("Grand total")
                }
                
                Section {
                    Text(totalPerPerson, format: currencyFormatter)
                } header: {
                    Text("Amount per person")
                }
                
            }
            
            .navigationTitle("WeSplit")
            .toolbar{
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    
                    Button("Done") {
                        amountIsFocused = false
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

You may have caught the commented function. This was my first solution. However, a function is not a property, so I had to dive a bit deeper to find the final solution you see in the code above. Part of being a developer is being able to use the documentation of the language you are programming, so this was a great test.

And that’s a wrap for the first project! Tomorrow will be our first challenge day! No new material to learn, but we have to write an app by ourselves from scratch using all the knowledge we’ve gathered up until now. It’s going to be tough, but I’m looking forward to it. Onwards and upwards!