📊 Attendance Calculator

Smart, accurate, and real-time attendance tracking & target prediction web application.
Plan your bunks, forecast future percentages, and maintain your required attendance effortlessly.

---

📌 Table of Contents

• Overview
• Key Features
• How It Works
• Live Demo & Interface
• Project Architecture
• Getting Started & Local Setup
• Deployment
• SEO & Discoverability
• Contributing
• License

---

📖 Overview

Many universities and colleges enforce strict attendance criteria (such as a 75% or 80% threshold). Calculating how many classes you can afford to miss—or how many consecutive lectures you need to attend to recover—can be tedious and error-prone.

Attendance Calculator (attendancecalculator.tech) is a responsive, client-side web utility designed to simplify this math. It provides instant visual feedback through an animated circular SVG progress graph, clear recovery projections, and an interactive future date planner.

---

✨ Key Features

• 🎯 Instant Attendance Calculation: Enter attended and total lectures to immediately see your current percentage with sub-second accuracy.
• 🔮 Future Projection & Bunk Planner:
  • Tells you the exact number of classes you must attend consecutively to hit your desired target (e.g., 75%).
  • Shows how many classes you can safely skip without dropping below your threshold.
• 📅 Calendar & Schedule Forecaster: Plan upcoming weeks by selecting active weekdays and calendar ranges to see how upcoming holidays impact your overall score.
• 🎨 Adaptive Dark & Light Theme: Built with CSS custom variables, offering smooth theme transitions for comfortable viewing in low-light environments.
• ⚡ Zero Dependencies / No Backend: Runs entirely in vanilla JavaScript on the browser for maximum speed, offline reliability, and zero latency.
• 📱 Mobile-First Responsive UI: Fully optimized navigation, circular graphs, and cards tailored for desktops, tablets, and smartphones.

---

⚙️ How It Works

Attendance Percentage Formula

$$\text{Attendance Percentage} = \left( \frac{\text{Classes Attended}}{\text{Total Classes Conducted}} \right) \times 100$$

Target Forecasting Formulas

• When you are below the target ($P < T$):
  To find the minimum consecutive classes ($x$) you must attend: $$\frac{\text{Attended} + x}{\text{Total} + x} \ge \frac{T}{100} \implies x \ge \left\lceil \frac{T \times \text{Total} - 100 \times \text{Attended}}{100 - T} \right\rceil$$

• When you are above the target ($P \ge T$):
  To find the maximum consecutive classes ($y$) you can skip: $$\frac{\text{Attended}}{\text{Total} + y} \ge \frac{T}{100} \implies y \le \left\lfloor \frac{100 \times \text{Attended} - T \times \text{Total}}{T} \right\rfloor$$

---

🖥️ Live Demo & Interface

Experience the live app here: https://attendancecalculator.tech

Primary Sections

1. Hero & Input Section: Quick inputs for attended lectures, total lectures, and minimum required percentage.
2. Circular Progress Ring: Animated SVG dynamic dash-offset indicator reflecting current standing.
3. Verdict & Recommendation Box: Clear green (safe) or red (action needed) summary message.
4. Interactive Future Planner: Collapsible module to forecast based on specific days of the week.
5. FAQ & Help Section: Pre-built accordion covering standard college calculation queries.

---

🏗️ Project Architecture

Attendance-Calculator/
├── index.html        # Semantic HTML5 layout, meta tags, and structured data
├── style.css         # Responsive styling, color variables, animations, dark mode
├── app.js            # Core calculation logic, SVG animations, and calendar handlers
├── favicon.ico       # Site icon
├── image.png         # OpenGraph social preview asset
├── robots.txt        # Web crawler configuration
├── sitemap.xml       # Search engine indexing schema
└── README.md         # Project documentation

---

💻 Getting Started & Local Setup

Because the application is built entirely with vanilla HTML, CSS, and modern JavaScript, no installation, build tools, or backend setup is required.

Option 1: Direct Run (Easiest)

1. Clone or download the repository:

   git clone [https://github.com/vivekxn/Attendance-Calculator.git](https://github.com/vivekxn/Attendance-Calculator.git)
   cd Attendance-Calculator

2. Simply double-click the index.html file, or right-click and open it with Chrome, Edge, Brave, or Firefox.

Option 2: VS Code Live Server

1. Open the project folder in VS Code.
2. Install the Live Server extension (if not already installed).
3. Right-click index.html and click "Open with Live Server".

---

🚀 Deployment

The project is lightweight and static, making it deployable anywhere without server configuration:

• GitHub Pages:

  1. Go to repository Settings > Pages.
  2. Under Build and deployment > Branch, select main and / (root).
  3. Click Save.

• Custom Domain Setup (attendancecalculator.tech): Add an A record or CNAME in your DNS settings pointing to your static hosting provider (e.g., GitHub Pages, Cloudflare Pages, Vercel, or Netlify).

---

🔍 SEO & Discoverability

The repository includes pre-configured search optimization files:

• sitemap.xml: Helps search engines crawl and discover the page quickly.
• robots.txt: Directs search engine bots to index the application.
• OpenGraph tags for preview cards on WhatsApp, Telegram, Discord, and Twitter/X.

---

🤝 Contributing

Contributions, feature suggestions, and styling improvements are welcome:

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

---

📄 License

This project is licensed under the MIT License — feel free to use, adapt, and build upon it.