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.
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”.