Variable Income Calculator

HTML | CSS | JavaScript | Visual Studio Code | GitHub Pages

What It Is & Why I Developed It

This is a web application for people whose wages vary from paycheck to paycheck. It may be that they're paid hourly, they do freelance work, or any other reason that they don't make a consistent salary. It's intended to take information about the user's past income and use that to provide some calculations, to allow the user to make educated estimates regarding their future income and financial decisions.

Steps to Use:

Step 1.

Select how often you get paid (weekly, bi-weekly, or monthly). Calculations will change based on this value.

Selecting a pay frequency on the variable income calculator

Step 2.

Enter as many recent paycheck amounts as desired. The more the better, as more numbers to work with will result in calculations that more accurately reflect future income.

Adding paycheck amounts

Step 3.

Click "Calculate" to see a list of calculations based on past income and how frequently you get paid.

Calculations displayed on the screen, based on paycheck amounts

How I Did It

  1. Set Up The Repository & Domain

    2. I created the repository in GitHub and cloned it in VS Code so that I could use GitHub for version control. GitHub Pages is also my chosen hosting platform for this website, as it's free, enforces HTTPS, and allows me to update my website directly from the repository. This web application uses GitHub Pages' default URL.

  2. Design

    3. With this originally being developed in May 2024, when I was just getting started with web design, the original design wasn't ideal. However, after honing my skills a bit more, I came back and gave it a little makeover. I added a dollar bill texture and pattern and added a semi-transparent green gradient on top. In the background, I added a fitting image of some money and a calculator. The buttons are dark green, to correspond to the money theme.

  3. Development

    4. The front end is coded using HTML and CSS and the back end is JavaScript. The way I programmed this web application, it takes the user input and stores paycheck amounts in an array. Once the "Calculate" button is clicked, a function is called to calculate the user's average income based on past income and how often the user gets paid.

What's Next

What I'll Be Adding in the Future

A feature that allows the user to subtract tax and benefits from the final calculations. This would allow the user to select a state and subtract that state's income tax. There would also be a section for the user to enter information about their benefits such as how much per paycheck their health insurance costs, how much is taken out for retirement, etc. I don't have all of the details sorted out just yet, but this is the direction I'd like to go in.