Back when I was in first year applying for jobs, I noticed a lot of job descriptions had requirements for minimum GPA's, thus wanted one listed on a resume. Since the school I go to doesn't use the 4.0 GPA system, there were obviously some calculations and conversions I had to do.
The problem? Waterloo (my university) has a different rating conversion scale compared to other universities, and I was surprised to find that all the GPA calculators out there were either suited for US universities, or did very very general calculations and conversions, or were only valid for a single university. One didn't even exist for Waterloo, so I would have had to do the calculations by hand (and done them again after every term when I got new grades).
This is what the first version looked like back in December 2014:
The Solution Part 2
As you can see I was still learning CSS back then :). This version of the site was live for just about 8 months, and was relatively popular (maybe 500 users a month?). However it wasn't responsive, selecting a university sucked because of the long dropdown, and the UI looked like it was made by a child (aka. me). After my second coop as a web developer I learned about front-end frameworks, and how to make sites look nicer. After a full-rewrite of the app, this is what it looks like now:
The current website uses Angular.JS as its front-end framework, with modular and maintainable code (old version had a single script file). The calculator currently has support for over 52 Canadian Universities and Colleges, and customizes its calculation algorithm for each one. It features a specific conversion chart for every university, with sources of information in case someone wants to know how they're grade was calculated.
In addition, rather than just converting percentages to a 4.0 GPA scale, the calculator can convert between any of the grade types support by a certain university. For example, the University of York has letter grades, a 9-point system, and percentages. The algorithm I wrote can take an input from all of these and convert them to each other's equivalent grades. Internally this is done via a hash map, of which I won't go into right now.
In addition different universities can have different weights associated with courses. For example, Waterloo has course weights ranging from 0.25 to 0.5 to 1. Whilst York has course weights ranging from 1 to 12. The calculator's algorithms take that into account, and the pre-filled values of the credit weight s are customized depending on the university.
There's also a convenient fuzzy search bar so that you can find a university super easily, based on either its name or location. In addition, to make it easier when users come back to the site, the inputs are stored locally using local storage. So if someone decides to come back after a term to calculate their new grade, everything they've filled in before will be filled in again, assuming they didn't wipe their browsers data.
The site is also responsive, and can be used easily on mobile. I worked hard on making the user experience as simple and easy to use as possible, and I think I've done a good job. Now all that's left is adding support for more universities!
I also made sure to do as much search engine optimization as possible on the site, and it now shows up in the top 5 search results when doing a general search like
gpa calculator! This is definitely my most successful project so far. My friends keep saying I should probably put ads on it, but I'm just glad I get to help out over 5000 students with something I made!
Some fun stats from Google Analytics, taken in September 2016:
Its always fun looking at the trends of when the calculator is most used. Peaks usually occur before and after midterm and finals, and right before the deadline to apply for jobs. I wonder why :)