GPA Calculator
A calculator that allows you to enter your grades, what types of classes you are taking, course credits(optional) and calculates your weighted and unweighted GPA.
Created on 17th April 2021
•
GPA Calculator
A calculator that allows you to enter your grades, what types of classes you are taking, course credits(optional) and calculates your weighted and unweighted GPA.
The problem GPA Calculator solves
Our project helps students calculate their weighted and unweighted Grade Point Average (GPA) with ease. GPA is a very important statistics for students as it is very important for applying to colleges, summer camps, etc. However, since there are many different types of classes with different weights that students can take, calculating GPA might become quite confusing at times. Our easily accessible online calculator allows students to enter basic information about their classes (their grade in the class, the type of class, and the credits earned for the class) on a clean, user-friendly interface, calculates their GPA, and displays it clearly with simple graphics, so students will no longer have to worry about being confused by extraneous information when calculating their GPA.
Challenges we ran into
While there are plenty of troubles that we went through to build this app, there are a few important ones that we felt are worth noting. First of all, we spent some time trying to resolve the issue with misalignment and positioning. In fact, this issue came up several times on different parts and each problem had different solutions. For example, when we tried to center align the the grade precentage bar, the labels(0 and 4) kept knocking it out of place. This problem is especially important when the two labels have different decimal places which causes inbalance. We succesfully resolved this issue by using a css flex box container and assign attributes to the elements. Secondly, we fixed several bugs with the jQuery add/delete class feature. One bug that came up was an suspicious spacing between selections. After hours of efforts, we detected the issue and fixed the problem. The issue was that multi-line html has a hidden space between lines and that space disappears when converting it to single line html.
Technologies used