Project 1: Tip Calculator

Link to project uploaded on Firebird Server:


For this project, I wanted to do either a grade calculator that will automatically convert your number average into a GPA, or a tip calculator, which will include evenly splitting the bill between the group.

I created the tip calculator. I started by writing out the HTML and CSS for the file. I first decorated it with a yellow rectangle, but soon I got the idea of making it look like a receipt.

Before -> After

I made a light blue background, with ragged/ripped edges. I kept theĀ  light red button to add some contrast. I also modified the results area to be clearer and easier to understand.

When I was writing the Javascript code, I kept getting error results such as NaN, Reference Error, Syntax Error, undefined, function error, and event error. While it was tricking trying to get it to work properly, I found quick solutions by looking over my code and looking for tips online.

The most challenging part of this project was getting the arithmetic operations to work. I looked the code over and over again, yet it kept giving me $0.00 or NaN. I decided to write out the formulas, then I found that I am missing a few parentheses for the formula. After fixing the code, the calculator finally worked!

One of the reasons I was getting the NaN result was because my variables were not being recognized as values. I added .value to the end of the variable, and it worked for some formulas, but one of them was still NaN. I found out that sometimes, the variable in the formula won’t be recognized, and a quick fix is to multiply the variable by 1. I had to be careful in adding the extra operations because making a mistake like putting one extra or one less parenthesis will spit out an error.

After looking at my “final” product (see the After picture above), I felt like it needed something else. I decided to take what we learned from the CSS animation (the ball) and create a printing animation where the paper rolls up from a printer. Unfortunately, it didn’t work the way I hoped, so the final product looks like the printer is going down instead of the paper rolling up.

I used some of the code we learned from the CSS animation, but changed the styles and timing. For the animation, I used translateY for transform to make the printer move down.

When I first added the animation, the printer svg file was stuck to the left side. I tried adding margins, but it stayed 30px to the left of the window whenever I resized the browser. I fixed it by adding position absolute to the printer and position relative to the background.

Another problem I came across was the animation. It kept resetting after finishing. I solved this problem by adding animation-fill-mode: forwards which will stop the calculator from resetting

Below is what the calculator looks like after clicking “check”.