30 Days of SwiftUI - Day 12: Practical Challenges with SwiftUI

🚀 Time to Test Your Skills!

Today, we'll dive into hands-on practical tests based on everything you’ve learned in Day 11. These tests are designed to challenge your understanding of SwiftUI fundamentals. Each task includes a detailed solution to help reinforce key concepts.

---

🧠 Test 1: Interactive Form with Dynamic Results

Challenge: Create a SwiftUI form that:

• Takes the user's name and age as input.

• Displays a greeting that changes dynamically based on the age entered.

• Provides a button to clear the fields.

SwiftUI Code Answer:

Output: ✅ Dynamically shows a greeting based on the age entered.

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var name = ""
    @State private var age = ""

    var greeting: String {
        let ageInt = Int(age) ?? 0
        return ageInt >= 18 
            ? "✅ Welcome, \(name)! You are an adult." 
            : "✅ Hey \(name)! You're still a minor."
    }

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            TextField("Enter your age", text: $age)
                .keyboardType(.numberPad)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Text(greeting)
                .font(.headline)
                .padding()

            Button("Clear") {
                name = ""
                age = ""
            }
            .foregroundColor(.red)
            .padding()
        }
        .padding()
    }
}

🔎 Explanation

✅ Accepts name and age as input.
✅ Displays a dynamic greeting based on the entered age.
✅ Includes a Clear button to reset fields.

---

🧠 Test 2: Tip Calculator with Segmented Control

Challenge: Build a tip calculator that:

• Accepts a bill amount from the user.

• Offers tip percentages of 10%, 15%, and 20% via a segmented control.

• Displays the total amount including the tip.

SwiftUI Code Answer:

Output: ✅ Displays total amount dynamically based on the chosen tip percentage.

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            TipCalculatorView()
        }
    }
}

struct TipCalculatorView: View {
    @State private var billAmount = ""
    @State private var tipPercentage = 15

    let tipOptions = [10, 15, 20]

    var totalAmount: Double {
        let bill = Double(billAmount) ?? 0
        return bill + (bill * Double(tipPercentage) / 100)
    }

    var body: some View {
        Form {
            TextField("Enter bill amount", text: $billAmount)
                .keyboardType(.decimalPad)

            Picker("Tip Percentage", selection: $tipPercentage) {
                ForEach(tipOptions, id: \.self) { tip in
                    Text("\(tip)%")
                }
            }
            .pickerStyle(SegmentedPickerStyle())

            Text("✅ Total Amount: $\(totalAmount, specifier: "%.2f")")
                .font(.headline)
        }
        .padding()
    }
}

🔎 Explanation

✅ TextField accepts the bill amount as input.
✅ Picker displays tip options with 10%, 15%, and 20%.
✅ totalAmount dynamically calculates the final total using the chosen tip percentage.
✅ The output is formatted to display two decimal points for currency formatting.

---

🧠 Test 3: Dynamic List with Search Filter

Challenge: Create a SwiftUI list that:

• Displays a list of fruit names.

• Allows the user to filter the list with a TextField.

SwiftUI Code Answer:

Output: ✅ Displays filtered results based on the user’s search text.

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            FruitListView()
        }
    }
}

struct FruitListView: View {
    @State private var searchText = ""
    let fruits = ["Apple", "Banana", "Cherry", "Mango", "Orange", "Pineapple"]

    var filteredFruits: [String] {
        searchText.isEmpty ? fruits : fruits.filter { 
            $0.localizedCaseInsensitiveContains(searchText) 
        }
    }

    var body: some View {
        VStack {
            TextField("Search Fruits", text: $searchText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            List(filteredFruits, id: \.self) { fruit in
                Text("✅ \(fruit)")
            }
        }
        .padding()
    }
}

🔎 Explanation

✅ TextField allows the user to enter search text.
✅ filteredFruits dynamically filters the fruit list based on the search input.
✅ List displays the filtered results with a ✅ emoji for clarity.

---

🔥 Conclusion

These practical tasks test your understanding of SwiftUI concepts like: ✅ Dynamic Text Rendering ✅ State Management with @State ✅ Creating Forms and Using Controls ✅ Building Search Filters for Dynamic UI Updates

Keep practicing and experimenting with these challenges to enhance your SwiftUI expertise! 🚀

Follow me on Linkedin: igatitech 🚀🚀🚀