JavaScript Tip Calculator
Beginnings in Javascript
My Web Communications III class began with a few weeks of reviewing JavaScript and creating small demos of different functionalities possible with the language. I had used JavaScript in projects before, only minimally, and I didn’t really understand it all that well. I knew you could sort items with data, and move things on scroll, and that was about it. I was apprehensive about getting deeper into it at first, but there was a lot of satisfaction in getting challenging things to work, much like the satisfaction I got from working with PHP. So when we were given our first assignment focused on JavaScript, I geared up for the challenge.
The Assignment
The assignment we were given was to make a calculator that could show a real-time breakdown of the cost of a restaurant order, along with a grand total per person, based on form results. When breaking the assignment down, I quickly realized that the harder part of it would be figuring out the step by step of the math. I had worked with demos to get values as a number, as well as changing results based on values in select options, so I had code to go off of there. The script itself was almost entirely math and writing to innerHTML to show users' calculations as they’re broken down.
Math, Math, and More Math
The math for the tip calculation was actually fairly simple, and just required being broken down into the proper order of steps. The pre-tax total, gratuity amount, and tax rate were simply echoes of the user’s input on the form with no math applied to them. The first necessary calculation was to show the user the amount owed in gratuity based on what percentage they chose to tip. Then the tax total was calculated based on the user’s choice of province and the corresponding tax rate, multiplied by the meal total. The meal total was then added to the tax total and gratuity to make the grand total, which was shown both as a whole and per diner based on an equal division by the number of diners inputted by the user.
Final Styles
The final part of the assignment I had to complete were the styles. I decided to mimic the colours of the Apple calculator with greys and a pop of orange. I split the form and the bill breakdown into two sections displayed with flex. I gave them round corners and light drop-shadows for a simple and modern look. The only challenge I had with the CSS was getting the range slider and first number input to match the styles of the rest of the form. I ended up putting both inputs in divs with a class that applied the styles needed. The result was a clean, readable site with straightforward functionality and good scalability.