Creating a To-Do List with Fortis: A Step-by-Step Tutorial

In this tutorial, we will build a simple To-Do List application using Fortis. The resulting code will demonstrate the use of function components, class components, and how to handle user interactions. The final application will allow users to add items to their to-do list and mark them as completed.

Prerequisites

Before we begin, make sure you have Node.js installed on your system. We'll be using Vite for setting up the Fortis project. Here's how to get started:

Install Yarn globally using npm:
```
npm install -g yarn
```
Create a new project using Vite with the "vanilla-ts" template:
```
yarn create vite my-app --template vanilla-ts
cd my-app
```
Install Fortis using yarn:
```
yarn add fortis
```
In your new Vite project, delete the counter.ts file and the style.css file.
Rename main.ts to main.tsx.
Edit the index.html file so it looks like this:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Fortis Tutorial</title>
    </head>
    <body>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

Edit the tsc options in tsconfig.json so it looks like this:

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,
 
        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
 
        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        
        /* JSX */
        "jsx": "react",
        "jsxFactory": "f"
    },
    "include": ["src"]
}

With these changes, your project is ready for building the To-Do List application using Fortis. Let's proceed with breaking down the code step by step and explaining each part.

1. Importing Fortis Components

main.tsx

import {f, name, Component, FunctionComponent} from "fortis";

In this initial step, we import the necessary components and functions from the Fortis library. We use FunctionComponent for creating function components and Component for class components. The f is a pragma, which we've set in our configuration to use Fortis JSX syntax.

2. Creating a Function Component

main.tsx

const Item: FunctionComponent<{name: string}> = ({name}) => {
    const span = <span>{name}</span>;
 
    return (
        <li>
            {span}
            <input type="checkbox" value={name} onchange={() => span.classList.toggle("done")} />
        </li>
    );
};

Here, we define a function component called Item. This component takes a prop name, which represents the name of the to-do item. Inside the component, we create a <span> element to display the item name, and an <input> element with a checkbox to allow users to mark items as done.

When the checkbox's onchange event is triggered, we toggle the "done" class on the <span>. This class adds a line-through style to the text, indicating that the item is marked as done.

3. Creating a Class Component

main.tsx

@name("list")
class List extends Component({}) {
    static css = `
        .done {
            text-decoration: line-through;
        }
    `;
 
    ul = document.createElement("ul");
 
    render() {
        return (
            <div>
                {this.ul}
                <form onsubmit={e => {
                    e.preventDefault();
                    const data = new FormData(e.currentTarget);
                    const name = data.get("name") as string;
 
                    if (name) {
                        this.ul.append(<Item name={name} />);
                    }
 
                    e.currentTarget.reset();
                }}>
                    <input type="text" name="name" />
                    <button type="submit">Add</button>
                </form>
            </div>
        );
    }
}

In this part of the code, we create a class component called List. This component represents the main application, which includes the list of to-do items and the form for adding new items.

We use the @name decorator to specify the custom element name "list" for this class component. This is how it will be used in the final HTML.
Inside the List class, we define a static css property, which contains the styles for the "done" class. This class is applied to items marked as completed, giving them a line-through style.
We create a ul property, which is a reference to an unordered list (<ul>) element. This element will hold the to-do list items.
In the render method, we return a JSX structure that includes the ul element and a <form> element. The form has an onsubmit event handler that prevents the default form submission behavior.
When the form is submitted, we extract the item name from the form data, create a new <Item> element, passing the name as a prop, and append it to the ul. Finally, we reset the form to clear the input field.

4. Appending the List to the Body

main.tsx

document.body.append(<List />);

In the last part of the code, we append an instance of the List class component to the document.body. This is where our To-Do List application will be displayed.

Conclusion

With this Fortis To-Do List tutorial, you've learned how to create function and class components, handle user interactions, and use Fortis to build a simple web application. Fortis empowers you to combine the declarative power of JSX with imperative programming, allowing you to create interactive and engaging user interfaces. This example serves as a foundation for more complex applications, and you can expand upon it to add more features and functionality. Happy coding!

Limitations TypeScript