100 Days of SwiftUI

Day 24

2026-05-12

Project 3, part 2

Wrap up and review of views and modifiers.

“SwiftUI uses some View a lot.”

Quiz: Views and Modifiers — 12/12 💪

Challenges

1. Go back to project 1 and use a conditional modifier to change the total amount text view to red if the user selects a 0% tip.

This is one line: .foregroundColor(tipPercentage == 0 ? .red : .primary) I put it on the whole section so the section title is also red.

2. Go back to project 2 and replace the Image view used for flags with a new FlagImage() view that renders one flag image using the specific set of modifiers we had.

This one was more involved because I needed to find the right type to go with Image() It didn’t like Int or ImageResource — String is the one that got the error-checker to shut up.

First I made the struct before the ContentView struct

struct FlagImage: View {
    var flag: String
    
    var body: some View {
        Image(flag)
            .clipShape(.rect(cornerRadius:10))
            .shadow(radius:5)
    }
}

And then I changed the line on the Button

Button {
      flagTapped(number)
  } label: {
      FlagImage(flag: countries[number])
  }

3. Create a custom ViewModifier (and accompanying View extension) that makes a view have a large, blue font suitable for prominent titles in a view.

This was pretty straightforward. I added the struct and extension before the ContentView and then called .modifier(Headlines()) and .headlines() and got the same result. And yes, they stack.

struct Headlines: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.indigo)
            .padding(20)
    }
}

extension View {
    func headlines() -> some View {
        modifier(Headlines())
    }
}