Developing a To-Do List App with TypeScript


Introduction

In this guide, we'll develop a basic To-Do List application using TypeScript. While this example is simplified and lacks advanced features, it serves as a starting point for understanding how to structure and build a web application.


Features

Our simple To-Do List app will include the following features:

  • Task Creation: Users can add new tasks to the list.
  • Task Display: The list of tasks is displayed on the page.
  • Task Completion: Users can mark tasks as completed.
  • Task Deletion: Users can delete tasks from the list.

Setting Up the Project

To create our To-Do List app, follow these steps:


1. Create a Project Folder

Create a folder for your project and open it in your code editor. You can name the folder as per your preference.


2. Initialize a Node.js Project

Open your terminal or command prompt, navigate to your project folder, and run the following command to create a package.json file for your project:

npm init -y

3. Install TypeScript

Install TypeScript, which will be the foundation of our To-Do List app:

npm install typescript --save-dev

4. Configure TypeScript

Create a tsconfig.json file in your project folder and configure it for TypeScript:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*.ts"
  ]
}

Creating the To-Do List App

We'll structure our To-Do List app with three main components: HTML, TypeScript, and CSS. Here's a simplified code example:


1. Create TypeScript Files

Create the following TypeScript files in your project's src folder:


app.ts:

// TypeScript code (app.ts)
const inputTask = document.getElementById('inputTask') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
  const taskText = inputTask.value.trim();
  if (taskText === '') return;
  const taskElement = document.createElement('li');
  taskElement.textContent = taskText;
  taskElement.classList.add('task');
  taskElement.addEventListener('click', () => {
    taskElement.classList.toggle('completed');
  });
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.classList.add('delete-button');
  deleteButton.addEventListener('click', () => {
    taskElement.remove();
  });
  taskElement.appendChild(deleteButton);
  taskList.appendChild(taskElement);
  inputTask.value = '';
});

2. Create HTML and CSS Files

Create an HTML file (index.html) and a CSS file (styles.css) in your project's root folder:


index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input id="inputTask" type="text" placeholder="Enter a new task">
        <button id="addTaskButton">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="./dist/app.js"></script>
</body>
</html>

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  text-align: center;
}
.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
h1 {
  color: #007acc;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}
button {
  background-color: #007acc;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
}
.task {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
.completed {
  text-decoration: line-through;
  color: #ccc;
}
.delete-button {
  background-color: #ff4136;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
}

3. Run the Application

Open your terminal and run the TypeScript compiler to transpile your TypeScript code:

tsc

Open the index.html file in your web browser. You can add, complete, and delete tasks in your To-Do List app.


Conclusion

Creating a To-Do List app is a great way to learn the basics of web development with TypeScript. This simplified example serves as a foundation for building more complex applications. You can expand and enhance your To-Do List app with additional features, database integration, and user authentication as you continue to explore TypeScript and web development.