Background

I made this Pay Calculator web app after trying to compute my wage for different time periods (ie. hourly, weekly, yearly, etc.). After a quick search I found an online pay calculator that did a pretty good job, however I found it annoying that you had to select from a dropdown your time period and then enter the wage for that period, after which you would click submit and it would display a number of time periods and the payment amount. The problem was I wanted a more streamlined experience where I could easily use a slider or similar to adjust the pay and all other fields would update automatically.

Implementation

I decided to go for a React-compatible frontend library, as I was pretty familiar with React. React is good and all but for something this simple and small that doesn’t utilize that much of the React toolkit, Preact (a 3kB alternative to React with the basically the same API) seemed to be a better choice. Along with Preact, I leveraged Vite tooling (basically an alternative to create-react-app that is fast) and GitLab for source control as well as hosting. I also decided to go with Styled Components for integrating CSS modularly with my Preact components.

Conclusion

Overall I thought this was a pretty fun side project that makes it a lot easier to calculate your pay. A few areas I think I could improve on would be planning and separation of concerns. Although planning isn’t that important for small projects it is good practice to get used to documenting and designing an application before building it. Secondly, the app is quite monolithic, meaning it is mostly all one big file, had I planned it out more I could’ve more easily separated the logic code from the view code and made it more modular/reusable.

The source code is available on GitHub and Gitlab as linked to above.

Pay Calculator is licensed under the GPLv3.