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-Manager-typescript — Task Management App

Task 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
1. The container div holds all elements, including an input field, a button, and a task list.
2. Tasks will dynamically populate the task-list div.
CSS Styling
1. Provides a modern, centered design with a dark background and contrasting light content.
2. 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>

Moment.js using with Typescript

sneha2dmo

Improve

Article Tags :