Student Task Manager

A lightweight, student-centred web application for managing academic tasks, building study habits, and maintaining focus during study sessions. Built with HTML, CSS, and JavaScript — no backend, no login, no installation required.

Repository: https://github.coventry.ac.uk/kalup3/student-task-manager
Author: Prince Victor Kalu — Student ID: 14450592
Module: 6003CMD Dissertation and Project Artefact — Coventry University
Ethical Approval: P191059

1. Project Overview

This application was developed as the practical artefact for a BSc dissertation investigating whether combining task management with structured focus intervals can improve student time management and academic productivity.

The system addresses a documented gap in existing productivity tools: most applications are designed for professional use and lack features that support sustained study concentration. This application bridges that gap by integrating task organisation with a Pomodoro-inspired Focus Mode timer, a Study Streak Tracker, a Smart Focus Recommendation engine, and a Study Analytics Dashboard.

All data is stored locally in the browser using localStorage. No personal data is collected, no accounts are required, and the application works fully offline.

2. Folder Structure

student-task-manager/
├── index.html              # Main task manager page
├── style.css               # Shared styles for all pages
├── script.js               # All application logic
├── README.md               # Project documentation
├── .gitignore
│
├── pages/
│   ├── focus.html          # Focus Mode timer page
│   └── analytics.html      # Study Analytics Dashboard
│
└── assets/
    ├── icons/              # (Reserved for future icons)
    └── images/             # (Reserved for screenshots)

3. Technologies Used

Technology	Purpose
HTML5	Page structure and semantic markup
CSS3	Responsive styling, animations, layout
Vanilla JavaScript (ES6+)	All application logic
localStorage API	Persistent client-side data storage
Web Notifications API	Desktop alerts when focus session ends
Blob / URL API	CSV file generation and download

No frameworks, libraries, build tools, or servers are required.

4. Features

4.1 Task Management (`index.html`)

Students can create and manage academic tasks with the following fields:

Field	Description
Title	Name of the task (required)
Subject / Module	Optional module tag (e.g. "Data Science")
Deadline	Date picker for submission deadline
Priority	Low / Medium / High
Notes	Optional extra details, links, or reminders

Tasks support full inline editing — clicking Edit transforms the task card into an editable form without navigating away or using browser popups.

Each task is stored in the following structure:

{
  id: 1,
  title: "Coursework essay",
  subject: "Data Science",
  deadline: "2026-04-13",
  priority: "High",
  notes: "See marking rubric on Aula",
  completed: false,
  createdAt: "2026-04-01T10:30:00.000Z"
}

4.2 Task Filtering and Sorting

The task list can be filtered by status:

All — shows every task
Active — shows only incomplete tasks
Done — shows only completed tasks

Tasks can also be sorted by Deadline or Priority (High → Medium → Low).

4.3 Overdue Detection

Tasks past their deadline are automatically highlighted with an orange warning border and an ⚠ Overdue badge. The Progress card shows a count of overdue tasks with a prompt to act.

4.4 Progress Tracking

The Progress card shows:

Completed vs total task count (e.g. 3 / 5 tasks completed (60%))
An animated progress bar that fills as tasks are completed
A live overdue task warning
The current Study Streak badge (see Section 4.7)

4.5 Export to CSV

A single click on ⬇ Export to CSV downloads all tasks as a .csv file with the current date in the filename (e.g. tasks-export-2026-04-11.csv).

Exported columns: ID, Title, Subject, Priority, Deadline, Status, Notes, Created At.

This enables external analysis of task data in Excel, Google Sheets, or any data tool.

4.6 Focus Mode (`pages/focus.html`)

A dedicated, distraction-free page for timed study sessions.

Features:

Smart Focus Recommendation — analyses the current task list (active tasks, overdue count, priority distribution) and automatically recommends a session duration:
- Heavy workload → 50 minutes
- Moderate workload → 25 minutes
- Light workload → 15 minutes
Duration selector — 15 / 25 / 50 minute buttons, auto-selected based on the recommendation
Large countdown timer — updates every second; mirrored in the browser tab title
Start / Pause / Reset controls
Session counter — tracks how many sessions have been completed today, stored per-day in localStorage
Desktop notifications — opt-in browser notification when a session finishes

4.7 Study Streak Tracker

The application tracks consecutive days of study activity (tasks added or completed). The streak is displayed:

As a 🔥 badge in the Progress card on the main page
As current and best streak statistics on the Analytics Dashboard

Streak data is stored in localStorage keyed by date, making it persistent across sessions.

4.8 Study Analytics Dashboard (`pages/analytics.html`)

A full-page dashboard providing a visual overview of the student's productivity data.

Sections:

Summary stat cards — Total tasks, Completed, Active, Overdue, Sessions Today, Day Streak
Tasks by Priority — horizontal bar chart (High / Medium / Low)
Completion Rate — animated SVG donut chart showing percentage complete
Tasks by Subject — ranked list of modules by task count
Focus Sessions (Last 7 Days) — vertical bar chart of daily session counts
Study Streak — current and best streak numbers
28-Day Activity Heatmap — colour-coded grid showing days with task activity or completions

All data is computed live from localStorage — no external data source required.

5. How to Run

Clone or download the repository
Open index.html in any modern browser (Chrome, Edge, Firefox, Safari)
Start adding tasks and using the app
Click Start Focus Mode to navigate to the Focus page
Click 📊 Analytics to view the dashboard

No build step, server, or internet connection is required.

# Or run with VS Code Live Server:
# Right-click index.html → Open with Live Server

6. localStorage Keys

Key	Contents
`student-task-manager-tasks`	Array of all task objects
`student-focus-sessions`	Object keyed by date string with session counts
`student-task-manager-streak`	Object with daily activity records for streak tracking

7. Testing Evidence

The following screenshots were captured during development and testing:

Screenshot	What it shows
`screenshot-task-list-overdue.png`	Main task list with overdue warning badge
`screenshot-inline-edit.png`	Inline edit form open inside a task card
`screenshot-focus-timer.png`	Focus Mode timer running
`screenshot-smart-focus-recommendation.png`	Smart recommendation banner on Focus page
`screenshot-notifications.png`	Browser notification permission prompt
`screenshot-main-dashboard-streak.png`	Main page showing streak badge and analytics nav
`screenshot-analytics-dashboard.png`	Full analytics page with charts
`screenshot-github-repository.png`	GitHub repository view
`screenshot-github-push-success.png`	Successful push confirmation in VS Code terminal

8. Potential Future Improvements

The following enhancements could be explored in future development:

Recurring tasks — support for weekly or daily repeating tasks
Task categories with colour labels — visual grouping beyond subject text
Pomodoro break timer — automatic short/long break countdown after sessions
Task duration estimates — allow students to estimate time needed per task
Cloud sync option — optional account-based sync across devices
Accessibility improvements — full keyboard navigation and screen reader support

kalup3/student-task-manager

About

Resources

Stars

Watchers

Forks

Releases

Languages