Build a JavaScript Tip Calculator [Article]

Ever discovered your self at a restaurant wishing you possibly can determine find out how to cut up the invoice with your pals or household? Constructing a calculator that may deal with that isn’t as laborious as you assume! I’m going to take you thru a few of what I did to construct this calculator out in HTML, SCSS and vanilla JavaScript. Make sure you stick round to the top the place I’m going over some cool, further options you’ll be able to simply add to this calculator.

I strongly encourage you to learn via this weblog submit to get a really feel for what the calculator can do and try to sort out it your self! This isn’t a step-by-step information, however an outline to get the gears handing over your head. This can be each a difficult and rewarding step in your total developer journey!

You’ll find the code for this and find out how to set up on our GitHub:
https://www.github.com/treehouse/javascript-tip-calculator
Make sure you learn via the README.md file to get it put in accurately.

Dwell demo hyperlink:
https://treehouse.github.io/javascript-tip-calculator

The Software

What was used:

• HTML, SCSS, JavaScript
• Flex-box
• CSS Grid
• SCSS mixins/variables/partials
• Excessive-order array strategies
• Primary OOP

It’s really useful you have got a superb understanding of HTML, CSS(SCSS), and JavaScript to construct or comply with together with this venture. Listed here are some useful assets to get you going or should you want a refresher:

HTML Fundamentals:
https://teamtreehouse.com/library/html-basics-2

SCSS/SASS Fundamentals:
https://teamtreehouse.com/library/sass-basics-2

JavaScript Fundamentals:
https://teamtreehouse.com/library/javascript-basics
JavaScript ideas used
https://teamtreehouse.com/library/javascript-numbers
https://teamtreehouse.com/library/javascript-objects-2
https://teamtreehouse.com/library/interacting-with-the-dom
https://teamtreehouse.com/library/javascript-and-the-dom-3
https://teamtreehouse.com/library/javascript-loops

Mission Overview

This easy calculator solely has a couple of sections. Crucial are invoice quantity part, tip quantity part and the cut up quantity part. We need to calculate the overall price of the invoice primarily based off the enter the person provides in every of those sections. Lets rapidly go over every part now.

Invoice Quantity

The invoice quantity part is fairly easy. It’s simply the overall price of the invoice. Let’s say I went out to eat some pizza with my pal Brandon. He and I cut up one massive pizza. That pizza prices a complete of $12.00. We’d write in $12.00 within the invoice quantity part.

By default, the calculator is about at a 5% tip. In order quickly as you set in $12.00 within the invoice quantity subject, you’ll see that the overall per particular person adjustments as nicely to mirror a 5% tip.

Tip Quantity

The tip quantity subject is to calculate the tip. By default, there are 3 tip proportion choices; 5, 10 and 15. (Stick round to the top of this text to see how we will simply add extra choices!) There may be additionally a button for the person to enter a customized tip. Let’s add a customized tip because the pizza was so scrumptious! I’ll add in $5.00.

If selecting a customized tip, this part will calculate the customized tip’s greenback quantity and add it to the invoice complete. If selecting one of many proportion values, this part will multiply the proportion into the invoice to get the overall tip quantity. Then it is going to add that to the invoice complete to get a complete worth.

After including in our customized $5.00 tip, it exhibits the overall being $17.00 per particular person. ($12.00 pizza and $5.00 tip)

Cut up Quantity

Lastly, we’ve the cut up quantity part. By default, the invoice is about for just one particular person paying however we’ve choices to separate the invoice as much as 6 methods! (This may be modified simply with one line of code, stick round to the top to learn how!) I’m going to pick out 2 in order that we will evenly cut up the invoice.

And there you have got it. Brandon and I’ll every pay $8.50. That is our invoice ($12.00) with an added $5.00 tip ($17.00). Cut up between 2 folks ($17.00 divided by 2) brings the overall per particular person to $8.50.

Code Group

As talked about above, there have been three principal sections for this calculator; invoice quantity, tip quantity, and cut up quantity. It solely is sensible to verify our code is structured to mirror that.

HTML Construction

SCSS partial naming conventions

Group of JavaScript Objects

Since this venture is fairly JavaScript intensive, let’s concentrate on how that’s structured.

Being that lots of this utility has default knowledge when the web page hundreds, I’ve a “UI” object inside every of those part objects. Right here’s what that appears like:

This method could also be overkill for such a small venture however it’s good to maintain issues organized. The great thing about code is you are able to do a lot of the identical issues in many various methods. So discover a method that works finest for you! Every of those UI objects include a construct technique. It may be accessed like this for instance:

Inside this construct technique, I write all of the logic to load the web page with the default knowledge.

As for occasions like when a person sorts in an quantity or selects a tip, I’ve arrange an object only for that.

You’ll discover a way (operate) for every of the forms of occasions we must be listening for. In addition to a pay attention technique. The pay attention technique calls all the above strategies so that each one we have to do is name the pay attention technique.

The one factor left to determine is calculating the overall, proper? So I arrange a operate to calculate the invoice:

Because the utility updates the invoice complete throughout many various occasions, this operate known as in all the pay attention strategies talked about above. This operate calculates the information and spits out the underside part for worth per particular person.

With a stable understanding of HTML, SCSS and JavaScript, I believe that is all the data you should take a stab at this venture! If you happen to try it and need assistance, don’t be shy, attain out to us in Slack! We’d love to assist out. Or perhaps you tried the venture and crushed it! Share your work with us and the remainder of our superior neighborhood of pupil builders. We’d like to see what you’ve provide you with!

Bonus Content material

Random Themes

What if I advised you this utility is already set as much as deal with a number of themes? Discover on the very prime of the app.js file, you’ll see an object for calculatorData. This holds the default knowledge for the calculator.

Setting calculatorData.randomThemeOnLoad to true will set off certainly one of 4 totally different colour choices for the calculator when the web page hundreds! That is really quite simple. We first take a look at if calculatorData.randomThemeOnLoad is true or false. If it’s true, we select a random colour from an array of colours and set that as the worth for a CSS variable in our kinds referred to as —main-theme. I encourage you to have a look via the code and see should you can’t determine how I did this! If you happen to’ve by no means heard of CSS variables, I counsel having a look on the MDN Docs:
https://developer.mozilla.org/en-US/docs/Internet/CSS/Using_CSS_custom_properties

Altering the default tipping and splitting choices

In the identical object we mentioned above, it’s best to see defaultTippingOptions. This mimics the choices displayed on the calculator when the web page hundreds. Strive including one or two new numbers in that array and checking your browser. Let’s add a 25% possibility and a 50% possibility!

That is completed by utilizing the information supplied on this array to construct out the UI as an alternative of hard-coding this within the HTML. Now the calculator could be up to date very simply if wanted! It’s also possible to change the default quantity of splitting choices out there by updating the information within the calculatorData object. Give it a attempt to see should you can’t change the quantity of splitting choices!

I hope you give this venture a go and share your work with the neighborhood! Have enjoyable and blissful coding!