Building a Countdown Timer in C# Blazor: A Step-by-Step Guide

 To create a countdown timer in C# Blazor, you can follow these steps:

1. Create a new Blazor component. Let's call it CountdownTimer.razor.

2. Define the necessary properties and fields in the component:

@using System.Timers

<h3>Countdown Timer</h3>

<p>Time remaining: @timeRemaining</p>

@code {
    private Timer timer;
    private int totalTime = 60; // Total time in seconds
    private int currentTime;
    private string timeRemaining;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        currentTime = totalTime;
        timeRemaining = FormatTime(currentTime);

        timer = new Timer(1000); // Timer ticks every 1 second
        timer.Elapsed += TimerElapsed;
        timer.Enabled = true;
    }

    private void TimerElapsed(object sender, ElapsedEventArgs e)
    {
        currentTime--;

        if (currentTime >= 0)
        {
            timeRemaining = FormatTime(currentTime);
            InvokeAsync(StateHasChanged);
        }
        else
        {
            timer.Stop();
        }
    }

    private string FormatTime(int timeInSeconds)
    {
        TimeSpan timeSpan = TimeSpan.FromSeconds(timeInSeconds);
        return timeSpan.ToString(@"mm\:ss");
    }
}

3. Add the CountdownTimer component to your Blazor page or another component where you want to display the countdown timer:

@page "/"

<CountdownTimer />

In this example, the countdown timer starts from 60 seconds and updates every second. The OnInitialized method sets up the timer, and the TimerElapsed event handler is triggered every second to update the remaining time. The FormatTime method formats the remaining time in minutes and seconds (mm:ss).

You can adjust the totalTime variable to set the desired countdown duration.