Angular

DESCRIPTION

Many people have a lot of responsibilities in their day-to-day lives and usually feel overwhelmed if it is not represented in a simple, organized structure. This website helps people sort their daily tasks into a to-do list of their own.

TECHNICAL BREAKDOWN

Adding and Removing Tasks

An empty list that will be used to store all tasks was declared and initalized inside of the component class. New tasks are entered into the list through a function call using the information provided by the user (i.e task title, task description). Tasks are removed by simply clicking on a trash can icon. In both cases, Angular would then update the to-do list to display the new set of tasks.

tasks.component.ts

public addTask(taskName: string, taskDescription: string) {
    var newTask = new Task(taskName, taskDescription);
    this.taskList.push(newTask);
}

public removeTask(taskTitle: string) {
    for (var i = 0; i < this.taskList.length; i++) {
        if (this.taskList[i].title == taskTitle) {
            this.taskList.splice(i, 1);
        }
    }
}

Task Completion

A task is completed when the user clicks on a checkmark icon. This will trigger a call to a function that sets the completed property of the task to true.

tasks.component.ts

public taskCompleted(t: Task) {
    t.completed = true;
}

The background color of the task will also change to light green and the task itself will be moved to the bottom of the list. The filtering of tasks (i.e whether it is completed or not) is done through the use of Angular directives.

tasks.component.html

<ul class="completed-list">
    <div *ngFor="let task of taskList">
        <li *ngIf="task.completed">
            <div>
                <h4>{{task.title}}</h4>
            </div>
            <p>{{task.description}}</p>
        </li>
    </div>
</ul>

The ngFor directive iterates through the entire list of tasks and the ngIf checks the value of the completed property for each task. If it is true, then the task is displayed on the completed list.

Importing Tasks

An additional feature of the to-do app to make task entry easier. Users can drag and drop a JSON file containing a set of tasks with their properties defined (i.e title, description, completed) into a target area. The target area has event listeners attached to it (dragover and drop) that will execute a specific function whenever the event occurs.

tasks.component.html

<div class="file-drop">
    <h5>Drop File</h5>
    <div class="drop-target" (dragover)="dragOverHandler($event)" (drop)="dropHandler($event)">
</div>

tasks.component.ts

public dragOverHandler(e: DragEvent) {
    e.preventDefault();
}

public dropHandler(e: DragEvent) {
    e.preventDefault();

    var file = e.dataTransfer.files[0];

    /* Read the contents of the file */
    var fr = new FileReader();

    fr.readAsText(file);

    fr.onload = () => {
        var listOfTasks = JSON.parse(fr.result as string).tasks;
        for (taskNo in listOfTasks) {
            var task = new Task(listOfTasks[taskNo].title, listOfTasks[taskNo].description);
            this.taskList.push(task);
        }
    }
}

DEMO