sarahvgomez.portfolio.web

Task Tracker

The task tracker is a personal project exploring Angular component-centered's framework. This is the first time I'm exploring design interpreted as components. This project also allowed me to learn key concepts on Typescript. This project's main focus is development, which is why I opted to rely on Bootstrap to handle stylistic decisions.

Single page Wordpress layout. Each section pulls a Wordpress page content.
SVG Animated Icons on hover. Each icon design moved/transformed differently.
Portfolio section pulls a different work on each page load. Showcasing the project.
Task Tracker website design mockup

Technologies Used

Angular Icon HTML5 Icon Typescript Icon SaSS Icon Bootstrap Icon

Technical Challenges

This project’s greatest challenges were having to learn how Angular framework works. This was especially complex coming from a vanilla javascript background. Although Angular can work on javascript alone, best practice is to develop using Typescript. This was also a development challenge.

    <tr *ngFor="let task of taskList; 
    let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{task.title}} </td>
    <td>{{task.description}}</td>
    <td>
    <select class="custom-select" 
    [(ngModel)]="task.status" 
    [ngClass]="task.status" name="statusOptions">
    <option selected>{{task.status}}</option>
    <option value="Completed">Completed </option>
    <option value="Planning">Planning</option>
    </select>
    </td>
    <td>
    {{task.timeHour + 'h ' + task.timeMin + 'm'}}
    </td>
    <td><button (click)="removeTask(i)">
    ✕
    </button>
    </td></tr>

<article id='basicmarkup'</article>

Angular's data-binding directives are used to extend HTML5's capabilities.

#styles{display: block;}

Used pre-defined styles from Bootstrap 4 to style web app.

export class Typescript

Typescript was explored in this solution as oposed to using ol' vanilla Javascript.