Responsive Tip-Calculator-App

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

Today’s project is another exciting one.

Project Name: Tip Calculator App

This app allows users to quickly calculate the tip amount and the total bill per person by entering the bill amount, choosing a tip percentage, and specifying the number of people. It's clean, simple, and effective, with dynamic updates as inputs change.

Technologies Used #HTML

#CSS

#JavaScript

HTML Structure The HTML file sets up the layout with sections for entering the bill amount, selecting the tip percentage, and specifying the number of people. It also includes a display section for showing the calculated tip and total amount per person.

CSS Styling Font Import: I've used Google Fonts to import the "Space Mono" font for a modern and clean look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox to center the container and align items. The design includes a clean background, dimensions, padding, border-radius, and a responsive layout.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

JavaScript Functionality Input Validation: Validates user inputs for the bill amount, tip percentage, and number of people.

Dynamic Calculations: Calculates and displays the tip amount and total bill per person in real-time as inputs change.

Reset Functionality: Resets all inputs and calculations when the reset button is clicked.

• Feeling pumped on Day 38 of 100—let's keep this energy going! 💪🚀

• Completed 38 out of 100 Challenges so far—keeping up the momentum!🔥

• Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project. 👨‍💻

• Feedback is always welcome—would love to hear what you think—drop your thoughts, guys!

-Let’s grow together! 🚀