Counter Example - Blazor Typing CST Test

Counter Example — Blazor Code

Demonstrates a simple counter component using Blazor WebAssembly with Razor syntax and C# for interactivity.

@page "/counter"
<h3>Counter</h3>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">+</button>
<button class="btn btn-danger" @onclick="DecrementCount">-</button>
<button class="btn btn-secondary" @onclick="ResetCount">Reset</button>
<button class="btn btn-warning" @onclick="ToggleTheme">Switch Theme</button>

@code {
	private int currentCount = 0
	private bool isDark = false

	private void IncrementCount() => currentCount++
	private void DecrementCount() => currentCount--
	private void ResetCount() => currentCount = 0

	private void ToggleTheme() {
		isDark = !isDark
		var body = document.body
		if (isDark) body.classList.add("dark-theme")
		else body.classList.remove("dark-theme")
	}
}

Blazor Language Guide

Blazor is a Microsoft framework for building interactive web applications using C# and .NET, running client-side via WebAssembly or server-side via SignalR.

More Blazor Typing Exercises

Practice Other Languages