Tip Calculator App Solution

I started by creating all the HTML elements and assigning them classes. Next, I started to work on the above card section, where I changed the sizing and spacing between the card and logo. Then, I moved onto the card I started by figuring out things like the padding, border radius, and box shadow. After spending some time playing around with the values for the properties, I moved onto the right section of the card. I styled the prices, subtitles, and spans. I spent some time learning about text inputs, and some of the different properties and parameters you can set. I created 3 inputs, and set each one to the type text, and set max and min lengths, classes, and placeholders. I used properties like position: absolute to get the image for each input in the right spot, and moved onto the buttons. I customized the border radius, hover colors, transition, and fonts. Afterward, I worked on the JavaScript, where I learned some new things such as specifying to go to 2 decimal places on numbers and limiting the characters that can be used for inputs. I spent some time creating a function for calculating the tip (using basic logic and math skills, and translating that to code). Lastly, I repeatedly tested the functionality of the calculator fixing bugs and issues that weren't intended. Once I finished, I tested the website on multiple browsers, added some responsive design using media queries, and used the built-in device size emulation feature to view what the website would look like on different devices.