TaskFlow is a modern digital planner designed to make daily task management feel more intentional and enjoyable. It combines essential task management features with a warm, editorial interface inspired by paper planners, autumn tones, and thoughtful organisation.
GitHub Pages: View the live project
The live demo URL will be added after deployment.
TaskFlow was created as a portfolio project to explore how a task manager can feel like a polished digital product rather than a generic to-do list. The application focuses on clarity, calm productivity, and a refined user experience through generous spacing, subtle interactions, and a distinctive visual identity.
Users can capture tasks, update them inline, track their progress, and keep their planning session available between visits through browser-based persistence.
- HTML5
- CSS3
- Vanilla JavaScript
- Local Storage API
- Google Fonts (Playfair Display and DM Sans)
- Visual Studio Code Live Server
- Create new tasks
- Edit task titles directly in the task card
- Mark tasks as complete or incomplete
- Delete tasks with a confirmation prompt
- Automatically save tasks with Local Storage
- Display an up-to-date daily progress indicator
- Show the current date dynamically
- Update the copyright year automatically
- Responsive layout for desktop and mobile screens
- Accessible labels and live updates for key interactions
This README should be updated whenever new features are added so it remains aligned with the current state of the application.
taskflow/
├── .vscode/
│ └── settings.json # Live Server configuration
├── assets/
│ ├── css/
│ │ └── style.css # Visual identity, layout, and responsive styles
│ └── js/
│ ├── app.js # Application state and task interactions
│ └── storage.js # Local Storage persistence layer
├── index.html # Semantic page structure
└── README.md # Project documentation
To run the project locally:
- Clone or download this repository.
- Open the project folder in Visual Studio Code.
- Install the Live Server extension if it is not already available.
- Open
index.html. - Select Go Live from the Visual Studio Code status bar.
- The application will open in your default browser.
Before publishing changes, manually verify the following scenarios:
- Add a task and confirm it appears in the task list.
- Add a task with leading or trailing spaces and confirm the title is cleaned up.
- Edit a task, save it with the button or Enter key, and confirm the change is retained.
- Start editing a task, press Escape, and confirm the original title remains unchanged.
- Complete and reopen a task, verifying that the progress indicator and remaining-task count update correctly.
- Delete a task and verify that the confirmation prompt prevents accidental removal.
- Refresh the browser and confirm that saved tasks, titles, and completion states persist.
- Test the layout on desktop and mobile viewport sizes.
- Confirm the current date and copyright year are displayed dynamically.
- Navigate key controls with the keyboard and verify accessible labels communicate their purpose.
- How to organise a small Vanilla JavaScript application by separating UI logic from persistence logic.
- How to build a complete CRUD flow using browser Local Storage.
- How to create inline editing interactions without relying on external libraries.
- How to use semantic HTML and accessible labels to support a more inclusive experience.
- How visual details such as typography, texture, hierarchy, and microinteractions can make a utility product feel more considered.
- How to adapt a responsive layout while preserving a consistent visual identity across screen sizes.
This section will evolve as the project grows and new technical or design challenges are explored.
- Task categories and colour-coded organisation
- Priority levels
- Filters and search
- Task statistics and productivity insights
- Calendar view
- Expanded keyboard interactions
- Additional UX refinements for editing and task management
Laura Matos Front-End Developer | Portfolio Project
This project was created for learning purposes and as part of Laura Matos' professional portfolio.