Create Simple Interest Calculator with Swift UI

Hello, Today creating a Simple Calculator APP with SwiftUI, Xcode 12.

Swift UI creates a responsive UI which allows all control adjusts itself with different IOS devices.

Prerequisite for using SwiftUI is dev needs xCode 11.3+ and apps develop with SwiftUI will run on IOS device with OS version > 13.

Lets get started and create a new iOS->App

Step 1:

Step 2: Select App (iOS) and Click Next.

Navigate File -> New -> Project to select App.

Step 3: Add Project details and click Next.

Step 4: Save project.

Step 5: Congratulations! we just created the project having view with text “Hello World”. As you see below left panel has “SimpleIntetrestCalc” Project, middle panel has ContentView.swift code and next panel display preview.

Note: If preview panel not displayed then navigate and select Editor -> Canvas.

Step 6: Let’s add UI elements

• Header, Result Section, Three text boxes and Submit button.
• Create state variables to save user inputs. This will allow to store user input and used to calculate result.

import SwiftUI
struct ContentView: View {
    @State var intrest=""
    @State var time = ""
    @State var principal = ""
    @State var result="0.00"
    
    var body: some View {
        
        VStack{
            VStack{
                Text("Simple Interest Calculator!").font(.title).bold().padding()
                
                HStack{
                    Text("Result : ").font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/).bold()
                    Image("icons8-us-dollar-64")
                    Text(result).font(.title).bold()
                    .background(Color.white)
                    .foregroundColor(.green)
                   
                } .frame(alignment: .center)
            }
        
            VStack {
                TextField("Principal Amount($0.00)", text: $principal)
                        .padding()
                        .keyboardType(.decimalPad)
                        .background(LinearGradient(gradient: Gradient(colors: [Color.white, Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing))
                        .cornerRadius(5)
                        .shadow(color: .gray, radius: 8).padding()
                
                TextField("Rate(%)", text: $intrest)
                    .padding()
                    .keyboardType(.decimalPad)
                    .background(LinearGradient(gradient: Gradient(colors: [Color.white, Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing))
                    .cornerRadius(5)
                    .shadow(color: .gray, radius: 8).padding()
                    
                TextField("Time(Years)", text: $time)
                    .padding()
                    .keyboardType(.decimalPad)
                    .background(LinearGradient(gradient: Gradient(colors: [Color.white, Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing))
                    .cornerRadius(5)
                    .shadow(color: .gray, radius: 8).padding()
                    
            }
            VStack{
                HStack{
                    Button(action: Calculate) {
                        Text("Calculate!" ).font(.title).padding()
                        .frame(width: 160, height: 55, alignment: .center)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .clipShape(Capsule())
                    }
                    Button(action: Reset) {
                        Text("Reset!" ).font(.title).padding()
                        .frame(width: 160, height: 55, alignment:    .center)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .clipShape(Capsule())
                    }
                }
            }
            Spacer()
        }
        
    }
    
    func Calculate() {
        let timeData = Float(time) ?? 0.0
        let intrestData = Float(intrest) ?? 0.0
        let principalData = Float(principal) ?? 0.0
        
        let resultData =  principalData * ( 1 + ((timeData/100) * intrestData))
        result = String(format: "%.2f", resultData)
    }
func Reset() {
        principal = ""
        time = ""
        intrest=""
        result = String(format: "%.2f", 0.0)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Step 7: HStack arranges UI elements horizontally and VStack vertically. Enter Principal amount, rate and year to calculate simple Interest. Reset button to reset input.

Thanks for reading. Ask questions if anything missed here.

Source code in Github Repository.

Happy a good day!!!