I finally got the Tip calculator to function!
For real I'm still trying to figure if this JavaScript is for me because, why did it have to stress me so much?!😭
For this phase of the challenge, my goal was:
- To get the UI looking as close as possible like the design.
- Design active states.
- Get the buttons and inputs to function as expected.
- Display the calculated result.
My Process:
- I declared all relevent DOM elements as inputs in JavaScript.
- Wrote a calculateTip() function to calculate Total Tip / person and Total Amount/person, if both Bill and Number of Persons inputs were not zero.
- I rendered the tip buttons as a loop and called the calculateTip() function on each button with a click event.
- At Reset, I declared all variables back to 0 (except number of persons which I left at 1).
Challenges and AI collaboration:
I faced several challenges and bugs but after several hours of brain wracking, I worked with Gemini to figure things out. I didn't just ask the AI to generate the codes. I asked how things were done and when the AI suggested, I tried them out.
Continued development
I didn't do so much form validation in this phase of the project, except a condition to check that the inputs were not 0. For further development, I plan to learn more about form validation in JavaScript, then do a better job in validating the forms.
I'm not sure what the next project holds but I'm excited.😊