Building a Tap Counter
Update state on tap and watch the UI refresh.
Building a Tap Counter is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Goal: A Live Counter
Let's build a button that counts your taps and shows the total on screen. It is the classic first taste of reactive state. 👆
Start with State
Begin with a single @State property to hold the running total. We name it count and start it at zero.
@State private var count = 0Show the Count
Display the value with a Text view. Using string interpolation, the label always mirrors the current count.
Text("Taps: \(count)")Add the Button
Place a Button whose action increases the count by one. The closure runs each time you tap it.
Button("Tap me") {
count += 1
}Stack Them Together
Group the label and button in a VStack so they sit neatly one above the other. Now you have a complete tiny screen.
VStack {
Text("Taps: \(count)")
Button("Tap me") { count += 1 }
}Watch the Loop
Tap, count changes, SwiftUI re-runs body, the Text updates. This tight cycle is the heart of every reactive SwiftUI screen.
The Full View
Here is everything wired together: state, a label, and a button living inside one view.
struct CounterView: View {
@State private var count = 0
var body: some View {
VStack {
Text("Taps: \(count)")
Button("Tap me") { count += 1 }
}
}
}Add a Reset
A second button can set count back to zero. Resetting state is just another assignment, and the UI follows instantly.
Button("Reset") { count = 0 }Format the Label
You can pluralize or style the text based on count. The label is a function of state, so any logic you add stays in sync.
Text(count == 1 ? "1 tap" : "\(count) taps")Decrement Too
Add a minus button to count down. Just remember to keep the value sensible, for example never letting it drop below zero.
Button("-") { if count > 0 { count -= 1 } }No Manual Refresh
Notice you never call any refresh method. Changing count is all it takes; SwiftUI handles the redraw for you every single time.
Quick Check
In the tap counter, what makes the Text update after a tap?
Recap
You built a tap counter with one @State value, a Text that reads it, and a Button that mutates it. Change the data and the UI updates itself. 🎉
Frequently asked questions
Is the “Building a Tap Counter” lesson free?
Yes — the full text of “Building a Tap Counter” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a Tap Counter”?
Update state on tap and watch the UI refresh. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Tap Counter” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Why Views Need State
- Declaring @State Properties
- Building a Tap Counter
- Toggling Visibility with State