Custom Web App: Financial Aid Calculator

I designed and implemented a financial aid calculator on top of an existing multi-step form. Users enter their expected contributions step by step, and as they fill out the form, a progress bar updates in real time to show how much of the total tuition is covered and what remains. The final result determines scholarship eligibility and is shared with both the user and an admin via email.

Tool Overview

• Multi-step form with guided questions
• Real-time tuition progress bar
• Dynamic feedback based on user inputs
• Final results displayed on a thank-you page and emailed to the user and admin

Architecture

• Runs in the browser with no backend logic for calculations
• User inputs update a shared data object
• Totals are recalculated as values change
• The UI updates immediately to reflect progress and remaining tuition

Languages & Tools

• Vanilla JavaScript
• HTML
• CSS

Process

Started with a short client brief and existing multi-step form framework, wrote a custom JavaScript script to handle form behavior, calculations, and progress updates, built logic to generate a summary output, including:

• A table and custom message shown after submission
• An email sent to both the user and the admin

Embedded the finished form in an iframe on the client’s website.

Challenges & Solutions

The main constraint was working within the limits of an existing multi-step form system, layering custom logic on top without breaking built-in behavior. Overall, it was fun frontend project!