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
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
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’re
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
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
How to Use MathJS with TypeScript? Math.js library can be use with TypeScript to handle various mathematical tasks while getting the benefits of TypeScript’s type safety and autocompletion. Integrating Math.js into your TypeScript project allows you to perform arithmetic, algebra, statistics, and more, with the added advantage of Typ
3 min read
How to Use NextJS in Typescript? TypeScript enhances Next.js applications by adding static type checking and improves developer experience through type safety. Integrating TypeScript into your Next.js project helps catch errors early and improves code maintainability. It offers even greater productivity and robustness to your web d
5 min read
How to execute TypeScript file using command line? TypeScript is a statically-typed superset of JavaScript that adds optional type annotations and compiles to plain JavaScript. It helps catch errors during development. To execute a TypeScript file from the command line, compile it using tsc filename.ts, then run the output JavaScript file with node.
2 min read
How to use TypeScript with React? TypeScript enhances JavaScript by adding strict type definitions, making your code more robust and maintainable. ReactJS, a popular library for building user interfaces, pairs excellently with TypeScript to create clean, efficient, and scalable codebases. Combining TypeScript with React offers a pow
3 min read
Task Management System using Node and Express.js Task Management System is one of the most important tools when you want to organize your tasks. NodeJS and ExpressJS are used in this article to create a REST API for performing all CRUD operations on task. It has two models User and Task. ReactJS and Tailwind CSS are used to create a frontend inter
15+ min read
Getting Started with TypeScript TypeScript is an open-source programming language developed by Microsoft that extends JavaScript by adding optional static typing to the language. It aims to make JavaScript development more scalable and maintainable, especially for large-scale projects. TypeScript code is transpiled into JavaScript
4 min read