https://github.com/mr-reutcky/tip-calculator
Learn how to create a simple and interactive tip calculator using HTML, CSS, and JavaScript. This tutorial covers building a user-friendly interface to calculate tips based on bill amounts and tip percentages. Perfect for beginners!
https://github.com/mr-reutcky/tip-calculator
html-css-javascript tip-calculator tutorial webapplication
Last synced: 5 months ago
JSON representation
Learn how to create a simple and interactive tip calculator using HTML, CSS, and JavaScript. This tutorial covers building a user-friendly interface to calculate tips based on bill amounts and tip percentages. Perfect for beginners!
- Host: GitHub
- URL: https://github.com/mr-reutcky/tip-calculator
- Owner: mr-reutcky
- Created: 2024-11-22T18:41:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-22T20:29:42.000Z (over 1 year ago)
- Last Synced: 2025-07-13T21:25:27.902Z (about 1 year ago)
- Topics: html-css-javascript, tip-calculator, tutorial, webapplication
- Language: JavaScript
- Homepage: https://mr-reutcky.github.io/tip-calculator/
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tip Calculator
This project is a simple **Tip Calculator** that computes taxes (PST and GST), the tip amount, and the total amount, as well as the amount per person when splitting the bill.
## Overview
The calculator allows users to:
- Enter a bill amount.
- Enter a tip percentage.
- Enter the number of people to split the bill.
The calculator will then display:
- PST (7%)
- GST (5%)
- Tip amount
- Total amount before tip
- Total amount after adding the tip
- The amount each person has to pay when the bill is split
---
## 1. HTML Structure
The HTML layout of the Tip Calculator contains input fields for the bill amount, tip percentage, and number of people. There is also a button to trigger the calculation, and a section to display the results.
### HTML Elements:
- **Inputs**: For bill amount, tip percentage, and number of people.
- **Button**: To calculate the tip and total.
- **Results**: Displays computed results, such as taxes, tip, total amount, and amount per person.
### HTML Snippet:
``` HTML
Bill Amount:
Tip Percentage:
Number of People:
Calculate Tip
PST (7%): $0.00
GST (5%): $0.00
Total Before Tip: $0.00
Tip Amount: $0.00
Total Amount: $0.00
Amount per Person: $0.00
```
---
## 2. Style Overview
This section covers the CSS styling used for the **Tip Calculator** project. The design focuses on creating a clean, user-friendly interface with modern styling practices.
### Styling Overview
The Tip Calculator is styled using **CSS Flexbox** for layout and a **responsive design** for smooth interaction. Below are the key styling elements:
- **Centered Layout**: The form and results are centered on the page.
- **Button Styling**: Buttons have hover effects for better user interaction.
- **Input Styling**: Inputs are styled with clear placeholders and error states for validation.
- **Responsive Design**: The calculator is designed to look good on different screen sizes.
### Key Elements:
- **Body**: Sets up the background color, font family, and overall layout using flexbox to center the form.
- **Button**: Styled with padding, background color, and hover effects.
- **Input**: Styled with a consistent height, width, and error states when validation fails.
## CSS Code
### Body Styling
The body is styled to center the content both vertically and horizontally, while also setting the background color and font.
``` CSS
body {
font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
background-color: #121212;
color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
```
---
## 3. JavaScript Code
The JavaScript is the core of the Tip Calculator. It handles user input validation, performs the necessary calculations
(PST, GST, tip amount, total, etc.), and updates the user interface with the results.
Key JavaScript Functions
- select: Selects an element from the DOM.
- listen: Adds an event listener to an element.
- isValidNumber: Checks if a value is a valid number.
- showError and clearError: Display and remove error messages.
- validateInputs: Validates user input.
- calculateAndDisplayResults: Performs the calculations and updates the DOM.
-clearInputs: Clears the input fields.
### isValidNumber Function
``` JavaScript
function isValidNumber(value) {
return !isNaN(value) && value.trim() !== '';
}
```
### showError and clearError Functions
``` JavaScript
function showError(input, message) {
input.value = '';
input.placeholder = message;
input.classList.add('error');
}
```
``` JavaScript
function clearError(input, placeholder) {
input.placeholder = placeholder;
input.classList.remove('error');
}
```
### validateInputs Function
``` JavaScript
function validateInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput) {
let isValid = true;
if (!isValidNumber(billAmountInput.value)) {
showError(billAmountInput, 'Enter a valid bill amount');
isValid = false;
} else {
clearError(billAmountInput, 'Enter bill amount');
}
if (!isValidNumber(tipPercentageInput.value)) {
showError(tipPercentageInput, 'Enter a valid tip percentage');
isValid = false;
} else {
clearError(tipPercentageInput, 'Enter tip percentage');
}
if (!isValidNumber(numberOfPeopleInput.value) || parseInt(numberOfPeopleInput.value) <= 0) {
showError(numberOfPeopleInput, 'Enter a valid number of people');
isValid = false;
} else {
clearError(numberOfPeopleInput, 'Enter number of people');
}
return isValid;
}
```
### calculateAndDIsplayResults
``` JavaScript
function calculateAndDisplayResults(billAmount, tipPercentage, numberOfPeople) {
const billAmountNum = parseFloat(billAmount);
const tipPercentageNum = parseFloat(tipPercentage);
const numberOfPeopleNum = parseInt(numberOfPeople);
const pstAmount = (billAmountNum * 0.07).toFixed(2);
const gstAmount = (billAmountNum * 0.05).toFixed(2);
const totalBeforeTip = (billAmountNum + parseFloat(pstAmount) + parseFloat(gstAmount)).toFixed(2);
const tipAmount = (billAmountNum * (tipPercentageNum / 100)).toFixed(2);
const totalAmount = (parseFloat(totalBeforeTip) + parseFloat(tipAmount)).toFixed(2);
const amountPerPerson = (totalAmount / numberOfPeopleNum).toFixed(2);
select('.pst-amount').textContent = pstAmount;
select('.gst-amount').textContent = gstAmount;
select('.total-before-tip').textContent = totalBeforeTip;
select('.tip-amount').textContent = tipAmount;
select('.total-amount').textContent = totalAmount;
select('.amount-per-person').textContent = amountPerPerson;
}
```
### Event Listener
``` JavaScript
listen('click', select('.calculate-tip'), function() {
const billAmountInput = select('.bill-amount');
const tipPercentageInput = select('.tip-percentage');
const numberOfPeopleInput = select('.number-of-people');
if (validateInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput)) {
calculateAndDisplayResults(billAmountInput.value, tipPercentageInput.value, numberOfPeopleInput.value);
clearInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput);
}
});
```