A futuristic and responsive GPA Calculator designed for university students in Ghana.
The application helps students calculate weighted GPAs using the Ghanaian university grading system while providing modern analytics, academic classification insights, PDF report generation, and persistent calculation history.
Neon GPA was developed as a portfolio-focused academic utility application that combines clean frontend engineering, responsive UI/UX principles, and practical student-centered functionality.
The system allows students to:
- Dynamically add courses and grades
- Automatically compute GPA
- View academic classifications
- Export professional GPA reports as PDFs
- Store calculation history locally in the browser
The project emphasizes:
- Responsive design
- Clean architecture
- Real-world usability
- Modern frontend aesthetics
- Weighted GPA calculation
- Ghanaian university grading scale support
- GPA classification system
- Course-by-course grade tracking
- Total credits and grade point analytics
- Futuristic glassmorphism interface
- Neon-inspired dashboard UI
- Dark/light mode toggle
- Animated result cards
- Toast notifications
- Responsive desktop, tablet, and mobile support
- Local storage persistence
- GPA history tracking
- PDF report generation
- Student profile integration
| Grade | GPA |
|---|---|
| A | 4.0 |
| B+ | 3.5 |
| B | 3.0 |
| C+ | 2.5 |
| C | 2.0 |
| D | 1.5 |
| F | 0.0 |
- HTML5
- CSS3
- Vanilla JavaScript
- jsPDF
- Local Storage API
- Glassmorphism
- Responsive Design
- Dashboard UI Architecture
| Module | Description |
|---|---|
| GPA Engine | Calculates weighted GPA automatically |
| Classification Engine | Determines academic standing |
| PDF Generator | Exports academic reports |
| Theme Manager | Handles dark/light mode switching |
| Local Storage Manager | Saves user calculation history |
| Responsive UI Layer | Optimizes layout across devices |
Neon-GPA/
│
├── index.html
├── style.css
├── script.js
├── assets/
├── screenshots/
├── docs/
├── README.md
└── .gitignore
git clone https://github.com/James-Damptey-MightyX/High-GPA-Calculatorcd neon-gpaOpen index.html in your browser.
The generated academic report includes:
- Student name
- Academic information
- GPA summary
- Classification
- Course breakdown
- Generated timestamp
- Developer attribution footer
Some key frontend engineering challenges solved during development included:
- Responsive desktop panel balancing
- Dynamic GPA recalculation logic
- Local storage synchronization
- PDF formatting and export structure
- Mobile-first responsive optimization
This project strengthened practical skills in:
- Frontend architecture
- Responsive UI engineering
- State management using browser storage
- Dynamic DOM manipulation
- User-centered design principles
Planned enhancements include:
- Multi-semester GPA tracking
- CGPA analytics dashboard
- Authentication system
- Cloud database integration
- GPA trend visualization
- PWA/mobile app support
BSc Information Technology Graduate
Software Development & Data Systems Enthusiast