Developing a To-Do List App with TypeScript
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 -y3. Install TypeScript
Install TypeScript, which will be the foundation of our To-Do List app:
npm install typescript --save-dev4. 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:
tscOpen 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.