Post-Secondary Expenses Calculator

Inspiration

We got our idea from us thinking about some common challenges that students like us might face. We chose what we thought would be the simplest and straightforward idea to implement in code.

What it does

The web app we made has two pages, the tuition calculator allows the user to input a school name, length of time in years, yearly tuition fee, living expenses, material costs, meal costs, as well as any additional cost the user might want to add. Then the app calculates the total cost of all expenses. The user can also visit the debt calculator page to find out the total amount of money they would need to pay back any loans. The user inputs the amount owed, yearly interest rate, and the amount of months. The app will then calculate the total amount of money they will need to pay back their debt.

How we built it

We built this app using HTML, CSS, and Javascript. We used HTML for the bones of our website and had buttons and text fields for the user to interact with. We used CSS to style everything and make it the buttons look nice. We used Javascript to perform the calculations and perform actions for when the buttons are pressed.

Challenges we ran into

Some challenges we ran into were the specific positioning of our buttons. We are new to the web app development process and we have very little Javascript and CSS experience so we had trouble getting the buttons to be where we wanted them to be. We also had trouble with getting the app to read the user input from the text boxes.

Accomplishments that we're proud of

We managed to solve our user input issue using Javascript's Document.querySelector() and got the input to work smoothly. We solved the button positioning problem by using position: absolute; in our CSS and using Dev tools to find the correct position for our buttons.

What we learned

We learned firsthand what's it like creating a web app and many tricks in CSS and Javascript. We learned how to get input from the user using HTML DOM element innerHTML. We learned how to use CSS to position buttons and have a gradient background.