Project Overview
I built a client-side calculator to estimate semester costs at Ridgewater College. The calculator considers
tuition and fees, housing, transportation, books, and other related expenses and uses that information to
calculate the student's total cost.
Sections
- Product Discovery & Constraints →
- Applying JavaScript →
- Compatibility Issues →
Though I only had a little JavaScript knowledge at the start of this project, I brainstormed, researched,
and applied new knowledge to solve problems as they arose. I learned a lot about functions, variables, and
calculations, all while building a helpful tool.
Role
Web Designer & Front-End Developer
Tools
Figma, Visual Studio Code
Project Type
Independent Project
Objective.
The objective of this independent project was to design and develop a web-based college cost calculator to
assist students and their families in estimating the
overall cost of attending Ridgewater College.
For this project to be considered complete, all calculations had to be performed on the client-side and display
results in an accurate and visually appealing manner.
Initial Roadblock.
At the start of this project, I had minimal JavaScript experience. Beginning with the design on Figma, I knew I
wanted to include a multi-stepped form so that I didn’t
overwhelm my users. Before becoming too attached to the idea, I wanted to make sure it was possible with my
experience level. Luckily, after some research, I found a tutorial on W3Schools that taught me
almost exactly
what I needed.
Product Discovery & Constraints.
Using frames and the prototyping tool on Figma, I tested a design using one long form; if successful, this
design would save time by avoiding the
code for the multi-step form. However, displaying all the questions at once was overwhelming like I initially
expected. So, I shifted my design to a multi-step form. I included section headings and tooltips to aid the
user’s understanding of each question.
Design Changes Due to Development Constraints.
Validation.
After I started coding the initial idea, I realized I could not
follow the W3Schools tutorial exactly.
Their code required form validation; however, the users of this college cost calculator needed to be able to
skip over any
question that wasn't relevant to them. This calculator was supposed to be a helpful tool, not a government
form where every question is required. So, I removed the validation code, leading to a better user-experience.
Screen Jumping.
My original design included a text summary at the
beginning of each form step. However, this design did not work well. It caused the page to
jump every time the user went to the next step in the form. To solve this problem, I moved the text to a
landing page. With this solution, the user can read about the calculator and its abilities before moving on to
the questions. This way, the user is not bothered by repeating instructions every step of the way.
Results Display.
As I reached the end of the project, I realized the dollar
amounts of each section (e.g. tuition cost, room & boarding, etc.) should be emphasized, so I increased the
text size to improve the visual hierarchy of the layout, ensuring the numbers would pop. I also added another
chart after receiving feedback from a
peer, making three charts in total: Total Cost Breakdown Chart, Final Cost Breakdown Chart, and Tuition vs.
All Other Expenses Chart. The last addition was a helpful financial aid information section specific to
Ridgewater College and general financial aid information for students who may be graduating from the 2-year
college and moving on to a 4-year college (as Ridgewater is known for).
Applying JavaScript.
I used HTML to structure the form and display questions. I used CSS to add basic styles like color and text
size.
I used JavaScript to perform calculations, form interactions, and display results. Throughout the project, I
created four JavaScript files:
- calculations.js: created to retrieve the inputted values from the HTML form, perform the
coded calculations,
and store the calculated values in local storage to be display on the results page.
- collapseSections.js: created to collapse and expand sections on the HTML form based on
user interaction. For
example, if the user checked “Yes” for the question “Will you be living off campus/on your own?”, the section
would expand to say, “Please include you expected rent cost (per month):”. If they changed their mind and
checked no, the section would collapse again.
- form.js: created to handle the multi-step form interactions and navigation circles. A
majority of this
JavaScript code was taken from a W3School tutorial and edited to fit my needs.
- results.js: created to display the results of calculations.js on the results page by
retrieving the local
storage values and formatting them with a function addCommas (found from Stack Overflow).
Compatibility Issues
This calculator would be used by students everywhere: desktop computers, laptops, tablets, smartphones. I
utilized media queries to apply responsive code, ensuring the web app would function and look visually appleaing
across multiple devices.
I used Google’s developer tools to test the responsiveness on different screen sizes. The major fixes were 1)
to ensure that the tool tips stayed on the screen regardless of screen size or position on the page 2) adjust
the results page to display the calculations vertically instead of horizontally 3) ensure the charts (made with
a tool called Charts.js) fit on the screen.
After testing the application on multiple browsers and devices, I have found that the application works on
Chrome, Safari, Firefox, and Microsoft Edge on Windows and Mac devices. It also works on at least one Samsung
device and on Safari for IOS 16 and above. However, I have found that on IOS 15 (specifically 15.6.1), the
values will be computed and stored, but they are not displayed to the screen. I have tried researching a
solution to this problem, but I have come up empty so far. If you have any solutions to this problem, please
contact me!
Project Results.
This project taught me a lot about JavaScript, specifically about functions, variables, and calculations. It
inspired me to get outside of my comfort zone and
challenge my current level of knowledge. I planned this college cost calculator from idea conceptualization to
completed development. Not only did I build a usable web app, but I also made an efficient, simple tool to make
calculating semester expenses a little bit easier for Ridgewater College students.
