ToDo App

This tutorial will guide you through creating a basic ToDo app. The app will add tasks, mark them as done, and filter them by status. We will build it three times: once with structured programming, once with functional programming, and once with object-oriented programming.

Structured programming uses loops and conditional statements to organize code. Procedural programming, an extension of structured programming, organizes code around functions. We will start with structured and procedural programming, focusing on writing clean code.

Next, we will use functional programming, which promotes a declarative style of coding and treats functions as first-class citizens. We will apply functional programming concepts like higher-order functions and closures to recreate the ToDo app. The ToDo app does not need functional programming, but rewriting it this way shows how functional programming works in JavaScript.

Lastly, we will use object-oriented programming, which organizes code around objects that contain data and behavior. We will create classes and use object-oriented programming concepts to rewrite the code. The ToDo app does not need object-oriented programming either, but rewriting it this way shows how object-oriented programming works in JavaScript.

Getting Started

Go to the basic-todo-app repository and click “Use this template” → “Create a new repository” to create your own copy. Name your repository basic-todo-app (or any name you prefer).

Clone your repository to your computer:

git clone <your-repo-url> basic-todo-app
cd basic-todo-app
code .

The template is a minimal starting point. It has a README, a .gitignore file, and a favicon image. In the first few sections, you will learn how to set up a complete development environment from scratch using Vite, Tailwind CSS, and Prettier.

If you get stuck at any point, you can view the complete solutions on the original repository:

• master-sp branch — Structured Programming solution (sections 01-09)
• master-fp branch — Functional Programming solution (sections 01-14)
• master-oop branch — Object-Oriented Programming solution (sections 01-06, 15-19)

Learning Outcomes

• Set up, configure, and deploy a front-end project with Vite, Tailwind CSS, and Prettier
• Build a semantic, accessible, and styled HTML layout for a web app
• Implement application state and DOM rendering using structured and procedural programming
• Refactor a codebase into a functional programming style using higher-order functions, closures, and immutable data
• Refactor a codebase into an object-oriented programming style using classes, encapsulation, and modules
• Compare structured, functional, and object-oriented approaches to building the same application

Sections

1. Setting Up the Project
2. Configuring the Development Environment
3. Deploying the Application
4. Creating the Layout and Styling
5. Building the Main Components
6. Completing the Layout
7. Structured Programming
8. Filtering Todos
9. Completing Todos
10. Functional Programming
11. Filtering and Immutability
12. State Management Patterns
13. Completing the Functional Implementation
14. Adding More Features
15. Object-Oriented Programming
16. Encapsulation and Private Fields
17. Static Members and Modules
18. Building the TodoList Class
19. Building the TodoApp Class
20. Practice Questions