Tip Calculator App
This is a solution to the Tip Calculator App challenge on Frontend Mentor. The challenge involves building a tip calculator that calculates the tip and total per person based on user inputs, with a responsive design for mobile, tablet, and desktop.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size.
- See hover states for all interactive elements on the page.
- Calculate the correct tip and total cost of the bill per person.
- Solution URL: GitHub Repository
- Live Site URL: Live Demo
- Semantic HTML5 markup
- CSS custom properties
- Flexbox and Grid for layout
- Mobile-first workflow
- Vanilla JavaScript for calculations and interactivity
- Git and GitHub for version control
- Improved my understanding of responsive design using a mobile-first approach.
- Gained experience with JavaScript event listeners and DOM manipulation for dynamic calculations.
- Learned to handle edge cases (e.g., preventing
$NaNoutputs, validating inputs).
I plan to enhance this project with additional features, including:
- A tip history log to track past calculations.
- Custom tip presets for user-defined percentages.
- A split payment breakdown for detailed per-person contributions.
- A currency selector for multi-currency support.
- A dark mode toggle for better usability.
- A shareable link to share calculations via URL.
To run this project locally:
- Clone the repository:
git clone https://github.com/your-username/tip-calculator-app.git - Navigate to the project directory:
cd tip-calculator-app - Open
index.htmlin a browser, or use a local server (e.g., VS Code Live Server).
- Name: [Brian Meinert]
- Frontend Mentor: @bmeinert8
- GitHub: bmeinert8