Task Management App Using TypeScript
Last Updated :
22 Jan, 2025
Task management apps help users organize their daily activities effectively. In this article, we will create a simple task management app that allows users to add and delete tasks. We’ll use HTML for structure, CSS for styling, and TypeScript for functionality to make it robust and type-safe.
What We’re Going to Create
We will build a task management app with the following features:
- Add tasks with a description.
- Delete tasks.
- Store tasks in localStorage for persistence.
- Maintain a clean and user-friendly interface.
Project Preview
Task Management AppTask Management App- HTML and CSS Setup
The following code creates the structure and style for the app. It includes an input field for adding tasks, a button to submit them, and a container for displaying the task list.
HTML
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
}
input[type="text"] {
width: calc(100% - 100px);
padding: 0.8rem;
border-radius: 8px;
border: none;
outline: none;
font-size: 1rem;
margin-right: 1rem;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
button {
box-sizing: border-box;
padding: 0.8rem 1rem;
border-radius: 8px;
border: none;
background: #ff6b6b;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
height: 43px;
padding-top: 13px;
display: flex;
gap: 5px;
}
button:hover {
background: #ff4757;
}
.todo {
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, background 0.3s;
}
.todo:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.3);
}
.task {
flex: 1;
font-size: 1rem;
}
.delete {
cursor: pointer;
transition: transform 0.2s, color 0.3s;
}
.delete:hover {
transform: scale(1.1);
color: #ff4757;
}
svg {
fill: currentColor;
}
#header {
position: relative;
left: 20px;
}
#mains {
width: 100%;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1 id="header">Task Management App</h1>
<div id="mains">
<input type="text" placeholder="Enter a new task">
<button><span>Add</span> <span>Task</span></button>
</div>
<div id="task-list"></div>
</div>
<script src ="index.js"></script>
</body>
</html>
Explanation of the Code
- HTML Structure
- The container div holds all elements, including an input field, a button, and a task list.
- Tasks will dynamically populate the task-list div.
- CSS Styling
- Provides a modern, centered design with a dark background and contrasting light content.
- The .todo class styles individual task items with hover effects.
Task Management App- Typescript Logic
The TypeScript code handles the app's functionality, such as adding, deleting, and persisting tasks. It is structured with type safety and reusable functions.
JavaScript
interface Task {
id: number;
text: string;
}
const inputs = document.querySelector('input') as HTMLInputElement;
const btn = document.querySelector('button') as HTMLButtonElement;
const taskList = document.getElementById('task-list') as HTMLElement;
let task: Task[] = [];
// Check if there is any task data in localStorage
const localstoragedata = localStorage.getItem("task array");
if (localstoragedata !== null) {
const ogdata: Task[] = JSON.parse(localstoragedata);
task = ogdata;
maketodo();
}
btn.addEventListener("click", function () {
const query = inputs.value;
inputs.value = "";
if (query.trim() === "") {
alert("no value entered");
throw new Error("empty input field error");
}
// Create a task object
const taskObj: Task = {
id: Date.now(),
text: query
};
// Add the new task to the array
task.push(taskObj);
localStorage.setItem("task array", JSON.stringify(task));
maketodo();
});
function maketodo(): void {
taskList.innerHTML = "";
// Iterate over each task and create the UI elements
for (let i = 0; i < task.length; i++) {
const { id, text } = task[i];
const element = document.createElement('div');
element.innerHTML = `
<span class="task">${text}</span>
<span class="delete">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M17 6H22V8H20V21C20 21.5523
19.5523 22 19 22H5C4.44772 22 4 21.5523
4 21V8H2V6H7V3C7 2.44772 7.44772 2 8
2H16C16.5523 2 17 2.44772 17 3V6ZM18
8H6V20H18V8ZM13.4142 13.9997L15.182
15.7675L13.7678 17.1817L12 15.4139L10.2322
17.1817L8.81802 15.7675L10.5858 13.9997L8.81802
12.232L10.2322 10.8178L12 12.5855L13.7678
10.8178L15.182 12.232L13.4142 13.9997ZM9
4V6H15V4H9Z"></path>
</svg>
</span>
`;
// Handle the delete button click event
const delbtn = element.querySelector('.delete')!;
delbtn.addEventListener("click", function () {
// Remove the task from the array based on its ID
const filteredarray = task.filter((taskobj: Task) => taskobj.id !== id);
task = filteredarray;
localStorage.setItem("task array", JSON.stringify(task));
taskList.removeChild(element);
});
element.classList.add('todo');
taskList.appendChild(element);
}
}
In this example
- Task Interface: Defines task structure (id and text).
- Element Selection: Selects input, button, and task list with type assertions.
- Load Tasks: Retrieves tasks from localStorage and displays them on page load.
- Add Task: On button click, adds a new task to the list and localStorage.
- Render Tasks: Displays tasks in the UI, with a delete button for each task.
- Delete Task: Removes tasks from the list and localStorage when the delete button is clicked.
- Persistence: Saves tasks in localStorage for persistence across page refreshes.
Convert to JavaScript File
Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-
npx tsc task.ts
tsc task.ts
- The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
- It places the output in the same directory as the input file by default.
Complete Code
HTML
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
}
input[type="text"] {
width: calc(100% - 100px);
padding: 0.8rem;
border-radius: 8px;
border: none;
outline: none;
font-size: 1rem;
margin-right: 1rem;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
button {
box-sizing: border-box;
padding: 0.8rem 1rem;
border-radius: 8px;
border: none;
background: #ff6b6b;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
height: 43px;
padding-top: 13px;
display: flex;
gap: 5px;
}
button:hover {
background: #ff4757;
}
.todo {
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, background 0.3s;
}
.todo:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.3);
}
.task {
flex: 1;
font-size: 1rem;
}
.delete {
cursor: pointer;
transition: transform 0.2s, color 0.3s;
}
.delete:hover {
transform: scale(1.1);
color: #ff4757;
}
svg {
fill: currentColor;
}
#header {
position: relative;
left: 20px;
}
#mains {
width: 100%;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1 id="header">Task Management App</h1>
<div id="mains">
<input type="text" placeholder="Enter a new task">
<button><span>Add</span> <span>Task</span></button>
</div>
<div id="task-list"></div>
</div>
<script>
var inputs = document.querySelector('input');
var btn = document.querySelector('button');
var taskList = document.getElementById('task-list');
var task = [];
var localstoragedata = localStorage.getItem("task array");
if (localstoragedata !== null) {
var ogdata = JSON.parse(localstoragedata);
task = ogdata;
maketodo();
}
btn.addEventListener("click", function () {
var query = inputs.value;
inputs.value = "";
if (query.trim() === "") {
alert("no value entered");
throw new Error("empty input field error");
}
var taskObj = {
id: Date.now(),
text: query
};
task.push(taskObj);
localStorage.setItem("task array", JSON.stringify(task));
maketodo();
});
function maketodo() {
taskList.innerHTML = "";
for (var i = 0; i < task.length; i++) {
var _a = task[i], id = _a.id, text = _a.text;
var element = document.createElement('div');
element.innerHTML = "\n <span class=\"task\">".concat(text, "</span>\n <span class=\"delete\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z\"></path>\n </svg>\n </span>\n ");
// Handle the delete button click event
var delbtn = element.querySelector('.delete');
delbtn.addEventListener("click", function () {
// Remove the task from the array based on its ID
var filteredarray = task.filter(function (taskobj) { return taskobj.id !== id; });
task = filteredarray;
localStorage.setItem("task array", JSON.stringify(task));
taskList.removeChild(element);
});
element.classList.add('todo');
taskList.appendChild(element);
}
}
</script>
</body>
</html>
Similar Reads
Contact Management System Using TypeScript
The Contact Book App in TypeScript aims to create an organized system for managing and storing contact information. This tool allows users to add, edit, and delete contacts, ensuring easy access to personal details while providing a streamlined and user-friendly experience for managing contacts effe
7 min read
Task Manager App using MERN Stack
Task Manager is very crucial to manage your tasks. In this article, we are going to develop a task manager application using the MERN stack. This application helps users to manage their tasks efficiently, offering essential features like creating new tasks, editing existing ones, and deleting tasks
10 min read
Calculator App Using TypeScript
A calculator app is a perfect project for practising TypeScript along with HTML and CSS. This app will have basic functionalities like addition, subtraction, multiplication, and division. It provides a clean and interactive interface for the user while using TypeScript to handle logic safely and eff
6 min read
Quiz App Using Typescript
A quiz app built with TypeScript provides an interactive way to test knowledge while using TypeScript’s strong typing for better code quality. By implementing features like multiple-choice questions, score tracking, and timers, we can create a robust and engaging quiz experience for users. What We’r
7 min read
Moment.js using with Typescript
In this article, we will learn how to use the Moment.js library with Typescript language. Typescript is a strongly-typed programming language that wraps JavaScript and gives it optional static typing. It is free and open source and is maintained by Microsoft. Using Moment.js with Typescript: To use
1 min read
Appointment Management System using React
The Appointment Management System is a web application that allows users to schedule, manage, and view appointments. It provides an easy-to-use interface for clients to book and keep track of appointments. Below is a simplified outline for creating an Appointment Management System using React JS. Pr
5 min read
Typing Speed Detector App Using Typescript
Typing speed has been a very important test for Engineers as a faster typing skill leads to faster code so, To test this speed we are building a typing speed detector. What We’re Going to CreateAn Input Box for Typing Our Text.A Time Element to show the time.An Element to show Words per minute.A sta
5 min read
Tic Tac Toe Game Using Typescript
In this tutorial, We are going to create an interactive tic-tac-toe game in which two users can play against each other and the winner will be displayed to the winning user. What We’re Going to CreateWe’ll build a Tic Tac Toe game focusing on event handling, DOM manipulation, and core game logic con
6 min read
Build a Task Management App using Next JS
A Task management app is a useful web application that assists in efficiently organizing and managing tasks. It provides various functionalities such as creating tasks, assigning prioritieÂs and deadlines, marking complete tasks, and enabling task search based on keÂywords and priorities. Preview of
5 min read
Build a Project Management Tool Using NextJS
A project management tool is very crucial for organizing tasks which helps us to be productive. In this article, we will guide you through the process of building a simple project management tool using Next.js, a powerful React framework that allows you to build server-rendered React applications wi
6 min read