- Summary
- Site Goals
- User Stories
- Backlog
- Design
- Wireframes
- Features
- Additional Enhancements
- Testing
- Bug Fixes and Updates
- Deployment
- Technologies Used
- Credits
- Acknowledgments
Many people feel overwhelmed when managing their to-do lists, making it difficult to stay motivated. Traditional to-do apps often overcomplicate things with excessive features while neglecting simplicity and motivation. As a result, these apps can become cumbersome to use, causing users to lose focus on their goals and abandon task management altogether.
TaskWrangler goes back to basics and is designed to be a simple, beginner-friendly to-do app aimed at making task management intuitive and motivating.
The app enables users to:
- Organize tasks effectively by adding, editing, and deleting tasks.
- Organize tasks based on their status of completeness.
- Prioritize tasks by setting due dates and highlighting overdue items with visual cues.
- Track progress visually with insightful charts.
By focusing on simplicity, usability, and motivation, TaskWrangler empowers users to manage their tasks consistently without feeling overwhelmed.
🔗 Live Link to access site: TaskWrangler
- Allow users to create, edit, and delete tasks easily.
- Provide status updates (e.g., "To Do", "In Progress", "Completed") for better task management.
- Enable users to set and view due dates for their tasks.
- Implement an Insights page with a chart to visualize overall task completion.
- Highlight overdue tasks with visual indicators.
- Design a clean and responsive UI for seamless navigation on all devices.
- Ensure data persistence so tasks remain saved after page refreshes.
- Make the app easy to expand in the future, with potential features like task categories, prioritization, filtering, or user authentication.
These users are naturally organized and detail-oriented. They use the app to maintain their structure and ensure nothing is overlooked.
- A clean and straightforward interface for inputting tasks.
- Features like status management/categorization and due dates for precise task tracking.
- Frequently updates and organizes tasks.
- Likes visual indicators of progress for a quick overview of accomplishments.
- As a user, I want to register my tasks so I can track what I need to do.
- As a user I want to see my list of tasks so I can have an overview of items to prioritize.
- As a user, I want to set the status of my tasks so I can track my progress.
- As a user, I want to be able to edit tasks so I can correct or update information.
- As a user, I want to delete tasks so I can remove tasks that are no longer relevant.
These users juggle multiple responsibilities at work and home. They need the app to streamline their tasks and reduce stress.
- Categorization to separate work, personal, and other types of tasks.
- Visual cues for overdue or high-priority tasks.
- Adds many tasks but may only complete a few daily.
- Uses filters or categories to focus on specific areas.
- As a user, I want to set a due date for my tasks so I can prioritize them.
- As a user, I want motivational quotes at specific milestones to help keep me motivated. (Not implemented – see backlog)
These users are less focused on task management and more on personal growth and motivation. They find inspiration in milestones and uplifting content.
- Regularly updated motivational quotes or messages.
- A visually appealing progress bar or milestone tracker.
- Logs in to see motivational content even when tasks are minimal.
- Values the app for its inspiration as much as its functionality.
- As a user, I want a visual indicator of progress so I can see how many tasks I have completed.
- As a user, I want to categorize my tasks so I can organize them by type or priority. (Not implemented – see backlog)
The following features were originally planned but were not implemented in this phase due to a shift in priorities. Instead, we focused on enhancing the user experience by introducing:
- Toast notifications for better feedback.
- Keyboard accessibility for improved usability.
- Update Status From Task List for improved usability.
- As a user, I want motivational quotes at specific milestones to help keep me motivated.
This feature was deprioritized in favor of toast notifications, which provide immediate feedback to users upon completing actions like adding or editing tasks.
- As a user, I want to categorize my tasks so I can organize them by type or priority.
Instead of implementing categorization, we focused on keyboard accessibility, making the app more inclusive and efficient for all users.
These features remain on the backlog for potential future development as TaskWrangler continues to evolve.
Considering the primary function of the app is managing tasks, it was decided to keep with simple color scheme. Worldwide recognizable colors were selected for tracking progress: green, yellow, red.
For the base of the app, a neutral blue was chosen, since it is a calming color that doesn't clash with the traffic light scheme. A white hex was selected for the background and a black hex was selected for the text color.
Color Palette
For TaskWrangler, Inter was selected as the primary font, used for the body text and logo, and Roboto as the secondary font for headings and toast notifications to optimize readability and maintain a clean, modern aesthetic.
- Highly readable for long-form text, ensuring tasks and descriptions are easy to scan.
- Modern and neutral, fitting TaskWrangler’s minimalist design.
- Strong identity when used in the logo, reinforcing brand consistency.
- Bold and structured, making H1 and H2 stand out for clear visual hierarchy.
- Slightly condensed design, optimizing space for notifications without reducing legibility.
- Pairs well with Inter, balancing a clean UI with strong contrast where needed.
Button States
Anchor States
Mobile Design
Provides a clean and accessible navigation system for seamless interaction with the app. Users can easily create tasks, view task lists, and access insights.
- Focus management: Uses
document.activeElementtracking to return focus to the last interacted element after closing modals. - Keyboard navigation: Supports
Tabkey navigation across buttons, links, and modals. - ARIA attributes: Ensures screen reader compatibility with
aria-labelledby,role="list", andaria-livefor live updates. - Sticky Navigation: The header remains fixed at the top using
position: sticky, improving accessibility.
Reference: Hidde Blog, Zach Patrick and More
Allows users to add new tasks with essential details such as title, description, and due date.
- Modal Form Implementation: Task creation is handled within a dynamically generated modal.
- Form Validation:
- Ensures title is required before submission.
- Prevents past due dates using
min="${getTodayDate()}". - Displays error messages using JavaScript.
- LocalStorage Integration:
- Tasks are stored in
localStorageand retrieved on page load.
- Tasks are stored in
- Keyboard Shortcuts:
Enterkey submission for faster input.Escapekey to close the form.
Reference: DEV.to, GeeksForGeeks and More
Displays all tasks in card format, each showing status, due date, and action buttons.
- Dynamic HTML Generation: Tasks are rendered dynamically using
innerHTMLwithin#tasks-container. - Accessibility Features:
- Uses
role="list"androle="listitem"for semantic structuring. aria-labelledbylinks task titles to their containers for screen readers.
- Uses
- Overdue Task Highlighting:
- If a task’s due date is past today’s date, the task is assigned an
overdueclass that applies a red color.
- If a task’s due date is past today’s date, the task is assigned an
- Clicking a task card opens a modal displaying status, description, and due date.
- Implemented using a dynamically created
divinside#content-container. - Read view also includes action buttons to minimize back and forth on the UI.
- Uses
trapFocus()function to lock focus within the modal.
Reference: Codepen, StackOverflow and More
- Users can change a task’s status (To-Do → In Progress → Done) directly from the list view.
- Dropdown Selection: A simple dropdown menu is provided for easy status selection.
- Auto-Save & UI Update:
- Upon selection, the task status is immediately updated in localStorage and reflected in the UI without requiring a page reload.
- Accessibility Support:
- Fully navigable via keyboard (
TabandEnterkeys).
- Fully navigable via keyboard (
- Visual Feedback:
- Color-coded indicators adjust automatically to reflect the new status.
- A toast notification confirms successful status updates.
- Users can update title, description, status, and due date.
- Previous values: Pre-fills form with task current values for users' convenience.
- Prevent Unnecessary updates: Compares current and new values before updating
localStorageand sends notification of use cases (edit success, no edits). - Prevent Overdue Edits:
- If a task is overdue, past dates are still allowed for consistency. Earliest date is set to original due date using
min=${currentTask[0].dueDate}.
- If a task is overdue, past dates are still allowed for consistency. Earliest date is set to original due date using
- Auto-save on Submit: Updates localStorage and UI without page reload.
- Confirmation Modal: Before deletion, users receive a confirmation prompt.
- Persistent Storage Update: Task is removed from
localStorage, and UI is updated dynamically. - Keyboard Navigation: Supports
Enterkey selection andEscapekey to cancel.
Provides real-time feedback on task actions such as creation, updates, and deletions.
- Dynamic Toast Generation:
- Uses
document.createElement("div")to create toast containers dynamically.
- Uses
- Auto-dismissal:
- Uses
setTimeout()to remove notifications after 5 seconds.
- Uses
- Keyboard Accessibility:
Tabfocusable and closable usingEscapekey.
- Color-coded Feedback:
- Success (green): Task added successfully.
- Error (red): Failed to save task.
- Info (blue): Info about action.
- Warning (yellow): Missing required fields.
Reference: Used code from GeeksForGeeks with minimal changes
- Tab Trapping:
trapFocus()ensures users can only navigate within an open modal. - Escape Key Handling:
handleEscapeKey()allows quick modal closing. - Keyboard Shortcuts:
Entersubmits forms and confirms actions.Tabcycles through interactive elements.
Reference: Hidde Blog, Zach Patrick and More
Uses Google Charts API to visualize task progress.
- Pie Chart Representation of tasks categorized as To-Do, In Progress, and Done.
- Data Fetching: Reads
localStorageand processes counts viareduce(). - Color Coding: Uses same colors used on task cards for consistency.
- To-Do (yellow)
- In Progress (blue)
- Done (green)
- Dynamically updates as tasks are added/edited.
- Overdue vs On-Time Tasks Pie Chart
- Highlights overdue tasks in red and on-time tasks in green.
- Dynamically updates as tasks are added/edited.
- Auto-resizes on window resize using
window.addEventListener("resize", drawCharts). - Charts adapt to screen size, maintaining clarity.
- LocalStorage Integration:
- Tasks persist between sessions without requiring a backend.
- Error Handling:
- Catches
JSON.parse()failures and resetslocalStorageto prevent app crashes.
- Catches
- ARIA Compliance:
- Uses
aria-live="polite"for toast notifications to be screen reader-friendly. aria-labelledbyensures task descriptions are properly linked.
- Uses
- Lightweight & Fast:
- No external dependencies beyond Google Charts API.
- Create a task (mouse, keyboard)
- Edit a task (mouse, keyboard)
- Open task card details (mouse, keyboard)
- Delete a task (mouse, keyboard)
- Form Validation:
- Save task (create / edit) without title
- Save task (create / edit) with date in past
- Move focus with tab on modal (expected to be trapped in modal)
- Close modals with escape key
- Save tasks (create / edit) with enter on submit button
- Read insights chart
- Navigate to GitHub in new tab
- Used Developer Tools and Console to validate changes in localStorage (Developer Tools > Application > Storage > Local Storage)
-
Jshint.com: No errors or warnings.
-
Jigsaw CSS Validator: No errors. Warnings related to Google Fonts and use of variables are shown.
-
W3C HTML Validatior: No errors or warnings.
-
Accessibility Checker: Audit Score 95
-
WAVE: No errors. One alert related to both logo and "Tasks" links on nav directing user to same page.
-
Lighthouse: Tests performed for mobile device
Desktop Tasks
Desktop Insights
Mobile Tasks
Mobile Insights
All issues are documented in this Project View
This document contains a list of bugs and their corresponding fixes, organized by ticket creation date.
- Issue: #19
- Summary of Fix: The
formContainervariable was changed from a local to a global scope, allowing theCloseModalfunction to properly access and close the form container. - Commit: 63fa163
- Issue: #20
- Summary of Fix: Ensured the modal is fully removed from the DOM after being triggered once, resolving the inconsistent behavior of the
CloseModalfunction. - Commit: b283efa
- Issue: #21
- Summary of Fix: Changed
minattribute on form to match the original dueDate instead of today. - Commit: 42891af
- Issue: #27
- Summary of Fix: Adjusted the CSS by modifying the
displayproperty of thetask-containerto ensure cards are stacked vertically as intended. - Commit: 3816ee6
- Issue: #28
- Summary of Fix: Declared the
emptyStateMessagevariable before calling it to prevent the "ReferenceError: emptyStateMessage is not defined" error in thedrawChartsfunction. - Commit: 1c92d82
- Issue: #29
- Summary of Fix: Re-added code that was accidentally removed when creating the conditional logic that displays toast notifications for both unchanged and changed tasks.
- Commit: 8db3584
- Issue: #31
- Summary of Fix: Addressed W3C validation errors and warnings in
index.htmlandinsights.htmlby correcting the HTML structure and ensuring compliance with W3C standards. - Commit: 376cc57, 717fb83
- Issue: #32
- Summary of Fix: Corrected the color value from
f0f0f0to#f0f0f0to comply with valid color formats, resolving the Jigsaw validation error. - Commit: f95a81a
- Issue: #33
- Summary of Fix: Fixed accessibility issues identified by the WAVE tool, including missing headings and low contrast text, to enhance the website's accessibility.
- Commit: f95a81a, f61438d, 48715dd, 97461cf
- Issue: #35
- Summary of Fix: Adjusted the CSS adding a
min-widthto prevent line breaks in the due date display for overdue tasks, ensuring the date appears on a single line. - Commit: 1d109ad
- Issue: #30
- Summary of Fix: Initial fix implemented
tabindexto contentContainer element and directed the focus to that element after delete. Later that was moved to taskListContainer. Final fix moved the notifications code to an idenpendent js file and introduce parameters forlastFocusedEland afallbackFocusEl. The new parameters allowed more flexibility to define behavior in different scenarios and prepares for further use when scaling the application. - Commit: 78ae558, 0c7afb1, 29fdb24
- Issue: #37
- Summary of Fix: Explicit reset of focus on closeModal and closeToast resets the focus even after user has navigated to other elements using tab. Conditional was added at the end of each function to check if the focus was already on a valid element, preventing explicit reset after user navigated elsewhere.
- Commit: 2673c2c, 2d34ec0
- Issue: #38
- Summary of Fix: Added conditional to
handleEmptyInsightsto only append message if the message doesn't already exists. - Commit: 03716e9
- Issue: #40
- Summary of Fix: Created
addEventListenerforinputaschangeevent was not triggeringupdateTaskStatus()on iOS - Commit: 2a24fbc
- Issue: #26
- Justification: It's common practice to use imports for fonts and variables for styling.
- Issue: #33
- Justification: It's common practice for logo to also redirect to home.
- Issue: #36
- Summary of Fix: DataTable was undefined when loading the screen. I couldn't fix it, but to mitigate it, I added a try...catch to prevent app from crashing. Error seems non-critical as the charts eventually do load without crashing. Common user is unlikely to notice any issue.
- Commit: d664ec4
This project was deployed using GitHub Pages. Steps to deploy are as follow:
- Go to your repository on GitHub.com
- Select 'Settings' on the repository top menu.
- Select 'Pages' on the left side menu.
- Under 'Build and deployment', go to 'Branch' dropdown and select 'main'.
- Ensure that the selected folder is /root
- Once done, click on 'Save'.
- You should receive a deployment confirmation, followed by the web address.
- HTML5
- CSS
- JavaScript
- Mozilla
- w3.org
- Dev.to
- StackOverflow
- a11y-collective
- Coolors
- Google Fonts
- Flaticon
- favicon.io
- FontAwesome
- AmIResponsive to test responsiveness
- Responsinator to test responsiveness
- ChatGPT for documentation review and to explain referenced code when not initially understood (e.g. TrapFocus and CSS for Notifications).
- Logo Icons made by Rizki Ahmad Fauzi from Flaticon.
- Friends and family who tested the application to provide valuable feedback.
- My mentor for pushing me to improve the code