Web Task Manager

A simple web-based task manager application. The goal of this project is to help users in managing their daily task and organising tasks in a timely manner. In addition, the project was part of my university coursework for a module called User Interface Design and Evaluation. The course was primarily focused on project-based learning and understanding of user-centred design theories, principles, and processes.

Technology

• Web Technology

• HTML5
• CSS3
• JavaScript
• Bootstrap 5 - HTML, CSS and JS framework
• Font Awesome 6 - Digital icon library
• MDB 4 - Fully customisable UI component framework inspired from Bootstrap
• jQuery 3.6.0 - JS library
• localStorage - Location in browser where website data can be saved



• Design Tools

  • Figma - Design tool I used for creating a prototype design of app
  • ColorSpace - Digital colour palette generator
  • Adobe Color Accesibility tool - A tool for checking contrast ratio of colour to ensure choices of foreground and background colour is visually accessible

Functionality

Note:
In the initial implementation, a working app prototype was made using the "T" prototype technique. Therefore, only features considered high priority in the user requirement were implemented. However, more unfinished/new features will be added to this project in the future.

The functionality that the current version of the web app has and is capable of:

1. create a task and save in the browser local storage.
2. Delete a task.
3. List down the all the available tasks from the browser’s local storage and display them on dashboard page. (Working for Work tab section only).

Key learning

1. Web accessibility

   • Colour contrast
   • HTML semantic – the use of the proper HTML semantic element, such as the use of <nav> elements for navigation links, to make websites accessible to all users.
   • HTML validation

2. Principles and practises of Human-Computer Interaction (HCI) and user-centred design.

   • Three-levels of fidelity prototyping
     • Low fidelity

       • Sketches and storyboards etc.
     • Medium fidelity

       • Wireframes and mock-ups etc.
     • High-Fidelity – functional prototype just looks like final product.

       • “T” prototype
         
       In short, this task manager webapp is Hi-fi prototype.
   • Heuristic Evaluation of system’s design (Nielsen’s 10 usability heuristic principle)
   • Colour theory

3. HTML & CSS

   • Box Model
   • Grid
   • Flex-box
   • CSS variables and functions (custom properties)
   • Pseudo classes and pseudo elements
   • HTML semantic elements.

4. JavaScript

   • DOM manipulation with jQuery
   • CRUD operation with localStorage

Installation

Note: A larger screen is recommended, with a minimum resolution of 1280px x 720 for a better view.

This app does not require any installation to use. Follow this link

Project status

I'm still working on features that aren't finished.

Credit

1. Adobe - Color Accessibility tool
2. Bootstrap
3. CSS-Tricks - CSS Flex-box, CSS Grid, CSS variables and function
4. ColorSpace
5. Figma
6. FontAwesome
7. Google Font - Montserrat
8. jQuery website
9. jQuery - DOM manipulation with jQuery
10. MDB - Material Design for Bootstrap
11. Mozilla - DOM manipulation with JavaScript and localStorage CRUD operation