C# 10 with .NET 6 for Beginners (Part 2) - To-do Application

You'll learn how to download and install Visual Studio and create a GitHub repository four your code.

You'll learn how to clone a Git repository to your local computer.

You'll learn how to create a WebAssembly project for the to-do application. Most courses teach you through Console applications. My opinion is that you learn more through real-world scenarios.

We tour the files and folders of the initial WebAsembly project.

We add the HTML/Bootstrap textbox and button needed later when we add items to a list of to-dos. The button won't work until we add the necessary C# and Razor.

We'll add the HTML/Bootstrap unordered list needed to display the todos. To style a todo and the list, we add a static todo, which we later make dynamic with C# and Razor.

We add the Todo class and its properties, which represents one todo. The .NET Runtime uses the class to create Todo objects for each todo's data.

We add a List collection to an @code block on the Razor page, which holds all todos created with the HTML textbox and button added earlier.

We add a completed CSS class selector, which, when applied with Razor to a to-do list item, adds a strikethrough to the to-do description.

We add an @onchanged event connected to an update method to store the state of the checkbox.

To make the code less bloated, we create an Extension method to convert from the object data type to bool.

We implement a Delete method and connect it to each to-do's delete button through @onclick events. When clicked, the button removes the to-do from the Todos collection.

We add a null check around the HTML and Razor to ensure it's not rendered if the todos collection is null (has no object in memory.)

We connect the Add button to a method through an @onclick event to make it possible to add to-to items to the collection.

We refactor (modify) the application using encapsulation and separation of concerns by creating a new TodoFactoiry class for the code in the Razor page related to to-dos.

We remove all code related to to-dos from the Razor page and move it to the new TodoFactory class, making the collection private and the methods public adhering to the encapsulation rules.

We implement exception (error) handling with try/catch/finally to handle exceptions that might occur and debug the application by stepping through the methods.

We add the project files to source control and send them to a repository on GitHub. You usually do this when creating the solution to check in changes incrementally, but for this small beginner project, I didn't want to add that complexity while writing the code.