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
21 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 job Script Flynn. Serious. My name is Chris, and I'm here to show you how to use hate schimmel, CSS and JavaScript and put them all together to build a phone on exciting project. The project which will build in this course, is a challenge. Gripped tip calculator Tip calculators are a great way for beginning to get to grips with the fundamentals. We begin by quoting the structure using hate smell After this move on to add in the style in background images using CSS, then we can get to work bringing out project to life by using JavaScript in this project for can enter the total for the build in the Haight remote inputs we can then uses to perform calculations change the tip amount as a percentage would increase the sliders and its value is immediately updated with the new bill down to the bottom also could even know how many people we want to split the bill with two. The summary calculates the total bill and also the tip violence per person to you can see this immediately change down the bottom along with the hate tomorrow structure. Our CSS stolen will also be using John's group for manipulating the dawn. Storing information inside of variables functions even 100 on performing calculations. Although this is a relatively simple project, beginners will get a lot of value out to see how all the pieces fit together in a fun project. So thank you for your interest. Let's get started. 2. Creating the user interface with HTML: So let's get straight to work by a building. Our tip calculator. I'm going to begin in the usual way by creating new project on guns. Aren't this folder onto the desktop? You can, of course, at this folder anywhere on your computer. Would you prefer someone's creating new folder and call this tip? I've been calculator and then I'm going to open up this in my tax editor. I want to use a visual studio cold for this project. You can, of course, use any text editor. Would you prefer such sublime text atom? No populist plus home anymore. Don't once creating indexed age to begin with. So once press command or control end to create new page, then what? Say this immediately as our index don't hate Kimmel within this tip calculated folder and then hit Save. So I'm going to use in the Emirates looking for this course. Emmett is available for most popular text editors, and it comes preinstalled with visual studio code, so could type in short cuts such as HTML cold on five. It's up, and then we immediately are a basic HTML structure, which shows is a lot of time so that start by any title. I'm going to call my knee JavaScript chip calculator and then we can get to work down in the body section. First of all, I'm going to use a surrounding div a game with the Emmett Commons. Just type in Div and in the tub on this auto completes the closing type two. Don't give this a I d off container when we use this later on in the Java script on also the CSS the time of this outer rapper. If we take a look at the finished project, let's open up the tip calculator. We can see at the very top of got a level one heading off tip calculator horizontal rule and then blow these. We've got some text on also some inputs. So let's begin with the first import off total bill on the level one head in. So hate one at the very top with the text off tip calculator. And then we got our horizontal rule which is seen from the finished version. They were gonna start with all first input, which is the type of text I'm going to surround. This block with 18 times input can also have a label and this is for the text which you can see on the left inside. So we got the text of total bill tip on the number of people to split it between. So the first label I'm going to art the text off total bill. I'm also this or actually to We don't need that. And then input type of text is fine. Also wants a placeholder, the place all the attributes off. Enter your total bill and this is a text which appears inside off this import when is know what numbers entered back of individual studio cold? The final attributed going to rt to this import is an I D Oh, Bill Total again. A lot of these ideas will be used later on in the course when you come to select this import using JavaScript so scrolling down. So just after this surrounding div for the inputs, let's create a second def. This is going to be the input for the tip amount. So the import type is a range so inside this range from left to right to get different values. So it in this day of let's aren't I will able to begin. We could move the fall attributes another text or tip. Then our inputs. Just like we mentioned this. You got ta type of range. This gives us that nice liner that we can move across the page. You found you, the volume was going to be zero. So just give that saving. Then it's open up our index page. So open up the folder, the index tohno. So there's our level one heading up talk. I would total bill with the text input and then we've got our tip, which is arranged. If we refresh, we consider the value of zero This causes to appear at the starting position before words changes for example, to six and refresh it now appears six positions across. It just changed back to zero. Okay, Finally, an I d want at the idea for this one to be the tip input. So that's all 1st 2 inputs or completed below this div that's on our third and final input dip and this is going to be for the split. So again I will label this time has the text or split and in brackets I'm going to add a text off number off people and just below looking out our input again, which is the type off range. So this is the slide of this time. Would you just here. So the type of range, the minimum, the minimum value. I'm going to set this to be born because it's always going to be one person on more split the bill between the marks would concept is to any of only which wants. I'm going to add a value of 10 just to restrict the number of people to be 10 or less. You kind of course, have this higher. It's completely up to you again, just like before. We want this pond you to be preset to the position off one but one person and then finally an i. D. I want to call this split input. OK, so that's our three Dave sections completed the free inputs so that separate. These offered a horizontal line with hate are and now get to work with the output section. So up to this horizontal line just here we have our free imports on now, I could just aren't our output sections which outputs the new bill. After the calculations on also the tip amount for a person. So this section is going to be contained within its own give. Make sure that the clothes and give all this container is still in place at the very bottom . In fact, of his pushes, further downs makes in space. So tonight I was surrounding Dev and then one more inside on This is going to be for the new bill section. So this is going to be one give here and then a second gear, but the bottom So just inside here we can aren't our label and then the text off new bill. And this is going to the new gold per person because later on, this bill is going to be split between different amounts of people. So Atacama just after here, then just after his label, I'm going to open up some span tax and at the initial bunny or two year old for the new bill. This will be manipulated later on by using JavaScript. So this label section is just purely text. It's completely in P tanks or spun Well, pretty much anything. The reason we've kept this as a label is to keep the East Island consistent. So if you look at the finished version. Well conceived. All the labels on the left hand side all have the same amount of space in to keep things more consistent. So now we just needs onto the Tip Amount section, which is a final part of the user interface. Someone's copy the stiff section pace in just below. What we need to do is change new bill to be the tip amount. The initial body you can be kept out zero to. Let's take a look at how this is no looking. Give that save head over to the browser and hit Refresh. Okay, that's looking fine. The styling isn't looking very good at the moment because we haven't added any CSS. All the main hate email content is now in place. We've got the heading at the top. We can ask finally, you In a total bill, we can move the tip sliders on also the splits, and then we have the text of the bottom to display the new bill on the total amount. So 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 was successfully added the use in space or tip calculator. Of course, it doesn't look too great at the moment. And it doesn't look a lot like our finish version just to you. This can all be achieved by adding it CSS style, Um, which we're going to do in this video. So to begin, I've I did a background image just onto my desktop, which is just this image here. You kind, of course, use any image which you prefer, so just simply use an existing image. All have a quick search on the Internet. Beimel. I called my neat background about J. Peg and I'm going to do is grunt this inside of our project folder, then open in visual studio code on also Google Chrome display the webpage in the browser. So the CSS is going to be kept in it's own separate file. So we didn't main Project folder once creating new file. I'm gonna call this file the style. Don't CSS never go back over to the index dot html and link this right at the very top in the head section. Let's add a link for the style sheet. So the relationship is, of course, the style sheet to be hatred. He's being both added by Emmet again. If you don't use an Emirates inside of your text editor or I need to do is simply type out all the things that we see here because this is just within. The main project folder will get to play hard style thought. CSS. We don't have any separate CSS folders inside the file path, so give us a now Let's get to work with our style Nazi SS, which I'm going to start with the body. I'm going to begin by setting the font size off the text to be slightly larger than normal , I said if the 1.2 m's the wait for the body were going to set this 200% initially. This is because we're setting these styles for the smaller screens first. So 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 of the center, so it's zero margin on the top and bottom and then the left of minds base will be taken up automatically. The letter spacing What are no 0.5 pixels just to give the tax a little bit of space in between each letter? So that's cool. It's the browser and hit refresh, so you can see some small differences just take effect that that shrink is down to the smaller screen. I get both on the same view there. Okay, so next up is a level one heading, which is a text off chip calculator at the top one. Is that the text line or censor places inside of the middle of the browser? Remember, give all the content a idea of container so would target this with the hush, because it's an I D. So hash container. So I'm gonna start my audience party in value off 1.5 ends. Refresh your browser and this one. Answer. Pardon inside of the container to give some space around the outside American Idol backgrounds. John guns aren't a linear radiance, which is going to blend from one color to another. We could set the angle. I'm going to set mine at negative 45 degree. Is that right? By a common conard. I will Bernie you off the coolers. So the 1st 1 of one start an RGB color to be equal to the bone. You of 245 156 1 to 7. Make sure these all separated by the comma looking at a second color, which is for the color to blend, too. This is also going to be an RGB color on inside of the brackets. The first volume got to our two for one the green value of 89 for the blue 38 that you're stretched the browser just a little bit further. So consider this old online. So this linear Grady INTs will blend our first color right through to the second color in a straight line at 45 degrees. So give us a even let's see how this is looking. It would refresh. We can see our first caller in the top left corner 45 degrees. It blends down to our second call up in the bottom right, which is just a little bit lighter, then, on guns on the border radius. Just after here, we need to add a semicolon and then a border radius all 10 pixels. This just adds a little curve onto the corner off the background. It's not shrink. It's excited to back down the game. Chemical moved down to the dip tanks. Member placed each one of these sections in its own dip so we could talk about this with the debt selector to make things a little bit more spaced out and go to art. That allowing high property off 2.5 EMS gives out a fresh now. Each individual, dear, was a lot more height, and it looks a lot more spaced out. They don't want to get to work on the input. The 1st 1 is the type of text. The type equals text, and let's make sure that this will only apply to this first text imports at the top so we won't apply into the range inputs Eva inside here, that's aren't some font size upon size property of one point born ends on. Also, that's a line the text inside of the import into the sensor, so refresh. So now the font size has made the text a little bigger inside the import and also the text with your audience is aligned into the center. After this input, let's on some style into the label. On also all of the inputs, I'm going to set the width to be 100%. Give that save and then fresh, and 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 the more about view, well, changes for the large screens inside of a media Quickly. Next, let's do that. No, we can use the art media property to target the screen when the minimum work gets above 700 pixels. So all the styles which are inside it's maybe a query. We'll take effect when the browser is stretched to 700 pixels wide. So that's our 1st 1 We could talk about the body section again. Remember about the top. We said the body have a week for 100% Well on large screens that will look a little bit too stretched, so I'm going to change the way to be 60%. He We can also add out backgrounds, and this could be the image which were ended in at the start of the course. We can use the image you are wrote. Just make sure that your images stored inside the project at the same level as the index on the style sheet. So I called my neath Macron's Jason. Of course, strange. The name If yours is something different. No repeat to make sure that this is only placed in months and not repeated like a title looking use center to place the image on the center of the X and Y axis on also suddenly position to be fixed. Next, we can set the background size to be Cooper, so it was a full size of the background. Give that saving. 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. So the 1st 1 is the tip calculator. What the container section is now restricted to 60% off the width of the page. We also have our new background image. Just behind this on the also looks like it's covering the full weight for the page. That's good. I'm going to push this container section and just away from the top of the page, just a little bit by a margin, but at the margin just to the top off 20 pixels. Refresh and know how the little space at the top. Next up, I'm going to earn a a positive value to this orange container. This is so we can start to see the background image appeared or Prue ever so slightly. So let's use the hush phone you or the container inside here. We could set the A pass itI to be nor 0.9 save and then brush, and you can just amount start to see the wine glasses appear through the backgrounds. You can, of course, have a little play around with this value zero being fully transparent and warn being a solid backroom color. After the container, we're going to set the label and the input. So remember from before we set the label and input to be born 100% of the weight, this makes each item API on its own separate line. We want this to appear more like the finished project where we have these in line. To do this, we can set the display type to be in line block and just make sure that you're still within it is closing bracket the media query. So the label and also the import I said the display time to be in line block and then with to be a maximum value of 40% good, such looking a lot better. So we have 42% for the label on 4% for the input type. This will give us a little space to work with on the right inside later on. In this course, when we display the value of this tip slider and also the split on the right inside finally know what have a little bit more space to work with on the largest greens going to set the Dev have a larger line height 04 ends. I'm not a fresh and that looks a lot better now on largish means. So I could see if we scroll down that the tip calculator is responsive. So what? 700 pixels have a break points. So here we have the original styles and then over 700 pixels have the styles which appear inside of the media query. That's good. Our chip calculator now looks a lot nicer. Next up will get to work by islands and Java script to capture the user input 4. Capturing the user input: in the last few videos Who created our tip calculator? Who finished the user interface, which you can see here. We've also made it look a lot nicer by at insulin that CSS stolen what layout position in all colors on also lead macron image and this video We're going to add some functionality to our application to announce to capture the user input. So the user input is the values which entered, for example, little bill when it captured the number which they use enters. So looking at Munich like this and as the 2% I'm also divided by how many people are paying the bill. Once you have all this information, we can then perform some calculations on our ports, the values down to the bottom. So let's begin over in the text editor by creating script, I'm telling the bottom. So if I go with the index dot html right down to the bottom of the page just above the closing body tongue, you see, uh, I'm going to add I was script tanks inside here looking at all the javascript for all project. So the first thing you want to do is tow aren't eight event handler to the surrounding container. Remember that all the user input is surrounded with this Dave. With the idea of container, we can use JavaScript to select the container off watch for any changes, so go down to the script times. Let's target this container by using documents. Doors get elements. My i. D. This will serves the whole of the Web documents and then find an i. D. The are you would gave was the value of container. Make sure it's obvious inside the quotations. Well, can then aren't any event handler tow watch for any changes. So let's are don't on change. You could also use a different event handler such as on Click on most Over on My Sleeve or any other event handler which, like however on change, works good for this application because any time a user uses the slider, all states a value for the bill amount broken and trigger function just like this, and then inside its function body, we can add some variables variables away in javascript to store a bomb. You we use a bar keyword to start available. Don't give it a name. I'm going to call this veritable the bill on this bill is going to be used to store the value which the user enters in this import field here. So to do that, we use documents dot Get elements by i d. Once more selfish roller inside the container. This is import your forces Enter your total bill. This has an idea off Bill Total So can on this inside of here. So now we're selecting the bill total. With this line of code here, we can also grant the value we have got value. So every time the user update, this input field would grab the value and story inside a variable called Bill Project. This is working. Okay. Well, Conard and alert Andi over going to do is alert the value off Bill. So give us a reload the browser. So now every time we type of Bonnie inside of here, Chris, answer. You should know getting alert with the value. That's trying one more. 58. Okay, good. So this no means was successfully capturing the money off the use input. Let's delete this alert here. We also need to do the same for the tip amount on Also for the split this is doing in a similar way by Quite variable called It's on the tip. The sense this is a value between 01 hundreds. We do the same as before we select the full documents, which is a Web page, and then get an elements by its idee the i d off the tip section we could find which you gave before. So it was input with type of range. I would give this an I d off tip input allies tip input inside of here. And then he was Don't bother you to grab the value and store it inside this tip sent variable Just like for mercan. Do a alert this time with the 2% say that and reload the browser change of only off the tip slider. Okay, so number one to three. Yes, that's working Phone that strike on right to the very ends and that's 100%. So we have a value of 200% Mike. Oh, it's the project. We can remove the alert and then we need so whole third and final variable. And this time it's for these splits. I'm gonna call the valuable split and use the document dot gets element by I d. That's just check the idea which we gave to the split. So this import as an i d off split input. And so the quotations are split import insider here and grabbed the ball. You I could do the same once more. We can alert the split check. This is working. Okay. Reload the browns air and changes slider. So this is in the middle. So this is a Bonnie with five. Remember, we restricted the number of people to be 10. So the last for me, you should be 10. You could remove his third alert and say that. So this is good progress. We're now capturing the information entered by the user. I'm looking no move on and uses in the next video. Where will display this information on the screen? 5. Displaying the captured data: in the last video was successfully captured. The use input. We captured the total bill, which is entered the value of the tips liner and also the von you entered for the number of people to split a bill between. We'll grab these free values and stored them inside of all script inside of valuables called Phil 2% on Split In this video, I'm going to find some feedback to the user. Currently, if the user slides across for the tip or the split, there's currently no feedback on the screen to show the volume off the tip of the split. So I'm going to use JavaScript to display this on the right onside. So they used in better see the tip on you selected or the split so to the game, we need a place to put This we needs are to hate schimmel elements or the right inside off . Each one of these inputs to do it is going to add some spun tags. So first of all, I'm going to go up to the tip section, which is this def here with the label of tip. Just after the import, I'm going to add some span tax. We can leave the contents of the span tykes empty because we want to be at the end of irony , you using JavaScript or we need to do to target this with JavaScript is art A i d. I'm going to call this the tick output. So have the tip input the input field on the tip output. Where will display the results? If we scroll down still wouldn't dysfunction. So that's crazy In space that's used documents. God get element by i d just like thes fund tanks. These fun times have the i d off TiVo put then to set the value of the Montagnards. Who can set the inner hate Shimo to be equal to the 2%. Remember, 2% is the value stored inside its variable here, which we grabbed in the last video. Give that saving and gold to the browser hit refresh And now we slide the tips liner. Great. We can now see the value on the right inside. So 29% 52 right the way up to 100%. Let's now do the same for the split down at the bottom looking do exactly the same. Let's start by other in terms span tags. So if you look for the deer with the label off split just after this import, we could do the same by adding the span tags again, leaving them empty and just adding a I d oh, split output. I don't see the bottom. We could do the same. We have documents, not get element by i d the Eid iwas split up Put We can set the inner hates tomorrow, this time to be equal to the split variable Which is this one? Just here. Save then reload. Okay, good stuff goes all the way from one fruits 10 people. This is all work and fine. Just one final touch I want to make to the tip slider. It's are the percent symbol just after the number. We can either do this by adding a string onto the end after tick percents in John's group took an artery plus symbols. Our strength. The string is a character or line of text or, in our case, just a single character, which is the percent symbol. Give that save reload and now have the percent symbol appear in just after the number. Okay, great so that's finished. Now for this video, we're now house and feedback to the user to show the tip value on also the number of people to split the bill. Between next up, we're going to use these values which were now capture and then update the new bill on also the tip amount down to the bottom. 6. Calculating and displaying the new values: Let's go over to visual studio code on within the script and again, still, within its function in the body, we're going to start by Anthony New variable just underneath the 1st 3 That's on a variable called tip volume. So the sequel to our total bill, which is stored here and then we need to multiply this by our tip percents. So inside it brought fear to multiply. The tip sends Do you find it by 100 with some colon at the end, and this will give us a value off 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 new valuable on. I'm gonna call this the new bill each as it's a new bill which is per person. So this is going to be equal to. But still we need to, after the original bill to the tip value which is created. So now the new bill is a psalm off the original bill, plus the toll tip. But because this is per person, we also need to divide in this by the splits. Okay, So once we don't, this Juanito adds a i d to the output for the new bill. So Kourtney got some spun tanks. The value of zero, which is just here. We need to add an i d to this opening span tag. So what can then update the value with Java script? So what are the new bill? I d to response og and then we can all put down the bottom. So she was documents door to get element by i d. We can target this new one off new bill just like before we can set the inner hates Imo to the equal to the bone. You off this new bill each so with semicolon at the end. And now let's go over to the browser and check. This is working. Okay, let's add of value inside of there on If we look at the new bill at the bottom, we could see there's a slight problem. So vented hundreds. I'm Michel thousands that just tribal moss on 97 you can see we've got 970. The problem is also still that if we move the tip value up to you can see something isn't quite right. So the reason this is happening is over any new bill each. Currently, we're adding the bill to the tip value so you can see on the screen that the bill is 97 which is the 1st 2 digits on a tip. Value is 9.7, which is the last year Did you tear so rather than other needs to give us numbers that you need together like a text string? To fix this, we need to go back over to our initial bill about the top, our money to convert this to be a number. And then inside the brackets, we're gonna end up with full document dot gets element by I d. But the closing bracket here and give the same So the reason this isn't a number initially because we're using a text input. It's now by convert this to a number when no re calculate these correctly, it's not to save, then reload. That's at a value of 65. We see the new bill is correct. Let me walk to 10% which is another 6 50 that works. I'll find that 71 50. That looks a lot better now. We have converted this to a number by using the number function. Now we need to go down to the very bottom and calculate the tip of a person. We also have all the information we need to do this. So just below the new bill, each gonna create new available called tip each. This is going to be straightforward. Already to do is divide the tip value, which would have here by the number of people, which is Smith. So now the value off the tip per person be stored into beach. Let's go ahead and do the same as before. By adding a new i d to this tape amount. The idea once called this the tip each on the fact we can remove the zeros. We don't need these anymore. Easily replaced with the inner hates mole which are down here. Democrats are put this tip value to the screen just like before with documents dot get elements by i d. The new idea which 100 waas tip each that's at the hedge tomorrow to be equal to the new valuable which was hunted off tip each the semi colon at the ends. Give that save and test it over in the browser, so reload and build a mount. So about the new bill correctly, we don't have any tip at the moment until we aren't a value to the slider. Okay, so let's are 10% onto there, which is an amount off 5 60 Let's go all the way up to 20. That's correct as well. At 11 20 which is good on the value is still correct for the new total bill. Per person that's divided by two people. It's now the new bill is 33 60 each with a tip amount of 5 62 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 will add some finishing touches to this up. 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 one type in a value. It's a total bill. Certain values went out in a tip lead to a lot of decimal places. We can also add a currency symbol in before all these funny used to. So let's get to work by underneath him. Let's make this a little bit bigger and close the cyber so we can restrict the number of decimal places we want Teoh output by using the JavaScript to fixed method. This is easily added to our put right down on the bottom of our script. So when it's time to the new bill, each on also the tip each which is a two amplitude values down to the bottom aren't the channel script to fix method. Once at the end of this, inside here will consent the number of decimal places with a number with the semicolon at the end. Who could do exactly the same for teach you Don't two fixed back over to the project. We can aren't a new value inside of here, and then the stock home through the tip percentage on you could see as we go over the tips . We don't have any long numbers appearing on the screen in Well, that's just trying is with the spit too. Yet that looks all fine. You can also add acorns, a symbol before these numbers too. This is also simple. Enoughto aren't in output we need to do is open up. The quotations are a string of text or in our case, we conard a symbol such as a currency symbol just like this. Then use a plus just like we don't before on this, just before the new bill each we could do the same down in the bottom two. Open up the string in a country symbol and then add these two over tip. Give that save. You know the browns there I have all of you. I never go. So now we have a currency symbol place before the number down to the bottom on. Everything still seems to work and find too. So the last thing I want to do to finish off this project and make double files a little bit more maintainable is to create a new script file and move all the contents off script here into its own separate file. So the first thing want to do is create new file. Let's at a new file at the root of all project. I'm gonna call this thesis crypt dot Js When he enter, make sure this is the same level as in back page inside the project. And then if you go to the index, I'm going to cut all the contents between our script tanks. So it's basically the whole of this function. So command or control X to quote all the contents. Actually, the script talks in place, bases in their own separate files and then say number one on these buck in inside the opening script tongue, I add any source attribute. This is in the route to the project of contemplative script, but yes, save go to the frozen and fresh. And that's test. It's working OK has any bill and everything still works as it should. But now we've got our code separated into its own separate file. Just keep sold final sizes down and make some code more readable maintainable. So congratulations. You know, reached the end of this tip calculator project. Hope everything went well for you on TV. Enjoyed Build this project 8. Thank you: congratulations reaching the end of this course, I hope this cars to give you a better idea of how html, CSS and JavaScript conf it together to create useful and fun project. We began by creating the user interface with hate Simo. Where we added our input builds. I'll range sliders on the text of the different sections. Then we moved onto style in the project by and It's and colors space in layout background image, along with some adjustments for different screen sizes with an introduced Java script to capture all of the user's input, such as the bill amount entered that required tip percentage and also the number of people split the bill between we looked at a few over useful techniques, so charge restricting the number of decimal places and also converse in values to numbers. Thank you for taking its course. I hope you've learned some new skills on enjoyed building this project. 9. Skillshare follow me video: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.