JavaScript Tip Calculator Overview

[MUSIC] 0:00 Hey, what's up? 0:09 My name's Dustin, and I'm a developer here at Treehouse. 0:09 Have you ever found yourself at a restaurant with maybe your friends or 0:13 family and wanted to split the bill? 0:17 Well, what if I told you building out an application that can handle that is 0:19 actually pretty simple? 0:22 With just HTML, CSS, and JavaScript, 0:23 you can build out an application that can take in your bill's total. 0:26 You could choose between a 5, 10, or 15% tip. 0:31 If neither of those tips work for you, you can actually set up your own custom tip. 0:36 And this bottom section here lets you split the bill. 0:42 So you can either split the bill by yourself, 0:44 with a friend, a couple of friends, or maybe your whole family. 0:47 Let's take a look at the code. 0:52 Depending on where you're watching this, check out the teachers notes or 0:54 description for a link to our GitHub. 0:58 Once you're there, you should see a page pretty similar to this. 1:00 The README will give you instructions on how to download this project to your 1:04 machine. 1:08 But if you're following along, you can just follow what I do. 1:08 You wanna hit this button at the top right called Code. 1:11 In the drop down, you wanna hit this button here. 1:15 It's gonna copy the link to the project. 1:17 Next, open up your terminal and 1:21 navigate to the section of your computer where you'd like to store the project. 1:22 Personally, I'm going to throw this on my desktop, so cd desktop. 1:26 Next you wanna git clone and then paste in that link. 1:32 By default, this project is gonna be called JavaScript-tip-calculator. 1:36 If you like that name and you're cool with that, you can press Enter. 1:42 If not, you can type in something else, like project. 1:46 I like the name, so I'm gonna keep it as is, and I'm gonna hit Enter. 1:49 Once you've cloned the project, 1:54 you can either drag the project file to your text editor. 1:56 Or if you're using Visual Studio Code, you could just hop into the project, 1:59 like cd javascript-tip-calculator, and then you can type in code. 2:07 Awesome, let's dive into the code. 2:15 So I wanna mention that this project uses a gulp file to watch for 2:19 changes to any of the files inside of the frontend folder. 2:23 So with that being said, you're gonna need to download and install NPM and node. 2:27 Now, I'm not gonna get into how this gulp file is built or 2:32 anything dealing with node or NPM. 2:35 So if none of that makes sense to you yet, don't worry. 2:37 Once it's installed, you'll need to go back to your terminal and 2:41 make sure you're in the project directory and type in npm start. 2:45 And this is gonna download all your project's dependencies and 2:50 open it up in your Web browser. 2:53 It should open up on port 3000. 2:55 Great, let's take a look at the UI a little bit. 2:58 We'll notice that there's these main sections for Bill Amount, Tip Amount, and 3:03 how many people are paying. 3:07 And then you have your output at the bottom. 3:10 Let's take a look at the JavaScript and see how that looks. 3:12 So all the files are going to be in the frontend folder and 3:17 then in the src folder. 3:20 In here you'll have your images, scripts and styles. 3:23 For this video, we're just gonna briefly go over the scripts. 3:26 So drop down this, and you'll have the app.js file, click that. 3:29 The first thing you'll notice in here is an object for calculatorData. 3:37 It's gonna have a few default values in here, and 3:42 this is what sets up the project when the page initially loads 3:44 Down here for defaultTippingOptions, you'll see 5, 10, and 15. 3:50 And this mimics the default tipping options we have in the UI. 3:55 Let's go ahead and add a couple more, let's do a 25 and a 50. 3:59 Let's hit Save and check the browser and you'll see it here. 4:03 If we go in here and add $150 bill and we'll do a 50% tip, 4:11 you'll notice that these also still work. 4:15 Now, this is done because we coded this part through the JavaScript instead of 4:19 hard coding it through the HTML. 4:23 Let's take these back out, Save. 4:27 And you'll also notice this defaultSplitTotal, and it's set to 6. 4:31 This is how many options we can split the bill. 4:36 So if you would like to set that to something like maybe 12, 4:40 let's do that and check the browser. 4:44 Cool, now we have 12 options, pretty neat. 4:48 Another thing you might have noticed is this randomThemeOnLoad, and 4:54 it's set to false. 4:57 Let's set that to true and see what happens. 4:59 All right, let's take a look at the browser, and 5:03 you'll notice a whole 'nother color theme. 5:06 If we reload, you'll see another color. 5:08 Let's take a look at why this is happening. 5:11 On line 22, you'll see this if statement that basically checks 5:15 calculatorData.randomThemeOnLoad. 5:19 So when this is set to true, this code block will run. 5:23 And what this is is we set up an array of colors, 5:27 we get a random value from that array. 5:30 And then we set this custom CSS variable called main-theme that I set in 5:34 the styles to one of those colors randomly when the page loads, pretty simple. 5:39 Let's go ahead and set this back to 6, and 5:45 we'll turn the automatic themes to false. 5:49 Great, now let's take a look at the UI a little bit. 5:54 Remember earlier I mentioned the three main sections, the billTotal, 6:01 the TipOptions, and then the splitOptions? 6:05 So naturally, I set up an object for each to keep things organized. 6:08 You'll notice that each one of these has a UI object inside with a build method. 6:14 And basically what this does is it builds the page on load with data from 6:19 the calculatorData object. 6:23 Now, setting it up with another object and 6:25 the method inside of that might be a little overkill for such a small project. 6:28 But it's pretty good to keep things organized as you work. 6:31 And like I said, each of these will have the same things 6:35 Now let's scroll up and take a look at this toCalculate object. 6:49 In here you'll find the bill's initial value, 6:53 which is set to 0 when the page loads, the initial tip, which is 5%, 6:56 The initial split, which is set to 1 when the page loads. 7:03 And the customTip and customTipValue, which by default there is no custom tip 7:07 set, so it's set to false with a value of 0. 7:12 At different times throughout the application, 7:17 these totals will get updated and calculated. 7:19 So let's take a look at how that gets handled. 7:21 On line 99, you'll find a function for calculateBill, and 7:24 you'll see these variables in here. 7:28 This variable bill is scoped to this function, but 7:32 we are updating the toCalculate.bill as well as the toCalculate.split. 7:35 Basically, this function here will check for If we're using a custom tip or 7:42 we're using a percentage tip. 7:46 And then it will calculate the total bill based off of the bill, 7:48 the tip, and the split and we'll get a final output. 7:53 Now let's take a look at how we set up the UI when the page loads as well as 8:05 listened for events, such as typing in a price or clicking a tip or a split option. 8:11 So if we come to line 132 and we look at this object for the application, 8:18 you'll see a build method inside. 8:22 And in there, you'll see those build methods inside the UI object for 8:26 each of these sections that we went over earlier. 8:29 Basically, this is building the UI, 8:32 so at some point we'll need to call application.build. 8:35 And then we have this events object, and in here we have a bunch of methods. 8:40 So inside of the billTotal method, we are listening for 8:45 all the events for updating the billTotal. 8:49 And the same goes for tipOptions, the customTip, 8:53 confirming your CustomTip, and the splitOptions. 8:56 And then you'll see this listen method down here. 9:00 Basically what this listen method does is it calls each one of these so 9:02 that we don't have to call them later on. 9:06 So application.events.billTotal, tipOptions, customTip, 9:09 splitOptions, and confirmCustomTip. 9:14 So all we need to do to listen for all of these is just call the listen method once. 9:19 So at the very bottom of the application, you'll see application.build, 9:26 where we build the UI. 9:29 And then application.events.listen, where we listen for all the events for 9:30 the application. 9:35 While this isn't meant to be a step-by-step guide on how to build this 9:37 project, I think I gave you a good enough overview for you to tackle it yourself. 9:40 I strongly encourage you to read our blog post about this at 9:45 teamtreehouse.com/blog and give this project a go. 9:49 You can reach out to us in Slack if you need any help. 9:53 Or if you absolutely crushed the project and you wanna share your results with us, 9:55 feel free to post it in one of the Slack channels. 10:00 Also, make sure to check out the teachers notes or description for 10:03 links to resources on our website for 10:06 you to learn this if you're uncomfortable with some of the topics that we discussed. 10:08 Until next time, have fun, and happy coding 10:13

You need to sign up for Treehouse in order to set up Workspace

Sign up