AttendX - Smart Attendance Tracker 📊

A modern, intuitive web application for students to track their attendance and maintain the minimum 75% requirement.

🌟 Features

Core Functionality

• 📚 Subject Management - Add, view, and delete subjects with custom colors
• 📝 Daily Attendance Logging - Quick entry for lectures held and attended
• 📊 Real-time Calculations - Instant percentage updates for each subject
• 🎯 Smart Alerts - Know exactly how many lectures you can miss or must attend
• ✏️ Edit & Delete - Fix mistakes in attendance records anytime
• 💾 Local Storage - All data stored securely in your browser

Dashboard

• Overall Attendance - Combined percentage across all subjects
• Individual Subject Cards - Detailed stats for each course
• Color-coded Status - Visual indicators for safe/warning/danger zones
  • 🟢 Green (≥75%) - Safe zone
  • 🟡 Yellow (70-74.9%) - Warning zone
  • 🔴 Red (<70%) - Danger zone
• Progress Bars - Animated visual representation of attendance

History & Management

• Complete History - View all attendance records by date
• Edit Entries - Modify held/attended values for any date
• Delete Records - Remove incorrect entries with confirmation
• Chronological View - Entries organized by date (newest first)

🚀 Live Demo

Try it now: AttendX Live

📸 Screenshots

Dashboard View

Clean, modern interface showing overall and subject-wise attendance

Daily Entry

Quick logging interface for daily attendance

History Management

Edit and delete past entries with ease

🛠️ Technology Stack

• Frontend Framework: React 18 (via CDN)
• Styling: Tailwind CSS + Custom CSS
• Fonts: Clash Display + Satoshi
• Storage: Browser localStorage
• Build: Single HTML file (no build process needed)
• Hosting: Vercel
• Version Control: Git + GitHub

📖 User Guide

Getting Started

1. Add Your Subjects

• Click "+ Add Subject" button
• Enter subject name (e.g., "Data Structures")
• Choose a color for visual distinction
• Click "Add Subject"

2. Log Daily Attendance

• Click "+ Log Today" button
• Select the date (defaults to today)
• For each subject, enter:
  • Lectures Held: Total lectures conducted
  • Lectures Attended: Lectures you attended
• Click "Save Attendance"

3. Monitor Your Progress

• Dashboard Tab: View overall and per-subject stats
• Subjects Tab: Detailed breakdown of each subject
• History Tab: Review and edit past entries

Understanding the Calculations

Attendance Percentage

Percentage = (Total Attended / Total Held) × 100

Can Miss Calculation (when ≥75%)

Shows how many lectures you can skip while staying above 75%

Can Miss = floor((Attended - 0.75 × Held) / 0.75)

Must Attend Calculation (when <75%)

Shows consecutive lectures needed to reach 75%

Must Attend = ceil((0.75 × Held - Attended) / 0.25)

Tips for Best Results

1. Log Daily - Update attendance every day for accuracy
2. Use Colors Wisely - Assign similar colors to related subjects
3. Check Dashboard Often - Monitor which subjects need attention
4. Fix Mistakes Immediately - Use History tab to correct errors
5. Backup Your Data - Take screenshots or export periodically

🎨 Design Philosophy

AttendX follows a modern, professional design approach:

• Dark Theme - Reduces eye strain during extended use
• Glass-morphism - Contemporary semi-transparent cards
• Smooth Animations - Delightful micro-interactions
• Typography - Distinctive font pairing (Clash Display + Satoshi)
• Color Coding - Intuitive visual status indicators
• Responsive Layout - Works seamlessly on all devices

🔒 Privacy & Data

• 100% Client-Side - No server, no database, no tracking
• Local Storage Only - Data never leaves your device
• No Login Required - Use immediately, no registration
• Privacy First - Your attendance records are completely private
• GDPR Compliant - No personal data collected or shared

Data Persistence

• Data stored in browser's localStorage
• Survives page refreshes and browser restarts
• Device and browser specific
• Clearing browser data will erase attendance records

⚙️ Technical Details

Browser Compatibility

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Performance

• Load Time: < 1 second
• Bundle Size: ~30KB (single file)
• No Dependencies: Everything bundled via CDN
• Offline Capable: Works without internet after first load

Data Structure

subjects: [
  {
    id: 1738567890123,
    name: "Data Structures",
    color: "#667eea",
    attendance: [
      {
        date: "2026-02-03",
        held: 2,
        attended: 1
      }
    ]
  }
]

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Feature Ideas

• Export/Import attendance data (JSON/CSV)
• Dark/Light theme toggle
• Weekly/Monthly attendance reports
• Email/SMS notifications
• Multi-semester support
• Calendar view for attendance
• Statistics and charts
• PWA support (offline mode)
• Multi-language support
• Print-friendly reports

🐛 Bug Reports

Found a bug? Please open an issue with:

• Description of the bug
• Steps to reproduce
• Expected behavior
• Screenshots (if applicable)
• Browser and OS details

📝 Changelog

Version 1.0.0 (February 2026)

• ✨ Initial release
• ✅ Subject management
• ✅ Daily attendance logging
• ✅ Real-time percentage calculations
• ✅ Edit and delete functionality
• ✅ History view
• ✅ Responsive design
• ✅ Local storage persistence

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Suyash Thanage

🙏 Acknowledgments

• Built with React and Tailwind CSS
• Fonts: Clash Display & Satoshi
• Inspired by the need for simple student tools
• Thanks to all contributors and users!

⭐ Star this Project

If you find AttendX useful, please consider giving it a star on GitHub! It helps others discover the project.

---