Skip to main content

Create A Tip Calculator Using JavaScript # 111


Published: November 08, 2023 | DevDrawer


Estimated Reading Time
1 minutes
Video Duration
32:57 minutes

In this video, I will show you how to create a simple restaurant bill and tip calculator using vanilla JavaScript, HTML, and SASS. You can use this tutorial to build your own and help you figure out the total bill amount per person and even what each person will need to tip based on selectable percentages.

This is a quick and easy project that anyone learning JavaScript can do. It uses Bootstrap for styling and we create a custom vanilla JavaScript class to handle the integration and calculations. All of it is wrapped up nicely in a visually appealing package that you can convert to an app or just use on your website.

🔗 Timestamps:

00:00 - Intro

00:41 - Create File Structure

01:30 - Build the HTML

14:15 - Build the JavaScript Class

26:33 - Testing

27:22 - Styling the Project Using SASS

View Project on Github: https://github.com/thedevdrawer/js-tip-calculator

⭐ Programmer Merch: https://store.thedevdrawer.com/#!/

⭐ Join the Discord: https://discord.gg/4nRPmBFSDj

⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : https://www.buymeacoffee.com/devdrawer

⭐ Join this channel to get access to perks:

https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg/join

⭐ Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer