{"id":29451128,"url":"https://github.com/mr-reutcky/tip-calculator","last_synced_at":"2026-02-23T00:07:11.486Z","repository":{"id":264232481,"uuid":"892771090","full_name":"mr-reutcky/tip-calculator","owner":"mr-reutcky","description":"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!","archived":false,"fork":false,"pushed_at":"2024-11-22T20:29:42.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-13T21:25:27.902Z","etag":null,"topics":["html-css-javascript","tip-calculator","tutorial","webapplication"],"latest_commit_sha":null,"homepage":"https://mr-reutcky.github.io/tip-calculator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-reutcky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-22T18:41:58.000Z","updated_at":"2024-11-22T20:29:46.000Z","dependencies_parsed_at":"2024-11-23T01:06:09.636Z","dependency_job_id":null,"html_url":"https://github.com/mr-reutcky/tip-calculator","commit_stats":null,"previous_names":["mr-reutcky/tip-calculator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mr-reutcky/tip-calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-reutcky%2Ftip-calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-reutcky%2Ftip-calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-reutcky%2Ftip-calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-reutcky%2Ftip-calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-reutcky","download_url":"https://codeload.github.com/mr-reutcky/tip-calculator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-reutcky%2Ftip-calculator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269366852,"owners_count":24405250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-css-javascript","tip-calculator","tutorial","webapplication"],"created_at":"2025-07-13T21:09:13.199Z","updated_at":"2025-10-25T07:28:05.083Z","avatar_url":"https://github.com/mr-reutcky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tip Calculator\n\nThis 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.\n\n## Overview\n\nThe calculator allows users to:\n- Enter a bill amount.\n- Enter a tip percentage.\n- Enter the number of people to split the bill.\n\nThe calculator will then display:\n- PST (7%)\n- GST (5%)\n- Tip amount\n- Total amount before tip\n- Total amount after adding the tip\n- The amount each person has to pay when the bill is split\n\n---\n\n## 1. HTML Structure\n\nThe 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.\n\n### HTML Elements:\n- **Inputs**: For bill amount, tip percentage, and number of people.\n- **Button**: To calculate the tip and total.\n- **Results**: Displays computed results, such as taxes, tip, total amount, and amount per person.\n\n### HTML Snippet:\n\n``` HTML\n\u003clabel for=\"bill-amount\"\u003eBill Amount:\u003c/label\u003e\n\u003cinput type=\"text\" class=\"bill-amount\" placeholder=\"Enter bill amount\" /\u003e\n\n\u003clabel for=\"tip-percentage\"\u003eTip Percentage:\u003c/label\u003e\n\u003cinput type=\"text\" class=\"tip-percentage\" placeholder=\"Enter tip percentage\" /\u003e\n\n\u003clabel for=\"number-of-people\"\u003eNumber of People:\u003c/label\u003e\n\u003cinput type=\"text\" class=\"number-of-people\" placeholder=\"Enter number of people\" /\u003e\n\n\u003cbutton class=\"calculate-tip\"\u003eCalculate Tip\u003c/button\u003e\n\n\u003cdiv class=\"result\"\u003e\n  \u003cp\u003ePST (7%): $\u003cspan class=\"pst-amount\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n  \u003cp\u003eGST (5%): $\u003cspan class=\"gst-amount\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n  \u003cp\u003eTotal Before Tip: $\u003cspan class=\"total-before-tip\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n  \u003cp\u003eTip Amount: $\u003cspan class=\"tip-amount\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n  \u003cp\u003eTotal Amount: $\u003cspan class=\"total-amount\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n  \u003cp class=\"per-person\"\u003eAmount per Person: $\u003cspan class=\"amount-per-person\"\u003e0.00\u003c/span\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n---\n\n## 2. Style Overview\n\nThis 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.\n\n### Styling Overview\n\nThe Tip Calculator is styled using **CSS Flexbox** for layout and a **responsive design** for smooth interaction. Below are the key styling elements:\n\n- **Centered Layout**: The form and results are centered on the page.\n- **Button Styling**: Buttons have hover effects for better user interaction.\n- **Input Styling**: Inputs are styled with clear placeholders and error states for validation.\n- **Responsive Design**: The calculator is designed to look good on different screen sizes.\n\n### Key Elements:\n\n- **Body**: Sets up the background color, font family, and overall layout using flexbox to center the form.\n- **Button**: Styled with padding, background color, and hover effects.\n- **Input**: Styled with a consistent height, width, and error states when validation fails.\n\n## CSS Code\n\n### Body Styling\nThe body is styled to center the content both vertically and horizontally, while also setting the background color and font.\n\n``` CSS\nbody {\n  font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;\n  background-color: #121212;\n  color: #e0e0e0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  margin: 0;\n}\n```\n---\n\n## 3. JavaScript Code\n\nThe JavaScript is the core of the Tip Calculator. It handles user input validation, performs the necessary calculations \n(PST, GST, tip amount, total, etc.), and updates the user interface with the results.\n\n\nKey JavaScript Functions\n\n- select: Selects an element from the DOM.\n- listen: Adds an event listener to an element.\n- isValidNumber: Checks if a value is a valid number.\n- showError and clearError: Display and remove error messages.\n- validateInputs: Validates user input.\n- calculateAndDisplayResults: Performs the calculations and updates the DOM.\n -clearInputs: Clears the input fields.\n\n### isValidNumber Function\n``` JavaScript\nfunction isValidNumber(value) {\n  return !isNaN(value) \u0026\u0026 value.trim() !== '';\n}\n```\n\n### showError and clearError Functions\n``` JavaScript\nfunction showError(input, message) {\n  input.value = '';\n  input.placeholder = message;\n  input.classList.add('error');\n}\n```\n``` JavaScript\nfunction clearError(input, placeholder) {\n  input.placeholder = placeholder;\n  input.classList.remove('error');\n}\n```\n### validateInputs Function\n``` JavaScript\nfunction validateInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput) {\n  let isValid = true;\n\n  if (!isValidNumber(billAmountInput.value)) {\n    showError(billAmountInput, 'Enter a valid bill amount');\n    isValid = false;\n  } else {\n    clearError(billAmountInput, 'Enter bill amount');\n  }\n\n  if (!isValidNumber(tipPercentageInput.value)) {\n    showError(tipPercentageInput, 'Enter a valid tip percentage');\n    isValid = false;\n  } else {\n    clearError(tipPercentageInput, 'Enter tip percentage');\n  }\n\n  if (!isValidNumber(numberOfPeopleInput.value) || parseInt(numberOfPeopleInput.value) \u003c= 0) {\n    showError(numberOfPeopleInput, 'Enter a valid number of people');\n    isValid = false;\n  } else {\n    clearError(numberOfPeopleInput, 'Enter number of people');\n  }\n\n  return isValid;\n}\n```\n### calculateAndDIsplayResults\n``` JavaScript\nfunction calculateAndDisplayResults(billAmount, tipPercentage, numberOfPeople) {\n  const billAmountNum = parseFloat(billAmount);\n  const tipPercentageNum = parseFloat(tipPercentage);\n  const numberOfPeopleNum = parseInt(numberOfPeople);\n\n  const pstAmount = (billAmountNum * 0.07).toFixed(2);\n  const gstAmount = (billAmountNum * 0.05).toFixed(2);\n  const totalBeforeTip = (billAmountNum + parseFloat(pstAmount) + parseFloat(gstAmount)).toFixed(2);\n  const tipAmount = (billAmountNum * (tipPercentageNum / 100)).toFixed(2);\n  const totalAmount = (parseFloat(totalBeforeTip) + parseFloat(tipAmount)).toFixed(2);\n  const amountPerPerson = (totalAmount / numberOfPeopleNum).toFixed(2);\n\n  select('.pst-amount').textContent = pstAmount;\n  select('.gst-amount').textContent = gstAmount;\n  select('.total-before-tip').textContent = totalBeforeTip;\n  select('.tip-amount').textContent = tipAmount;\n  select('.total-amount').textContent = totalAmount;\n  select('.amount-per-person').textContent = amountPerPerson;\n}\n```\n### Event Listener\n``` JavaScript\nlisten('click', select('.calculate-tip'), function() {\n  const billAmountInput = select('.bill-amount');\n  const tipPercentageInput = select('.tip-percentage');\n  const numberOfPeopleInput = select('.number-of-people');\n\n  if (validateInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput)) {\n    calculateAndDisplayResults(billAmountInput.value, tipPercentageInput.value, numberOfPeopleInput.value);\n    clearInputs(billAmountInput, tipPercentageInput, numberOfPeopleInput);\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-reutcky%2Ftip-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-reutcky%2Ftip-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-reutcky%2Ftip-calculator/lists"}