Skip to content

Conversation

@Saurabh-1785
Copy link

@Saurabh-1785 Saurabh-1785 commented Nov 6, 2025

✅ Developer Checklist

  • I have followed all the guidelines mentioned in the README file.
  • I have maintained the required directory structure. (Format: ProjectName/{USERNAME}/...yourfiles)
  • This Pull Request contains only one project.
  • I have starred ⭐ the repository (optional).

📝 Summary

Project: Interactive Tip Calculator

A clean, modern, and fully responsive web application for calculating tips and splitting bills among multiple people. The calculator provides real-time calculations with instant feedback and input validation.

Key Features:

  • 💵 Enter bill amount with real-time validation
  • 🎯 Quick tip selection (5%, 10%, 15%, 25%, 50%) or custom percentage
  • 👥 Split bills among any number of people
  • ⚡ Instant calculation updates
  • 💸 Display tip amount and total per person in Indian Rupees (₹)
  • ✅ Visual error highlighting for invalid inputs
  • 🔄 One-click reset functionality
  • 📱 Fully responsive design (mobile, tablet, desktop)

Technologies Used:

  • HTML5 (Semantic markup)
  • CSS3 (Flexbox, Grid, responsive design)
  • Vanilla JavaScript (ES6+)

Changes Submitted:

  • Complete tip calculator application with three core files
  • Clean, modular code structure
  • Comprehensive input validation
  • Mobile-responsive design with media queries
  • User-friendly interface with active state management

📸 Screenshots / GIFs

Desktop View:
Desktop View
Full calculator layout with input section and results panel side by side

Mobile View
mobile
Full calculator layout with input section and results in mobile mode


🔗 Live Project Link

Live Demo: https://saurabh-1785.github.io/interactive-tip-calculator/

Repository: https://github.com/saurabh-1785/interactive-tip-calculator


💡 Additional Notes

Project Highlights:

  • Zero dependencies - pure vanilla JavaScript
  • Works offline once loaded
  • Lightweight and fast loading
  • Clean code with detailed comments
  • Follows best practices for accessibility

Calculation Example:

Input:
- Bill Amount: ₹1000
- Tip Percentage: 15%
- Number of People: 4

Output:
- Tip per Person: ₹37.50
- Total per Person: ₹287.50

Testing:

  • ✅ Tested on Chrome, Firefox, Safari, and Edge
  • ✅ Validated on mobile devices (iOS & Android)
  • ✅ Input validation thoroughly tested
  • ✅ Edge cases handled (negative numbers, decimals, etc.)

🎯 Future Enhancements (Optional)

  • Add dark mode toggle
  • Support multiple currencies
  • Bill history/tracking feature
  • Export/share calculation results
  • Tip percentage recommendations based on service quality

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant