https://github.com/frankiefab100/tip-calculator

👨‍💻 Learn how to build a tip calculator using HTML, CSS and JavaScript
https://github.com/frankiefab100/tip-calculator

css css3 html html5 javascript tip-calculator tutorial tutorial-code

Last synced: about 2 months ago
JSON representation

👨‍💻 Learn how to build a tip calculator using HTML, CSS and JavaScript

• Host: GitHub
• URL: https://github.com/frankiefab100/tip-calculator
• Owner: frankiefab100
• License: mit
• Created: 2022-04-24T00:06:56.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-12T15:44:04.000Z (over 3 years ago)
• Last Synced: 2025-10-09T14:39:01.125Z (8 months ago)
• Topics: css, css3, html, html5, javascript, tip-calculator, tutorial, tutorial-code
• Language: CSS
• Homepage: https://frankiefab100.github.io/Tip-Calculator/
• Size: 20.5 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


 
Tip-Calculator

 
Companion repository for the tutorial demostrating how to build a tip calculator using HTML, CSS and JavaScript








































 

 ![Tip-Calculator (2)](https://user-images.githubusercontent.com/46662771/211972696-229ed1ca-92d3-414c-afb3-7814fc158c83.png)



## What is a "Tip Calculator"?

A tip calculator is a tool used to calculate the tip for a meal, bar tab, or service gratuity in a restaurant.

## Prerequisites

To follow along with this tutorial, basic understanding of HTML, CSS and JavaScript is required.

## Getting Started

It is recommended you have [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension installed in your VS Code Editor.

The final demo app lives in the `main` branch: 

## How to run locally 🚀

1. Clone the repository

```BASH

git clone https://github.com/frankiefab100/tip-calculator.git

```

2. Open the files in your machine

Drag and drop the tip-calculator folder in [Visual Studio Code](https://code.visualstudio.com/). Alternatively, Open the VS code editor and locate the folder.

3. Start the web application

Click on **Go Live** button located at the bottom of the VS Code workbench (status bar).

## License 📜

This project is protected under the [MIT License](./License).

## Resources

Check out the blog post: [How to Build a Tip Calculator With HTML, CSS and JavaScript](https://frankiefab.hashnode.dev/how-to-build-a-tip-calculator-with-html-css-and-javascript)





Built with ❤️