- DOM Manipulation
- Control Structures
- Immediately Invoked Function Expressions
- I broke up the feedback statement. Before breaking up the feedback statement, if there was an error in one spot, the user would get all three validation errors.
- I created two functions. One function handles error validation and the other handles the calculations for the tips.
- I add a validation statement to make calculations only if there were no errors. I did this by creating and returning a Boolean flag called ‘isFeedback' to indicated whether error feedback existed.
- I add the ‘toFixed(2)' method to my output to ensure two decimals in my output.
- I made the users output and the users input disappear from the form after five seconds to give visual feedback that the calculations were complete.
Time to CodeThis took about 3 hours, start to finish, including watching part of John's solution and then going back to finish my own solution.
Lines of CodeThis took 40 lines of code, including comments and white space.
Biggest Take Away(s)I had yet another BUG in my code. I typed in setInterval() instead of setTimeout(). It didn't hit me until after watching my CSS mysterically appear and disappear in a fixed interval of about every 2 seconds. Then I was like, why are my CSS classes appearing and reappearing in set intervals?…Duh! One more takeaway but not necessarily a bug was when I used the HTML input form field. I tried to input a decimal number (18.67) but got an error. Luckily, I remember from an earlier project that the reason for the error was the HTML input was set to number. When the HTML input has type=”number”, you have to add step=”0.1″ to set the interval to accept decimals.
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See
- In the case of tip form calculator above, you should be able to use the calculator to enter an amount of a bill, the number of people who will split the bill, and a selection as to how the service went.
- If a user forgets to add input or if the input is blank (or less than zero), feedback should be alerted to the user and then go away after 5 seconds.
- During the calculation, a GIF animation should show for a couple seconds before the user's answer show up on the screen.
- After about 5 seconds, the calculator should reset all forms.
Need to see the video solution for this project?