100 Days of SwiftUI – Day 19 – Challenge Day #1

It’s day 19 of the 100 Days of SwiftUI. Yesterday, we reviewed our WeSplit project and added some code of our own to solidify what we’ve learned. Today, we arrived at our very first challenge day, where we have to develop an app from scratch, without any help or new learning material.

Challenge day 1 in SwiftUI

The challenge was to create a unit conversion app. I chose to convert temperatures, meaning I had to deal with Celsius, Fahrenheit and Kelvin conversions. There were various difficulties, but let’s take a look at it step by step.

Which variables where needed?

The first question I asked myself was which variables would be needed. I was a bit indecisive, as I wasn’t sure how I would do the calculations for the conversions. After trying a lot of various variables, I ended with 3: one for the input from the user, one to register the selection of the initial temperature unit and one for the conversion unit.

@State private var temperatureInput = 25.0
    
let tempUnitInput = ["Celsius", "Fahrenheit", "Kelvin"]
@State private var selectedInput = "Celsius"
    
let tempUnitOutput = ["Celsius", "Fahrenheit", "Kelvin"]
@State private var selectedOutput = "Fahrenheit"

Building the layout

Since I still wasn’t sure how I could best handle the calculations, I focused on creating the necessary views first. That was quite straightforward.

var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker("Select unit", selection: $selectedInput) {
                        ForEach(tempUnitInput, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(.segmented)
                } header: {
                    Text("Choose your temperature unit")
                }
                
                Section {
                    TextField("Enter the temperature", value: $temperatureInput, format: .number)
                        .keyboardType(.decimalPad)
                        .focused($inputIsFocused)
                } header: {
                    Text("Temperature in \(selectedInput)")
                }
                
                Section {
                    Picker("Select unit to convert to", selection: $selectedOutput) {
                        ForEach(tempUnitOutput, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(.segmented)
                } header: {
                    Text("Choose your conversion unit")
                }
                
                Section {
                    Text(tempConverter(), format: .number)
                } header: {
                Text("Temperature in \(selectedOutput)")
                }
            }
            .navigationTitle("Temp Conversion")
            .toolbar{
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    
                    Button("Done") {
                        inputIsFocused = false
                    }
                }
            }
        }
    }
}

Calculations for the unit conversion

I ended up manually doing the conversion, as I couldn’t think of a better way to properly implement them otherwise. This resulted in quite a few if and else if statements. Not ideal, but they did do the job splendidly!

func tempConverter() -> Double {
        var output: Double
        if selectedInput == "Celsius" && selectedOutput == "Fahrenheit" {
            output = (temperatureInput * 9/5) + 32
            return output
        } else if selectedInput == "Celsius" && selectedOutput == "Kelvin" {
            output = (temperatureInput + 273.15)
            return output
        } else if selectedInput == "Fahrenheit" && selectedOutput == "Celsius" {
            output = (temperatureInput - 32) * 5/9
            return output
        } else if selectedInput == "Fahrenheit" && selectedOutput == "Kelvin" {
            output = (temperatureInput - 32) * 5/9 + 273.15
            return output
        } else if selectedInput == "Kelvin" && selectedOutput == "Celsius" {
            output = (temperatureInput - 273.15)
            return output
        } else if selectedInput == "Kelvin" && selectedOutput == "Fahrenheit" {
            output = (temperatureInput - 273.15) * 9/5 + 32
            return output
        } else {
            return temperatureInput
        }
    }

I later found out that Swift also features a built in way to convert temperatures as well as many other units. I will check that out and either update this post or create a new one if I manage to figure out how to implement it.

That was it for day 19 though! Tomorrow, we’ll start our second project. Time to recharge and get ready. Onwards we go!