Dav/Devs LogoDav/Devs

Tip Calculator App

A Frontend Mentor challenge solution - An interactive tip calculator with custom tip input and bill splitting functionality.

·4 min read

By Davina Leong

Tip Calculator App

An interactive tip calculator built as a Frontend Mentor challenge. This app allows users to calculate tips, split bills, and includes custom tip percentage input with real-time calculations.

Key Features

  • Tip Calculation: Calculate tips with predefined or custom percentages
  • Bill Splitting: Split the total between multiple people
  • Real-time Updates: Live calculation as users input values
  • Input Validation: Error handling for edge cases and invalid inputs
  • Responsive Design: Works perfectly on all device sizes

Technologies Used

  • HTML5
  • CSS3 (Grid & Flexbox)
  • Vanilla JavaScript
  • Form validation and error handling
  • Event-driven programming

Functionality

The app handles various scenarios including:

  • Preset tip percentages (5%, 10%, 15%, 25%, 50%)
  • Custom tip percentage input
  • Number of people validation
  • Reset functionality
  • Edge case handling (zero values, decimals)

Implementation Highlights

  • Clean, modular JavaScript code
  • Efficient DOM manipulation
  • Proper event handling
  • Accessibility considerations
  • Mobile-first responsive design

Links

frontend-mentorjavascriptcalculatorinteractiveform-validation
Dav/Devs - Full Stack Developer Portfolio