Open In App

Task Management App Using TypeScript

Last Updated : 22 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

  1. 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.
  2. 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>

Next Article
Task Management App Using TypeScript

S
sneha2dmo
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox