https://github.com/denislavdev/tip-calculator
A simple and efficient tip calculator built with HTML, JavaScript, and TailwindCSS.
https://github.com/denislavdev/tip-calculator
Last synced: 2 months ago
JSON representation
A simple and efficient tip calculator built with HTML, JavaScript, and TailwindCSS.
- Host: GitHub
- URL: https://github.com/denislavdev/tip-calculator
- Owner: denislavdev
- License: mit
- Created: 2025-04-12T16:07:18.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-05-31T15:11:10.000Z (10 months ago)
- Last Synced: 2025-06-08T17:46:13.693Z (10 months ago)
- Language: HTML
- Homepage: https://tip-calculator-denislav.vercel.app
- Size: 88.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
💰 Tip Calculator
A simple and efficient tip calculator built with HTML, JavaScript, and TailwindCSS.
Preview: https://tip-calculator-denislav.vercel.app
---
## Overview 📋
This project is a tip calculator designed to make splitting bills and calculating tips quick and easy. Whether you're dining out with friends or calculating service tips, this app provides a clean interface to handle it all.
---
## Features ✅
- **Quick Tip Selection:** Choose from common tip percentages like 5%, 10%, or 15%.
- **Custom Tip Option:** Enter your own tip percentage if the presets don’t work for you.
- **Split Bills:** Adjust the number of guests to divide the total evenly.
- **Real-Time Updates:** See the tip amount, tip per guest, and total per guest values.
---
## Tech Stack 💻
![]()
![]()
---
## Project Structure 📂
Here’s a quick look at the project files:
- **index.html** – Main HTML file for the app.
- **script.js** – JavaScript file that handles all the logic for tip calculations.
- **output.css** – Compiled TailwindCSS file.
- **input.css** – Source file for TailwindCSS.
- **.prettierignore** - Tells Prettier to skip over the Tailwind output CSS so it stays intact when you use --minify during build.
- **.gitignore** - Tells Git which files to skip when we use `git add *`.
- **README.md** – This file.
---
## Getting Started 🚀
### Prerequisites 🔧
Ensure you have the following installed:
- A modern web browser
### Installation 🛠️
1. **Clone the Repository:**
```bash
git clone https://github.com/denislavdev/tip-calculator.git
cd tip-calculator
```
---
## How It Works
1. Enter the **bill amount**.
2. Pick a **tip percentage** or type in a custom one.
3. Adjust the **number of guests** using the slider.
4. Click **Calculate** to see the results.
5. Use **Reset** to clear all inputs and start over.
---
## Credits 🙏
- Layout inspired by [Refined Guides](https://www.youtube.com/@refinedguides)
- Developed with care by [Denislav](https://github.com/denislavdev)
---
If you find this project useful, feel free to fork it, star it, or open an issue with any suggestions or feedback!