Project Case Study
HTML5 • CSS3 • JavaScript (ES6)
SRM Grade Calculator
A fast, student-focused client-side utility built using vanilla JavaScript that helps college students predict semester letter grades and check GPAs in seconds.
- VanillaJavaScript Engine
- InstantGPA Prediction
- ResponsiveMobile & Desktop
Project Parameters
- Role: Front-End Developer (UI Design, Mathematical scripting)
- Frameworks: None (Vanilla Web API structure)
- Styling: CSS Custom Properties (CSS variables, responsive flex grids)
- Deployment: Vercel Platform
- Audience: 200+ active student views during grading periods
The Problem
SRM University grading rules combine multiple internal exams, class assessments, and end-semester scores. Students had to manually calculate formulas or use slow spreadsheets that are not formatted for mobile screens.
The Solution
Created a single-page responsive client app. By inputting current test scores, students immediately see expected letter grades (O, A+, A, B, etc.). Calculation runs fully in the browser thread, yielding sub-millisecond response times.
Core Learnings
Gained proficiency in client-side input validations, managing dynamic DOM elements, fluid responsive styles without heavy frameworks, and structured mathematical routing rules in JavaScript.
Internal Mechanics
Calculation logic and input validation specifications.
Calculation Logic
Grades are mapped based on total weightages:
• Internals: 50% total weightage (combining multiple assessment tests).
• University Exams: 50% weightage.
The script calculates the target score needed in final exams to achieve specific letter grades:
• O Grade: Total ≥ 90
• A+ Grade: Total ≥ 80
• A Grade: Total ≥ 70
Input Validation
To prevent calculation errors, the application enforces:
• Number-only filtering on keypress.
• Maximum boundary limits matching assessment weights (e.g. Internals capped at 50).
• Visual validation hints (red highlight for out-of-range, green check on valid input fields).
• Non-blocking warnings.
Technologies Used
• HTML5: Semantic forms, accessible field labels, viewport configuration.
• CSS3: Variables for instant dark/light adjustments, grid elements, hover transformations.
• JavaScript (ES6): Event handlers, map reduce algorithms, dynamic DOM interpolation.
Layout Showcase
Desktop and Mobile simulated preview panels.
Challenges Solved
Technical hurdles faced and resolved.
Edge-Case Validation Checks
Technical ChallengeHandling empty inputs or letters copy-pasted into input fields. I created a sanitization regex filter attached to input listeners that parses pasting and filters out non-numeric entries instantly, resolving NaN calculator outputs.
CSS Grid Alignment Without Frameworks
Design ChallengeEnsuring the calculator form fields align cleanly and do not break on low-end screen widths. I utilized flexible CSS grid templates with minmax controls, allowing inputs to wrap cleanly without layout shifts.
Explore live utility
The grade calculator is deployed and running on Vercel for student access.
Check database project
Explore the Online Examination Portal case study, featuring backend Servlets, JDBC, and Oracle SQL.