TASKPULSE
TaskPulse – A lightweight, theme-aware to-do application with task scheduling and session-based persistence. TaskPulse
TaskPulse is a simple, browser-based task manager that allows users to add, complete, and visually track tasks. The app supports a light/dark theme toggle and displays timestamps for each task, storing them temporarily using session storage.
- Team Members: Cobby Franky cobbyfranky@outlook.com. Gospel33 gospelsomtochim22@gmail.com. Precious-chinecherem chinecheremifeanyi924@gmail.com. Okoronkwo Michael okoronkwomikec@gmail.com.
- Advisors:
- PADIO
- Frontend: HTML, CSS, JavaScript
- Storage:
sessionStorage(for temporary data persistence) - Icons & Fonts: (optional, if used in UI)
- Theme: CSS Variables for theming
- Rendrring: DOM Manipulation for dynamic task rendering
- UUID: (crypto.randomUUID) for unique task identification
Version: 1.3.1
Release Date: [3-5-2025]
-
✅ Time tracking with live countdown timers
-
Features:
Feature Location Description getTimeRemaining()task-manager.jsCalculates days/hours/minutes remaining until deadline startTimer()task-manager.jsLive countdown timer with visual urgency states Deadline Highlighting CSS Color-coded warnings for nearing/expired tasks (done) -
Example Output:
3d 05h 12m remaining (normal) 00h 59m remaining (red highlight) Time expired (grayed out)
-
✅ Enhanced search with priority filtering
-
Features:
Feature Location Description startSearch()search.jsReal-time search overlay with priority filtering Task Navigation focusOnMainTask()Clicking search results scrolls to and highlights the task -
Key Improvements:
- Searches both titles and priorities
- Case-insensitive matching
- ✅ Cross-component task navigation
- Functions:
Function Location Input → Output formatDate()task-manager.jsDate→YYYY-MM-DDaddNewLine()task-manager.js"Line1\nLine2"→"Line1<br>Line2"
| File | Changes |
|---|---|
task-manager.js |
Added timer logic, deadline handling |
search.js |
Implemented cross-component navigation |
| CSS | Added .highlighted, .urgent, .expired classes (in progress) |
- Required DOM Structure:
<div class="todo-card" data-task-id="..."> <!-- Now mandatory --> <span class="duetime"></span> <!-- For timer display --> </div>
- Merge new dependencies:
npm install --save date-fns
- Update HTML:
<!-- Add to <head> --> <link rel="stylesheet" href="css/timer.css" />
- Existing tasks will auto-migrate
- New "Time Remaining" column visible for dated tasks
- descrption text breaks after editing and aligns in the center
'task1<br>task2<br>'
| Issue | Workaround |
|---|---|
| Timezone handling in timers | Use UTC (new Date().toISOString()) |
| Duplicate timer intervals | Fixed in v1.2.1 |
- Recurring tasks
- Task categories in search
- Timer pause/resume
| Role | Name | Signature | Date |
|---|---|---|---|
| Lead Developer | [cobby] | ||
| QA Engineer | [godson] |
Filename: changelog.json
{
"version": "1.2.0",
"features": [
{
"name": "Time Management",
"components": ["getTimeRemaining()", "startTimer()"],
"impact": "high"
}
],
"compatibility": {
"minNodeVersion": "16.x",
"browsers": ["Chrome 90+", "Firefox 88+"]
}
}Filename: release_notes.html
<!DOCTYPE html>
<html>
<head>
<title>v1.3.1 Update</title>
<style>
.feature {
color: #2ecc71;
}
</style>
</head>
<body>
<h1>What's New</h1>
<ul>
<li class="feature">Real-time task deadlines</li>
<li class="feature">Improved search accuracy</li>
<li class="feature">
Drag-and-drop task sorting using native HTML5 drag events
</li>
<li class="feature">
Dynamic re-rendering of tasks aligned with stored order
</li>
</ul>
</body>
</html>Filename: compatibility_matrix.xlsx
| Feature | Chrome | Firefox | Safari | Edge | UC Browser |
|---|---|---|---|---|---|
| Time Tracking | ✔ | ✔ | ✔ | ✔ | ⚠* |
| Priority Search | ✔ | ✔ | ⚠* | ✔ | ⚠* |
* Requires polyfill