HTML | CSS | JavaScript

This is the second project I created using JavaScript as an assignment for my third semester of Web Communications at SAIT. This tool allows the user to input their bill total, tip amount, provincial tax rate, and the number of diners in order to split the total evenly when dining out.

During the previous semester of this course, I created a similar tool utilizing PHP for the functionality. In order to make the tool more user-friendly, I implemented some simple JavaScript to update the totals in real time based on user input, rather than requiring the user to press a button to calculate the results and view them on a new page.

The biggest challenge I faced when creating this tool was writing the calculations and having JavaScript round the totals to their proper values. Through the use of external calculator apps, I was able to convert the values to work within the context of this tool. Then using valueAsNumber and toFixed properties, I was able to get JavaScript to output the totals rounded to their appropriate values.

For the design of this page, I wanted to emulate the look of a paper receipt through the use of the body font and background image. I decided to invert the colours for the output values to make them very obvious on the page. As a little Easter egg and nod to my identity, I used the colours of the trans pride flag for the header and footer. The page has a responsive design in order to display well on mobile devices as well as larger screens.