📋 AttendanceTracker.io

A smart, privacy-first attendance tracker for students — built with vanilla JS, powered by LocalStorage, and installable as a PWA.

Live Demo: mayurkshirsagar-web.github.io/AttendanceTracker.io
Repository: github.com/Mayurkshirsagar-web/AttendanceTracker.io

---

📌 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• How It Works
• Getting Started
• Usage Guide
• PWA Support
• Privacy
• Screenshots
• Contributing
• Author

---

Overview

AttendanceTracker.io is a client-side web application designed to help students track their academic attendance across subjects and semesters. Instead of manually calculating percentages, the app automates it all — just set up your timetable once, log your daily attendance, and let the tracker handle the math.

No login. No server. No data leaving your browser.

---

Features

• Custom Timetable Setup — Add subjects for each day of the week (Mon–Sat) with a simple input-and-add flow
• Semester Date Range — Define a start and end date for your semester; the tracker uses this to calculate total possible classes
• Attendance Criteria — Set a minimum attendance percentage target (e.g. 75%) to track whether you're meeting the requirement
• Attendance Chart Page — Visual per-subject attendance cards showing present/absent counts and percentage progress
• Daily Attendance Logging — Mark attendance for each subject at the end of each day
• LocalStorage Persistence — All data is saved locally; your setup survives page refreshes and browser restarts
• PWA Installable — Can be installed on mobile or desktop as a standalone app
• Loader Screen — Smooth loading animation on startup
• Reset Functionality — One-click full data reset with confirmation guard
• Responsive Design — Works across mobile, tablet, and desktop

---

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (modular, multi-file)
Logic	Vanilla JavaScript (ES Modules)
Date Handling	Day.js
Fonts	Google Fonts — Montserrat, Roboto
Storage	Browser LocalStorage
Offline Support	Service Worker (sw.js)
PWA	Web App Manifest (manifest.json)
Hosting	GitHub Pages

No build tools, no npm, no frameworks. Pure browser-native stack.

---

Project Structure

AttendanceTracker.io/
│
├── index.html                  # Main setup page (timetable + criteria + dates)
├── attendance-chart.html       # Attendance visualization page
├── manifest.json               # PWA manifest
├── sw.js                       # Service Worker for offline caching
│
├── script/
│   ├── time-table.js           # UI logic for timetable setup page
│   └── time-table-at.js        # UI logic for attendance chart page
│
├── data/
│   └── time-table.js           # Timetable data layer (LocalStorage read/write)
│
├── data-at/
│   └── subject.js              # Subject attendance data layer
│
├── styles/
│   ├── general.css             # Global/shared styles
│   └── main-styles/
│       ├── header.css
│       ├── footer.css
│       ├── sidebar.css
│       ├── main.css            # Timetable page styles
│       └── main-styles-at/
│           └── main.css        # Attendance chart page styles
│
├── Images/                     # App icons, logos, UI assets
└── favicon_io/                 # Favicon set (all sizes)

---

How It Works

The app follows a straightforward 3-step flow:

1. Setup (index.html)

• User adds subjects for each day of the week
• Sets semester start and end dates
• Sets an attendance criteria percentage (e.g. 75%)
• All data is persisted to LocalStorage via the data/time-table.js module

2. Daily Logging (attendance-chart.html)

• At the end of each day, the user logs which subjects they attended
• The app reads the day's timetable and presents the relevant subjects
• Present/absent choices are saved back to LocalStorage via data-at/subject.js

3. Analytics

• The attendance chart page reads all stored data and renders per-subject cards
• Each card shows: total classes, attended count, and current attendance percentage
• Criteria threshold is visually indicated so students know where they stand

---

Getting Started

Since this is a pure static site with no build step, setup is dead simple.

Option 1 — Open directly in browser

git clone https://github.com/Mayurkshirsagar-web/AttendanceTracker.io.git
cd AttendanceTracker.io

Then open index.html directly in your browser.

⚠️ Note: ES Modules (type="module") require a server context to work correctly — opening via file:// may block module imports in some browsers.

Option 2 — Use a local dev server (recommended)

If you have VS Code, install the Live Server extension and click "Go Live".

Option 3 — Use the live hosted version

Just go to: mayurkshirsagar-web.github.io/AttendanceTracker.io

No installation needed.

---

Usage Guide

Step 1 — Configure Your Timetable

• On the main page, you'll see a card for each day (Monday–Saturday)
• Type a subject name in the input field and click Add (or press Enter)
• Repeat for every subject on that day
• Subject names must be consistent — the app uses exact string matching

Step 2 — Set Semester Dates

• Under the timetable, set your Begin Tracking On date (must be today or future)
• Set your Stop Tracking On date (must be after the start date)
• Click Confirm on each to save

Step 3 — Set Attendance Criteria

• Enter your minimum required attendance percentage (e.g. 75)
• Click Confirm to save it

Step 4 — Log Daily Attendance

• At the end of each academic day, click Attendance Chart in the header
• Mark each subject as Present or Absent
• Your running percentages update automatically

Step 5 — Track Progress

• The Attendance Chart page shows a card per subject
• Each card displays your current percentage vs. your target criteria
• Navigate back to the timetable page anytime via the Time Table button

Reset

• Click the Reset button in the header to wipe all data
• A confirmation dialog prevents accidental resets

---

PWA Support

AttendanceTracker.io is a Progressive Web App. You can install it on your device for an app-like experience:

• Android/Chrome — tap the "Add to Home Screen" prompt or use the browser menu
• iOS/Safari — tap Share → Add to Home Screen
• Desktop/Chrome — click the install icon in the address bar

The Service Worker (sw.js) caches all static assets for offline access after the first visit.

Dev tip: If you're running this locally and changes aren't reflecting, go to DevTools → Application → Service Workers → check "Update on reload" or hit Unregister, then hard reload (Ctrl+Shift+R).

---

Privacy

All data is stored exclusively in your browser's LocalStorage. Nothing is sent to any server, third party, or external API. Clearing your browser data or using Incognito mode will result in data loss.

No accounts. No tracking. No telemetry.

---

Screenshots

---

---

---

Page	Description
index.html	Timetable setup, date range config, criteria input
attendance-chart.html	Subject-wise attendance cards and progress

---

Contributing

This project is open source. Contributions, bug reports, and feedback are welcome.

For bugs or suggestions,
email: mayurkshirsagar2510@gmail.com

---

Author

Mayur Namdev Kshirsagar
First-year CSE student at NIT Durgapur
Built this as a hands-on project to practice real-world web development and solve a genuine student problem.

• GitHub: github.com/Mayurkshirsagar-web
• Email: mayurkshirsagar2510@gmail.com

---

Built with ❤️ by a CSE Student at NIT Durgapur