Javascript Fun: Build a Tip Calculator! | Chris Dixon | Skillshare

Javascript Fun: Build a Tip Calculator!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (48m)
    • 1. Introduction

      1:45
    • 2. Creating the user interface with HTML

      9:56
    • 3. Styling with CSS

      12:38
    • 4. Capturing the user input

      6:54
    • 5. Displaying the captured data

      4:31
    • 6. Calculating and displaying the new values

      6:22
    • 7. Finishing touches

      4:08
    • 8. Thank you

      1:07
    • 9. Skillshare follow me video

      0:23
12 students are watching this class

About This Class

Welcome to the Javascript fun series! 

For web design or development, there is 3 must know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will build in this course will be a Javascript Tip Calculator.

All the required tools are free to download, I will be using the following:

Visual Studio Code Text Editor: https://code.visualstudio.com​

Chrome Web Browser: https://www.google.co.uk/chrome/browser

We begin by creating the user interface with HTML. The we apply styling using CSS. 

Then we add Javascript, this is where the real magic happens! 

 

You will learn things such as:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Functions
  • Event handlers
  • Manipulating the DOM
  • performing calculations and storing in variables
  • String concatenation
  • Converting values to a number
  • Setting the number of decimal places of a number
  • And much more!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!

Transcripts

1. Introduction: Welcome to the JavaScript fun series. My name is Chris, and I'm here to show you how to use HTML, CSS, and JavaScript and put them all together to build a fun and exciting project. The project which we'll build in this course is a JavaScript tip calculator. Tip calculators are a great way of beginning to get to grips with the fundamentals. We begin by creating the structure using HTML, after this move on to adding the styling and background images using CSS. Then we can get to work bringing our project life by using JavaScript and it's project, we can enter the total for the bill in the HTML inputs. We can then use to perform calculations then change the tip amount as a percentage, so we increase the sliders and its value is immediately updated with the new bill down at the bottom, also we can even have how many people we want to split the bill with to. This system recalculates the total bill and also the tip amounts per person too. You can see this immediately changed down the bottom. Along with the HTML structure and CSS styling will also be using JavaScript for manipulating the dome, storing information inside of variables, functions, event handling, performing calculations. Although this is a relatively simple project, beginners will get a lot of value after seeing how all the here fit together in fun projects. Thank you for your interest and let's get started. 2. Creating the user interface with HTML: Let's get straight to work by building our Tip calculator. I'm going to begin in the usual way by creating a new project, I'm going to add this folder onto the desktop. You can of course, add this folder anywhere on your computer which you prefer. I want to create a new folder and call this tip-calculator. Then we're going to open up this in my text editor and I want to use Visual Studio code for this project. You can of course use any text editor which you prefer, such as Sublime Text, Atom, Notepad++ or many more. Then I'm going to create an index page to begin with. I am going to press Command or Control N to create a new page. Then I want to save this immediately as our index.html within this Tip calculator folder and then hit Save. I'm going to use an Emmet plug-in for this course. Emmet is available for most popular text editors, and it comes pre-installed with Visual Studio code. You can type in shortcuts such as html:5, hit the tab. Then we immediately have a basic HTML structure, which takes a lot of time. Let's start by adding a title and I'm going to call mine a JavaScript Tip calculator. Then we can get to work down in the body section. First of all, I'm going to use a surrounding div, again with the Emmet commands just typing div and then hit the tab, this also completes the closing type two. I am going to give this an ID of container. We'll use this later on in the JavaScript and also the CSS to target this outer wrapper. If we take a look at the finished project, let's open up, the Tip calculator. We can see at the very top we've got a level one heading of Tip Calculator, horizontal rule, and then below it we've got some text and also some inputs. Let's begin with the first input of total bill and a level one heading, so h1 at the very top with the text or Tip Calculator, then we've got our horizontal rule, which you seen from the finished version. Then we can start with all first input, which is a type of text. We're going to surround this block with a div tag. The input can also have a label, and this is for the text, which you can see on the left-hand side. We've got the text of total bill, tip, and the number of people to split it between. The first label I'm going to add a text or Total Bill. We can also remove this, or actually hit too, we don't need that Then input, the type of text is fine. Also I want a placeholder, Placeholder attributes or enter your total bill. This is a text which appears inside of these inputs when there is no numbers entered. Back over to Visual Studio Code. The final attribute I'm going to add to this input is an ID of bill total. Again, a lot of these ideas will be used later on in the course when we come to select this input using JavaScript. Scrolling down, so just after this surrounding div for the inputs, let's create a second div. This is going to be the input for the tip amount. The input type is a range, so we can slide, these range from left to right to get different values. Within these div lets a add our label to begin. We could move the four attributes and other texts of tip, then our inputs. Just like we mentioned this will go to the type of range. This gives us a nice slider that we can move across the page. The value is going to be zero. We'll just keep that safe and let's open up our index page. Open up the folder, the index.html. There's our level one heading at the top. Our total bill with a text inputs. Then we've got our tip which is a range. If we refresh, we can see the value with zero is causes to appear at the starting position. If you were to change this, for example, to six, then refresh. It now appears six positions across. Just change it back to zero. Finally an ID. We want to add the ID for this to be the tipInput. That's our first two inputs are completed. Below this div. Let's add our third and final input div. This is going to be for the splits. Again, I will label, this time has the text of splits then in brackets I'm going to add the texts of number of people. Just below we can add our input again, which is the type of range, this is the slider this time, which is just here. We've got the type of range, the minimum value, I'm going to set this to be one, because it's always going to be one person or more. Split the bill between, the marks, we can set this to any value with ones. I'm going to add a value of 10, just to restrict the number of people to be 10 or less. You can, of course, how these higher it completely up to you. Again, just like before we want this value to be preset to the position of one person. Then finally an ID, I'm going to call this split inputs. That's our three div sections completed, the three inputs. Let's separate these off with horizontal line with the hr. Now, we can get to work with the output section. So up to this horizontal line, just here, we have our three inputs, and now I can just add our outputs sections, which outputs the new bill after the calculations and also the tip amount per person. This section is going to be contained within its own div. Makes sure that the closing div or this container is still in place at the very bottom. In fact this pushes further down make some space. We can add our surrounding div and then one more in size. This is going to be for the new bill section, this is going to be one div here and then a second div at the bottom. Just inside here we can add our label, then the text of new bill and this is going to be a new bill per person. Because later on this bill is going to be split between different amounts of people, so add a colon just after here. Then just after this label, I'm going to open up some span tags, and at the initial value of zero for the new bill. This will be manipulated later on by using JavaScript. So this label section, it just purely text, which we could do it in P tags or span or pretty much anything. The reason we've kept this as a label is to keep the styling consistence. So if look at the finished version, we can see that all the labels on the left-hand side all have the same amount of spacing to keep things more consistent. Now we just need to add the tip amount section, which is the final part of our user interface. Someone's copy this div section, paste this just below. All we need to do is change new bill to be the tip amount. The initial value can be kept as zero too. Let's take a look at how this is now looking. Hit the save, head over to the browser and hit refresh. That's the combined. The styling isn't looking very good at the moment because we haven't added any CSS All the main HTML content is now in place. We've got the heading at the top. We can add a value in the total bill, we can move the tip sliders and also the splits. Then we have the text at the bottom to display the new bill and the total amount. Come back in the next video, we'll add some CSS styling to make this look more like this final version. 3. Styling with CSS: In the last video, we successfully added the user interface for our Tip Calculator. Of course, it doesn't look too great at the moment, and it doesn't look a lot like our finished version just yet. This can all be achieved by adding CSS styling, which we're going to do in this video. To begin, I've added a background image just onto my desktop. Which is just this image here. You can, of course, use any image which you prefer. Just simply use an existing image or have a quick search on the Internet PyMOL. I call mine the background.jpg, and all I'm going to do is drag this inside of our project folder. Then open up Visual Studio Code and also Google Chrome to display the webpage in the browser. The CSS is going to be kept in its own separate file. Within the main project folder, I'm going to create a new file.I'm going to call this file the style.css. Then we can go back over to the index.html and link this right at the very top in the head section. Let's add our link for the stylesheet. The relationship is across the stylesheets. The href is being both added by Emmet. Again, if you are not using Emmet inside of your text editor, all you need to do is simply type out all the things that we see here. Because this is just within the main project folder, we can simply add style.css. We don't have any separate CSS folders to add inside the file path so give that save. Now let's get to work with our style.css, which I'm going to start with the body. I'm going to begin by setting the font size of the text to be slightly larger than normal by setting it to 1.2 ems. The weight for the body, we are going to set this to 100 percent initially. This is because we setting these styles for the smallest screens first. Let's set the styles to begin with for the mobile size, and then we can add a media query soon to add some additional changes for larger screens. Then we can use margin zero auto to align the content at the center. It's zero margin on the top and bottom, and then the left and right space will be taken up automatically. The letter spacing, we want to add 0.5 pixels just to give the text a little bit of spacing between each letter. Let's go to the browser and hit refresh. You can see some small differences just take effect there. Let's shrink this down to the smaller screen. I can get both on the same view there. Next up is our level one heading, which is the text of Tip Calculator at the top. Want to set the text-align of center, to place this inside the middle of the browser. Remember, we give all the content a ID of container. We can target this with the hash because it's an ID. Hash container. I'm going to start by adding a padding value of 1.5 ems. Refresh the browser and this will add some padding inside the container to give some space around the outside. Then we can add a background. I'm going to add a linear gradients, which is going to blend from one color to another. We can set the angle. I'm going to set mine at negative 45 degree separated by comma, we can add our value of the colors. The first one, I'm going to set an RGB color to be equal to the value of 245, 156, 127, and make sure these all separated by the comma. We can add a second color, which is for the color to blend to. This is also going to be an RGB color and inside the brackets. The first value I'm going to add 241, the green value of 89, for the blue 38. Let's just stretch the browser just a little bit further. We can see this all in one line. This linear gradients will blend our first color right through to the second color in a straight line at 45 degrees. Give that save, and let's see how this is looking. If we refresh, we can see our first color in the top left corner. At 45 degrees, it blends down to our second color in the bottom right, which is just a little bit lighter. Then I'm going to add a border-radius. We'll just start it here. We need to add a semicolon and then a border-radius. All ten pixels. This just adds a little curve onto the corner of the background. Let's shrink the text editor back down again. Then we can move down to the deep tags. Remember, we placed each one of these sections in its own div. We target these with the div selector. Let's make things a little bit more spaced out. I'm going to add the line-height property of 2.5 ems. Give that refresh. Now each individual div has a lot more height, and it looks a lot more spaced out. Then I'm going to get to work on the inputs. The first one is the type of text. Type equals text. This make sure that this will only apply to this first text input at the top. We won't apply it to the range inputs either. Inside here, let's add some font size. The font-size property of 1.1 ems. Also, let's align the text inside of the input into the center. Refresh. Now the font size is made the text a little bit bigger inside the inputs. Also, the text which will add in is aligned into the center. After these inputs, let's add some styling to the label and also all of the inputs. I'm going to set the width to be 100 percent. Give that save and then refresh. This will make all of the inputs, and also all the labels appear on their own separate line. This is just for the small screen on a mobile view. We'll change these for the larger screens inside of a media query next. Let's do that now. We can use the @media property to target the screen when the minimum width gets above 700 pixels. All of the styles which you add inside this media query will take effect when the browser is stretched to 700 pixels wide. Let's add our first one. We can target the body section again. Remember, up at the top we set the body to have a width of 100 percent. Well, on larger screens that will look a little bit too stretched. I'm going to change the width to be 60 percent. Here you can also add our backgrounds, and this can be the image which we added in at the start of the course. We can use the image URL. Just make sure that your image is stored inside the project at the same level as the index and the stylesheet. I called mine the background.jpg. Of course, change the name if yours is something different. No repeats to make sure that this is only placed in once and not repeated like a title. We can use the center to place the image on the center of the x and y-axis, and also set the position to be fixed. Next up, we can set the background-size to be a cover. A cover is a full size of the background. Give that save, and let's see how this is looking. If we refresh the browser and stretch it, so it's wider than 700 pixels, we begin to see some changes. The first one is the Tip Calculator, or the container section is now restricted to 60 percent of the width of the page. We also have our new background image just behind this, and it also looks like it's covering the full width of the page. That's good. I'm going to push this container section just away from the top of the page. Just a little bit by adding a margin. Add the margin just to the top of 20 pixels. Refresh, and now we have a little space at the top. Next up, I am going to add a opacity value to this orange container. This is how we can start to see the background image appear through ever so slightly. Let's use the hash value for the container. Inside here, we can set the opacity to be 0.9, save and then refresh. You can just by now start to see the wine glasses appear through the background. You can, of course, have a little play around with this value. Zero being fully transparent and one being a solid background color. After the container, we're going to set the label and the inputs. Remember, from before we set the label and inputs to be 100 percent of the width. This makes each item appear on its own separate line. We want this to appear more likely finished projects where we have this inline. To do this, we can set the display type to be inline-block. Just make sure that you still within these close-in brackets for the media query. The label and also the inputs, let's set the display type to be inline-block and then width to be a maximum value of 40 percent. Good. That's looking a lot better. We'll have 40 percent for the label and 40 percent for the input type. This will give us a little space to work with on the right-hand side later on this course when we display the value of this tip slider and also display it on the right-hand side. Finally, now we'll have a little bit more space to work with. On the larger screens, we're going to set the div to have a larger line-height of four ems and then refresh. That looks a lot better now on larger screens. We can see if we scroll down that the Tip Calculator is responsive. At 700 pixels, we have a breakpoints. Here we have the original styles, and then over 700 pixels, we have the styles which appear inside of the media query. That's good. Our Tip Calculator now looks a lot nicer. Next up, we'll get to work by adding some JavaScript to capture the user inputs. 4. Capturing the user input: In the last few videos, we created our Tip Calculator. We finished the user interface, which you can see here. We've also made it look a lot nicer by adding some CSS styling for layout positioning or colors, and also the background image. In this video, I'm going to add some functionality to our application, to allow us to capture the user inputs. The user input is the values which entered, for example, the total bill. We need to capture the number which the user enters. We're going to manipulate this and as the tip percentage, and also divided by how many people are paying the bill. Once you have all this information, we can then perform some calculations and output the values down at the bottom. Let's begin over any text editor by creating a script tag down at the bottom. If you go on to the index.html, right down at the bottom of the page, just above the closing body tag. Just here I'm going to add our script tags. Inside here we can add all the JavaScript for our project. The first thing we want to do is to add an event handler to the surrounding container. Remember that all the user input is surrounded with this div with the id "container". We can use JavaScript to select the container, and watch for any changes. Go down to the script tags, and let's target this container by using document.getElementById. This will search the whole web documents, and then find an Id. The Id we gave was the value of container. Make sure to add these inside the quotations. We can then add an event handler to watch for any changes. Let's add.onchange. We could also use a different event handler, such as onclick, onmouseover, onmouseleave, or any other event handler, which we like. However, onchange works good for this application because anytime a user uses the slider, all updates of value for the bill amount. We can then trigger a function just like this. Then inside this function body we can add some variables that away in JavaScript to store a value. We use a var keyword to start a variable, and give a name. I'm going to call this variable the bill. This bill is going to be used to store the value which the user enters in his input field here. To do that, we use document.getElementById once more. We scroll up inside the container. This is the input here which to enter your total bill. This has an Id of bill total. We can add this inside here. we'll select in the bill total with this line of code here. We can also grab the value, with.value. Every time the user updates this input field, we grab the value, and store it inside a variable called bill. To check this is working okay, we can add an alert, and all we're going to do is alert the value of bill. Give that a save, reload the browser. Now, every time we type a value inside here, press Enter, we should now get an alert with the value. Let's try one more 58. Okay, good. This now means we're successfully capturing the value of the user inputs. Let's delete this alert here. We also need to do the same for the tip amounts, and also for the split. This is done in a similar way by creating a variable, call this one the tip percent, as this is a value between zero and 100. We do the same as before. We select the full documents, which is the web page, and then get any element by its Id. The Id of this tip section. We can find which you gave before. The input with this type of range, and I'll give this an Id of "tip input". The tipInput inside here. Then you use.value to grab the value and store it inside this tipPercent variable. Just like before we can do a alert. This time with the tipPercent. Save that and reload the browser. Change the value of the tip slider. Okay, Number 1, 2, 3. Such is working fine. Let's try going right to the very end, and not a 100 percent. We have a value up to 100 percent. Backup the project. We can remove the alerts. Then we need to set up our third and final variable, and this time it's called the split. We're going to call the variable split, and use the document.getElementById. Let's just check the Id which you gave to this split. This input has an Id of splitInput. Inside the quotations are the splitInput inside here, and grab the value, and we can do the same once more. We can alert this split. Check this is working okay. Reload the browser and change the slider. This is in the middle, this is the value of five. Remember, we restricted the number of people to be 10. The last value should be ten. I'm going to remove this third alert and save that. This is good progress. We're now capturing the information entered by the user. We can now move on and use it in the next video, where we'll display this information on the screen. 5. Displaying the captured data: In the last video, we successfully captured the user input. We captured the total bill which is entered, the value of the tip slider, and also the value entered for the number of people to split it up between. Who grabbed these free values, install them inside of our script. Inside a variable is called bill, tip percent and split. In this video, I going to find some feedback to the user. Currently if the user slides across, that a tip or the splits as there no feedback on the screen to show the value of the tip or the split. So I'm going to use Javascript to display this on the right-hand side. So use can better see the tip funding selected or the splits. So to begin, we need a place to our politics. We need other HTML elements on the right-hand side of each one of these inputs. To do this, I'm going to add some span tags. So first of all, I'm going to go up to the tip section, which is this div here with the label of tip. Just after the input, I'm going to add some span tags. We can leave the contents of the span tags empty because we want to be at the end the value using Javascript. All we need to do is to target this with Javascript is add by ID. I'm going to call this the tip outputs. So we have the tip inputs, the input field, and the tip output, where we'll display the results. If we scroll down, still within this function. So let's create some space that's use document.getElementByID just like these span tags. This span tags have the id of tip outputs. Then to set the value of the span tags, we can set the innerHTML to be equal to the tip percent. Remember tip percent is the value stored inside of this variable here, which will ground in the last video, keep that saved and go over to the browser, hit refresh. Now, if we slide the tip slider we can now see the value on the right-hand side. So 29 percent, 52 right the way up to a 100 percent. Let's now do the same for the splits. Down at the bottom, we can do exactly the same. Let's start by adding some span tags. So if we look for the div with the label of splits, you stop with these inputs. We can do the same by adding the span tags. Again, leave them empty and just add an ID of splits outputs. Go down to the bottom and we can do the same with documents.getElementByID. The ID was splits outputs. We can set the innerHTML. This time to be equal to the split variable, which is this one just here. Save then reload. Okay, good that's goes all the way from one to ten people. This is all working fine. Just one final tips wants to make to the tip slider is are the percent symbol just after the number. We can easily do this by adding a string onto the end after tip percent. In Javascript, you can add the plus symbols on a string. A string is a character or a line of text, or in our case, just a single character, which is the percent symbol. Keep that save, reload. Now we have the percent symbol appear in just after the number. Okay great, so that's finished now for this video, we're now have some feedback to the user to show the tip value and also the number of people to split the bill between. Next up, we're going to use these values which HTML capture and then obtain the new bill and also the tip amount down at the bottom. 6. Calculating and displaying the new values: Let's go over to Visual Studio code and within the script and again still within this function body, we're going to start by adding a new variable just underneath the first three. So let's add a variable called tip volume, so this equal to our total bill which is stored here and then we need to multiply this by our tip percent. So inside the bracket we multiply the tip percent divided by 100 with the semicolon at the end and this will give us a value of the tip. Now we know how much the tip volume is, we need to add this to the total bill to display the new bill down at the very bottom, just here. So again, we're going to create a new variable and I'm going to call this the new bill each, as it's a new bill which is per person so this is going to be equal to, first of all we need to add to the original bill to the tip value which is created so now the new bill is a sum of the original bill plus the total tip. But because this is per person, we also need to divide these by the splits. So once we've done this, we need to add a ID to the outputs for the new bill. So currently we've got some span tags with a value of zero which is just here, we need to add an ID to this open span tag so locking in and update the value with JavaScript so let's add the new bill ID to the span tag and then we can output down at the bottom. So let's use document.getElementById, we can tag this new one of new bill. Just like before, we can set the innerHTML to be equal to the value of this new bill each so add the semicolon at the end. Now let's go over to the browser and check this is working, so let's add a value inside of that. If we look at the new bill at the bottom we could see there's a slight problem so I've entered a 100 and we've got a 1000. Let's just try one more so 97, you can see we've got 970. The problem is also still there if you move the tip value up too, you can see something isn't quite right, so the reason this is happening is over in the new bill each. Currently we're adding the bill to the tip value, so we can see on the screen that the bill is 97, which is the first two digits and the tip value is 9.7, which is the last two digits here. So rather than adding these to give us numbers, they are added together like a text string. To fix this, we need to go back over to our initial bill up at the top. I'm going to convert this to be a number and then inside the brackets we're going to add up a full document.getElementById, add the closing bracket here and give the same. So the reason this isn't a number initially is because when you're using a text input, it's now being converted into a number would now recalculate these correctly, so now if we save, then reload, and set the value of 65, we see the new bill is correct and let's move up to 10 percent which is number 650, is that work still fine? That's 7150, that looks a lot better now we have converted this to a number by using a number function. Now we need to go down to the very bottom and calculate the tip per person. We already have all the information we need to do this, so just below the new bill each I want to create a new variable called tip each, this is going to be straightforward. All we need to do is divide the tip value which you are to have here by the number of people, which is split, so now the value of the tip per person is stored into each. Let's go ahead and do the same as before by adding a new ID to this tip amount. The ID, I'm going to call this the tip each and in fact we could remove the zeros. We don't need these anymore, these will be replaced with the innerHTML, which we'll add down here then we can output this tip value to the screen. Just like before with document.getElementById, the new ID which are entered was tip each. Then set the innerHTML to be equal to the new variable which you just added of tip each with a semicolon at the end. Give that a save and test it over in the browser. So reload, enter a bill amount, so put the new bill correctly. We don't have any tip at the moment until add a value to the slider so let's add 10 percent onto that, which is an amount of 560. Let's go all the way up to 20 and that's correct as well as 1120, which is good and the value is still correct for the new total bill per person. Let's divide this by two people, so now the new bill is 3360 each with a tip amount of 560 each too. So that's pretty much it for the functionality of our tip calculator, everything is now working correctly. So in the next video which is also the last we'll add, some finishing touches to this app. So I'll see you there. 7. Finishing touches: We're going to finish off this project by adding a few finishing touches. The first thing we noticed in the last video is when we type in a value into the total bill, certain values when adding a tip lead to a lot of decimal places. We can also add a currency symbol in before all of these values too. So let's get to work, by adding these in. Let's make this a little bit bigger, and close the sidebar. So we can restrict the number of decimal places we want to output, by using the JavaScript to fixed method. This is easily added to our output, right down at the bottom of our scripts. So we need to type in a newBillEach, and also the tipEach, which is a two amplitude values down at the bottom. We can add the JavaScript toFixed method on to the entities. Inside here, we can set the number of decimal places with a number, with the semicolon at the end. We can do exactly the same for tipEach. We can use.toFixed. Back towards the project we can add a new value inside it here, and then start going through the tip percentage. We can see as we go up for the tips, we don't have any long numbers appearing on the screen anymore, let's just try this with the split too. Yes that looks all fine. We can also add a currency symbol before these numbers too. This is also simple enough to add in the outputs. When it's due this open up the quotations to add a string of text or in our case, we can add a symbol, such as a currency symbol just like this. Then use the plus just like we've done before to add this. Just before our newBillEach, we can do the same down to the bottom too, open up the string, add in a currency symbol, and then add this to our tip. Give that a save. Reload the browser, add value, and there we go. Now we have our currency symbol placed before the number down at the bottom. Everything still seems to be working fine too. The last thing I want to do to finish off this project and make our files a little bit more maintainable, is to create a new script file and move all the contents of our script here, into its own separate file. The first thing I want to do is create a new file. Let's add a new file at the root of our project and we're going to call this the script.js and hit ''Enter''. Make sure this is the same level as the index page inside the project. Then if you go over to the index, I'm going to cut all the contents between our script tags. It's basically the whole of this function. So Command or CTRL+X, to coat all the contents, make sure that the script tags is in place. Place these in their own separate file and then save. Then we can add these back in inside the opening script tag, by adding these source attributes. This is in the root to the project, so we can simply type script.js, save. Go to the browser and refresh, and let's test, this is this working okay. Add in your bill, and everything it still works as it should, but now we've got our code separated into its own separate file. This keeps all file sizes down and makes our code more readable and maintainable. Congratulations, you've now reached the end of his Tip Calculator project. I hope everything went well for you and you've enjoyed building this project. 8. Thank you: Congratulations on reaching the end of this course. I hope this course will give you a better idea of how HTML, CSS, and JavaScript can fit together to create a useful and fun project. We began by creating the user interface with HTML, where we added our input fields, our range sliders, and the text with different sections. Then we moved on to styling the project by Unison colors, space-in, layout, a background image, along with some adjustments for different screen sizes. We then introduced JavaScript to capture all of the user's input, such as the bill amount entered, the required tip percentage, and also the number of people split the bill between. We looked at a few other useful techniques, such as restricting the number of decimal places and also converting values to numbers. Thank you for taking this course. I hope you've learned some new skills, and enjoyed building these projects. 9. Skillshare follow me video: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates, and also to be informed of any new classes as they become available. Thank you once again. Good luck. Hopefully, I'll see you again in a future class.