removed color options

src/app/models/task.ts

@@ -28,12 +28,6 @@ export class Task{
     public set startTime(value: number) {
         this._startTime = value;
     }
-    public get color(): string {
-        return this._color;
-    }
-    public set color(value: string) {
-        this._color = value;
-    }
     public get name(): string {
         return this._name;
     }

src/app/task-dialog/task-dialog.component.html

@@ -4,19 +4,6 @@ <h2 mat-dialog-title>Task Properties</h2>
   <mat-form-field>
     <input matInput placeholder="Task Name" formControlName="name" required>
   </mat-form-field>
-  <br>
-  <mat-form-field>
-    <select matNativeControl formControlName="color" required>
-      <option value="red">Red</option>
-      <option value="blue">Blue</option>
-      <option value="yellow">Yellow</option>
-      <option value="green">Green</option>
-      <option value="purple">Purple</option>
-      <option value="pink">Pink</option>
-      <option value="brown">Brown</option>
-      <option value="gray">Gray</option>
-    </select>
-  </mat-form-field>
 </mat-dialog-content>
 
 <mat-dialog-actions>

src/app/task-factory-service.ts

@@ -13,18 +13,17 @@ export class TaskFactoryService {
   }
 
   private verifyTaskOptions(options): boolean {
-    if (options.name && options.color) {
+    if (options.name) {
       return true;
     }
-    throw new Error('Invalid parameters provided for the task. Requires name and color');
+    throw new Error('Invalid parameters provided for the task. Requires name');
   }
 
   public createTask(options): Task {
     if (this.verifyTaskOptions(options)) {
       const task = new Task();
       task.id = this.generateId();
       task.name = options.name;
-      task.color = options.color;
       task.startTime = options.startTime;
       task.endTime = options.endTime;
       task.isActive = options.isActive || false;
@@ -38,7 +37,6 @@ export class TaskFactoryService {
     const task = new Task();
     task.id = taskObject._id;
     task.name = taskObject._name;
-    task.color = taskObject._color;
     task.startTime = taskObject._startTime;
     task.endTime = taskObject._endTime;
     task.isActive = taskObject._isActive;

src/app/task-list/task-list.component.html

@@ -1,15 +1,19 @@
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 <div class="col-xs-1" align="center">
-    <ul>
-        <li *ngFor="let task of tasks | keyvalue">
-            {{task.value._name}} - {{task.value._color}} <span *ngIf="task.value.startTime">- {{task.value._runningTime | timeFormat}}</span>
-            <button mat-flat-button color="warn" (click)="removeTask(task.value)"><i class="fa fa-trash" aria-hidden="true"></i></button>
-            <button mat-flat-button (click)="updateTask(task.value)"><i class="fa fa-refresh" aria-hidden="true"></i></button>
-            <button mat-flat-button *ngIf="!task.value.isActive" (click)="startTask(task.value)"><i class="fa fa-play" aria-hidden="true"></i></button>
-            <button mat-flat-button *ngIf="task.value.isActive" (click)="stopTask(task.value)"><i class="fa fa-stop" aria-hidden="true"></i></button>
-            <button mat-flat-button (click)="resetTask(task.value)"><i class="fa fa-backward" aria-hidden="true"></i></button>
-        </li>
-    </ul>
+    <div class="container">
+        <div class="row" *ngFor="let task of tasks | keyvalue">
+            <div class="col-sm">
+                    {{task.value._name}} <span *ngIf="task.value.startTime">- {{task.value._runningTime | timeFormat}}</span>
+            </div>
+            <div class="col-sm">
+                    <button mat-flat-button color="warn" (click)="removeTask(task.value)"><i class="fa fa-trash" aria-hidden="true"></i></button>
+                    <button mat-flat-button (click)="updateTask(task.value)"><i class="fa fa-refresh" aria-hidden="true"></i></button>
+                    <button mat-flat-button *ngIf="!task.value.isActive" (click)="startTask(task.value)"><i class="fa fa-play" aria-hidden="true"></i></button>
+                    <button mat-flat-button *ngIf="task.value.isActive" (click)="stopTask(task.value)"><i class="fa fa-stop" aria-hidden="true"></i></button>
+                    <button mat-flat-button (click)="resetTask(task.value)"><i class="fa fa-backward" aria-hidden="true"></i></button>
+            </div>
+        </div>
+    </div>
     <h3>Total Time: {{totalTime | timeFormat}}</h3>
     <button mat-flat-button color="primary" (click)="openTaskInputDialog()">Create New Task</button>
 </div>

src/app/task-list/task-list.component.ts

@@ -49,8 +49,7 @@ export class TaskListComponent implements OnInit {
 
   public createTask(task: { name: string; color: string; }): boolean {
     const taskObject = this.taskFactoryService.createTask({
-      name: task.name,
-      color: task.color
+      name: task.name
     });
     this.taskRepositoryService.addTask(taskObject);
     return true;
@@ -60,7 +59,6 @@ export class TaskListComponent implements OnInit {
     const dialogRef = this.taskInputDialog.open(TaskDialogComponent);
     dialogRef.afterClosed().subscribe((data) => {
       if (data) {
-        task.color = data.color;
         task.name = data.name;
         this.taskRepositoryService.updateTask(task);
       }

src/app/time-format.pipe.ts

@@ -9,19 +9,19 @@ import { PipeTransform, Pipe } from '@angular/core';
         let minutesString = '00';
         let hoursString = '00';
 
-        if (hours > 10) {
+        if (hours > 9) {
             hoursString = hours.toString();
         } else {
             hoursString = '0' + hours;
         }
 
-        if (minutes > 10) {
+        if (minutes > 9) {
             minutesString = minutes.toString();
         } else {
             minutesString = '0' + minutes;
         }
 
-        if (seconds > 10) {
+        if (seconds > 9) {
             secondsString = seconds.toString();
         } else {
             secondsString = '0' + seconds;