A modern, responsive web-based GPA calculator that helps students determine the semester marks they need to achieve their desired GPA. Whether you know your ICA marks or TEE marks, GPACalc calculates exactly what you need to reach your goals.
🚀 Live Demo: https://gpa-calculator-36.web.app/
- 🎯 GPA Calculator - Determine required marks based on your desired GPA and known assessment scores
- 📈 ICA to TEE Converter - Find minimum TEE marks needed based on your ICA score
- 📉 TEE to ICA Converter - Find minimum ICA marks needed based on your TEE score
- 📱 Responsive Design - Automatically optimized for mobile and desktop devices
- ⚡ Real-time Calculations - Instant results as you input data
- 🎨 Beautiful UI - Modern design with smooth animations and intuitive navigation
- ♿ User-Friendly - Simple input validation and helpful feedback messages
- 🔧 No Dependencies - Pure HTML, CSS, and JavaScript
The calculator uses a standard GPA-to-percentage conversion:
| GPA | Grade | Percentage Range |
|---|---|---|
| 10 | O | 90-100% |
| 9 | A+ | 80-90% |
| 8 | A | 70-80% |
| 7 | B+ | 60-70% |
| 6 | B | 55-60% |
| 5 | C | 50-55% |
| 4 | P | 40-50% |
| <4 | F | Below 40% |
- ICA (In-Class Assessment) - Out of 50 marks, typically weighted 50%
- TEE (Take-Home Examination) - Out of 100 marks, typically weighted 50%
- Minimum Requirements - TEE must be at least 40/100 to pass
Simply visit: https://gpa-calculator-36.web.app/
The app automatically detects your device and loads the optimized version.
-
Clone the repository:
git clone https://github.com/laz4rd/GPACalc.git cd GPACalc -
Open in browser:
- Option A: Double-click
index.htmlto open directly - Option B: Use a local server for better compatibility:
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000 # Node.js (if installed) npx http-server
- Then navigate to
http://localhost:8000in your browser
- Option A: Double-click
Scenario: You got 35/50 in ICA and want a GPA of 7.5 (B+)
- Go to GPA Calculator
- Enter Desired GPA: 7.5
- Select: "I know my ICA marks"
- Enter ICA Score: 35
- Click Calculate
- Result: You need approximately 60/100 in TEE
Scenario: You got 75/100 in TEE and want to pass (GPA 4.0 minimum)
- Go to GPA Calculator
- Enter Desired GPA: 4.0
- Select: "I know my TEE marks"
- Enter TEE Score: 75
- Click Calculate
- Result: You need approximately 5/50 in ICA (or even 0!)
Scenario: You got 30/50 in ICA. What's the minimum TEE needed to pass?
- Go to ICA to TEE
- Enter ICA Score: 30
- Click Calculate
- Result: You need at least 40/100 in TEE
GPACalc/
├── index.html # Entry point - detects device type
├── mobile.html # Mobile-optimized UI (responsive for phones)
├── pc.html # Desktop-optimized UI (wider layout)
├── public/ # Firebase hosting directory
│ ├── index.html
│ ├── mobile.html
│ └── pc.html
├── firebase.json # Firebase hosting configuration
├── .firebaserc # Firebase project ID
├── .gitignore # Git ignore rules
└── README.md # This file
The app converts your desired GPA to a required percentage:
- GPA ≥ 10: 90%
- GPA ≥ 9: 80% + (GPA - 9) × 10
- GPA ≥ 8: 70% + (GPA - 8) × 10
- And so on...
- Combined Score = (ICA/50 × 50%) + (TEE/100 × 50%)
- ICA Contribution = ICA × 1 (since it's out of 50)
- TEE Contribution = TEE × 0.5 (since it's out of 100, scaled to 50)
- HTML5 - Semantic markup and structure
- CSS3 - Responsive design with animations and gradients
- JavaScript (ES6+) - Interactive calculations and UI logic
- Font Awesome - Navigation icons
- Google Fonts - Typography (Pixelify Sans, Instrument Serif)
- Firebase Hosting - Deployment and hosting
- ✅ Desktop - Full width, sidebar navigation
- ✅ Tablet - Responsive layout
- ✅ Mobile - Touch-optimized, bottom pill navigation
- ✅ All modern browsers - Chrome, Firefox, Safari, Edge
- Smart Device Detection - Automatically loads optimal version
- Pill Navigation - Floating circular menu with smooth animations
- Color-Coded Results:
- 🔵 Info (blue) - General calculations
- 🟢 Pass (green) - Positive outcomes
- 🔴 Fail (red) - Impossible scenarios
- Smooth Animations - Fade-in effects and hover states
- Input Validation - Helpful error messages for invalid inputs
- Responsive Grid - Adapts to any screen size
This project is deployed on Firebase Hosting and automatically updated from the main branch.
-
Install Firebase CLI:
npm install -g firebase-tools
-
Login to Firebase:
firebase login
-
Initialize Firebase in your project:
firebase init hosting
-
Deploy:
firebase deploy
- Assumes 50% ICA weightage and 50% TEE weightage
- TEE must be at least 40/100 to pass
- Assumes semester marks are the only assessment method
- No data persistence (calculations are ephemeral)
- Custom weightage calculator
- Multiple semester tracking
- Local storage for saved calculations
- Export results as PDF
- Dark mode toggle
- Multi-language support
- Offline functionality (PWA)
- GPA history and analytics
Contributions are welcome! Here's how to help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to your branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Bug fixes and improvements
- UI/UX enhancements
- Performance optimizations
- Better accessibility (WCAG compliance)
- Documentation improvements
- Translation support
This project is open source and available under the MIT License. See the LICENSE file for more details.
Brijraj Singh Bhati
- 🌐 Portfolio: roguestudios.web.app
- 💼 GitHub: @laz4rd
- 🎨 Creative: x4creative.framer.website
Found a bug or have a feature request?
- Check existing issues to avoid duplicates
- Open a new issue with:
- Clear title and description
- Steps to reproduce (for bugs)
- Expected vs. actual behavior
- Device/browser information
- Use labels appropriately (bug, enhancement, question, etc.)
- Lines of Code: ~900 (combined HTML/CSS/JS)
- File Size: <150KB (highly optimized)
- Load Time: <1 second
- Browser Support: All modern browsers (IE 11+)
- Built with ❤️ for students
- Inspired by real academic challenges
- Designed for simplicity and accessibility
- Deployed with Firebase for reliability
Happy calculating! 🚀
For the most up-to-date version and live demo, visit: https://gpa-calculator-36.web.app/