Tip calculator app

What are you most proud of, and what would you do differently next time?

Proud of:

Successfully handling decimal input in number fields by removing spin buttons using step="any". Aligning images within containers using position: relative and position: absolute, and centering them with transform: translateY(-50%). Organizing global styles (fonts, colors) first to set up the foundation before focusing on layout. Effectively managing hover states with CSS selectors like :not(:last-child) to simplify the styling process without adding extra divs. What I’d Do Differently:

Instead of relying on JavaScript for some layout adjustments, I’d explore more CSS-based solutions like flexbox or grid to handle responsiveness and dynamic content changes. I would work on optimizing media queries to ensure they target all screen sizes efficiently. Focus on testing the app on multiple screen sizes and devices to refine the layout before finalizing styles.

What challenges did you encounter, and how did you overcome them?

Challenges:

Getting input fields to accept decimal values without the spin buttons was tricky. The step="any" attribute was a new concept, but after some testing, I found it works well for number inputs. Handling vertical centering using top: 50% and transform: translateY(-50%) was initially confusing. I had to learn the relationship between the element’s height and container height to make it work properly. Some CSS properties like height: 100% didn’t behave as expected due to nested percentage-based heights, so I had to adjust my approach and sometimes use height: auto for better results. Solutions:

Used step="any" on number inputs to allow decimal values. Used position: relative on parent containers and position: absolute for child elements to fine-tune image alignment. Experimented with height: auto in some cases where 100% was causing layout issues.

What specific areas of your project would you like help with?

CSS Grid and Flexbox: I would appreciate advice on how to improve the responsiveness of my layout using CSS Grid and Flexbox. I’m currently using a lot of height: 100% and flex properties, but I would like to make the design more adaptive to various screen sizes.

JavaScript Calculations: I’m handling some dynamic calculations in JavaScript (e.g., calculating tip amounts). I’d love feedback on how to optimize these calculations or make the interaction smoother (e.g., avoiding issues when values are updated rapidly).

Media Queries: I need some suggestions for structuring my media queries to ensure the app works well across different devices and screen sizes. Any advice on best practices for mobile-first design and handling breakpoints would be helpful.