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.