Javascript Fun: Build a Tip Calculator!

1. Welcome To The Class!: Hey, welcome to this class. If you are a web development beginner and want to just jump in and build some fun projects, you've came to the right place. The idea behind this series is to show you what you can do with regular HTML, CSS, and JavaScript. We're not going to be using any frameworks, any boilerplate, any libraries, or any templates. Instead, we're going to be building everything completely from scratch, step by step, to show you how these free technologies all work together. This class' project is going to be a tip calculator application. The user can enter any value or the total bill into the top input field. We can then select a percentage or the tip, which they want to add on, and then this will automatically recalculates all of the values. You will see the total value of the tip which is being calculated, and then this is also added to the total bill too. If they would like and they want to split the bill between multiple people, we'll have this range slider here too. Then we can split the bill between multiple people. This will then recalculate the total bill per person, and also the tip value per person too. This project will be built completely from scratch. We'll create the user interface using HTML. We'll move on to adding styling with CSS. Along with looking at how to add these fully custom range [inaudible] too. We'll look at font, browser prefixes, and then move on to making our application fully interactive using JavaScript. You'll learn about functions, math, events, all [inaudible] currency values, reading, and updating the DOM, and so much more. This project has been designed for beginners, and it's ideal for somebody with just a little HTML, CSS, and JavaScript knowledge. I'm excited to teach you this class, and I'll see you in the first lesson. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of taking off another lecture. Take the time to process each lesson, review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based, and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and diverted away from the class and you can even take a step back after you've finished the class, and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned away from the class. Also remember to share your project too here on Skillshare and only will I check it out, but it will also inspire fellow students too. For more information on the class project, head into the project and resources tab where you can not only upload your project, but you can also see other class projects too. With this in mind, I look forward to seeing what you create and upload here on Skillshare. 3. Creating The User Interface: This section is all about creating our Tip Calculator. This is going to be the final version which we're going to be building in this section. The user can enter a bill inside the input field up at the top. Then just below we can add the tip percentage, which we want to add to this bill. For example, let's go for 20 percent and all of the rest of the values are updated dynamically. Just below, we have the tip value and this is also added to the total bill to give us the total to pay. Below this, we also have a separate section which is going to allow the user to split the bill between multiple people. At the moment, we only have this as one person, so all the values are the same. If we want this to be divided between two people, the values are halved and we see exactly how much each user needs to pay. This first video is going to be focused on creating the user interface by using HTML. In the upcoming videos, we're going to add some styling and layout with CSS, and then we'll move on to the workings and calculations, and also make the user interface dynamic by using JavaScript. Let's begin by creating a new folder. I'm going to add mine onto the desktop and call this the tip calculator. You can also organize this inside of a project folder if you prefer, but I'm just going to begin by dragging over this project folder into Visual Studio Code. The first thing we need is a Index page which will contain the HTML. Inside of the project, create a new file. I'm going to call this the index.html, and we can also close down the sidebar for more space. Visual Studio Code comes complete with a plugin called Emmet, which will allow us to add shortcuts to create our HTML structure. For example, we can add HTML column 5, hit "Enter", and this will give us a starting point for our project. It simply includes all of the metadata which we'll commonly add, such as the viewport meta tag and also the character set which we're using. The title up at the top, I'm going to call mine Quick Tip, and then we can get to work by creating our content inside of the body section. We can wrap all of these Tip Calculator inside of the main tags, followed by a level 1 heading which is going to be the title of our project. Save this file, and now if we right-click, copy the path, paste this in the browser, this is now the link to our project. You can also go into the project folder and double click on the "Index.html", which will also open this up in the default browser. What we're going to do next is go through all of the available sections from top to bottom. We're going to create this white section up at the top which is going to be for the user inputs such as the bill and the tip amount, we'll add certain divs which you're going to wrap all of these elements, and then we'll add our second section down at the bottom. Below the level 1 heading we can add our first section, inside here we'll add our first div, which is for our first section which includes the label of bill and also the number input. Let's include this. Now, we have our div. This will have a label called Bill, our input. Now, since this is going to be a number input, we can give this a type of number. We can also add the placeholder attribute, which is going to be the text of your bill. This will be the value which is displayed inside of the inputs if no number has been added, followed by a unique ID which is going to be your bill. This will allow us to target this input with JavaScript so we can grab the value which the user has entered. We can also link this to our label by adding the same name for attribute. This will mean if we save this and go over to the browser, each time we click on the label, this will also activate our number input. Moving down, we also have a range slider which is just here. This is going to have a section which is going to wrap both the inputs and also the label and also the percentage. Let's add this now as a div, and then we can add a new div nested inside. This is going to be for the top row of the label and percentage. The label will have the label elements and the value of select tip. Just after this, we'll create a span element and give this a ID so we can target this from our JavaScript. We can call this the tipPercent. Later on, we'll populate the contents of this using JavaScript. For now we'll just add this as zero percent so we can see how this looks in our user interface. Just after the surrounding div we can then create our input, and this is going to be a type of range. This will give us this range slider which we'll see in the final version, although it may look a little bit different at the moment. We can set the initial value, we want this to begin at zero percent followed by a ID of tipInput. Again, we can use this for the label. This will also be used with JavaScript later on to grab the tip value. Let's save this and see how this looks over in the browser. The structure is there, we have the label, we have the percentage, and also the range slider. This obviously looks a lot different than our finished version but we'll fix this with CSS very soon. Moving down if we go back to the finished version we next need a tip section. This is going to be pretty simple. We have the label and also the value on the right-hand side. We'll have a horizontal rule, and then a section which is going to be for the total. Let's first create this tip section just below our last div. Create a new div for this section, a span with the value of tip, followed by an empty span with the ID which is going to be equal to tipValue. This will allow us to later on grab this elements by the ID, and then place a value inside. After this a horizontal rule to create our line, and then the final section down at the bottom. Add our div as a wrapper, the span with the text of total. Then just like above we'll add a empty span which is going to be updated with JavaScript. The value is going to be the total which includes a tip. We'll call this totalWithTip. This is now all of the elements in place for our first section, if we reload the browser these are all now in place. The next thing to do is to move down to the final section which is to split the bill. Just below our closing tag for this section, let's create a new section. The first round in div is going to be for the split input. This section just here. Just like we did with the tip value up at the top, we'll create a div which will contain the label and also the number of people. We'll then follow this with a range slider. The div for the text, this will have the label with the text of split. Next to this we'll add an inline span with the ID of splitValue. This will be updated with the value of one person. As this increases, this will be two people, three people, and so on. Just below this div section we can then create the input. Just like above this we'll have the type of range. We can also restrict the values inside of this range input. To begin, we want to create the minimum value of one. This is because is always going to be a minimum of one person which the bill is going to be split between. We can set a max value. This can be any value which you prefer. I'm going to go for 10 and set the initial default value to be one. This also needs a unique ID. I'm going to call this the splitInput which we can also match with the label. Let's check if this is all working, refresh the browser, and we have a new range input. You can also add a default value into here if you prefer. So one person and we'll see this inside the browser. Next up, we have two more simple sections at the bottom which is a simple div with the label and also the values on the right. The first div, this is going to have a span with the value of bill each, also followed by an empty span with the ID of billEach. The final section at the bottom is the tip each and also the value. Create a new div, the span with the text of tip each, followed by an empty span with the ID which is going to be equal to tipEach. Save our index.html file and this is now all of the HTML content which we need. Reload the browser and everything is now in place. Obviously, our Tip Calculator doesn't look anything like the final version at the moment, but we'll begin to fix this in the next video where we'll apply some CSS. 4. Styling With CSS: Moving on from our HTML, we're now going to make our project look and feel a lot nicer, and we're going to do this by applying some CSS. The first thing we need to do if we open over this sidebar is to create a new file, our styles. I'm going to call mine the styles.css, and then we can link this in the index.html. We do this about the top inside of the head section using needed link element. This is a relationship to a stylesheet, so this is fine, and the href is the location of this file. This file is contained alongside this index page so we can simply reference this with the name of styles.css. Back over to our stylesheet, we can begin with the HTML element, which is the root of our project. I'm going to start off by declaring the font-size to be a value of 10 pixels. Now, this value is completely optional, just as is all these CSS which we're going to add. You can make it your own, you can change values to make it look and feel exactly how we wanted to. Now the reason I've selected at 10 pixels for the root project size is because it's a nice rounded number and we can use the rem values. The scale is up and down really easily. For example, if we create a value of padding as one rem, this will be a value of 10 pixels. If we want this to be 16 pixels, this will be 1.6 rems, so rounded value makes things nice and easy when scaling up and down. Next, we'll set the value of the color. This is going to be the color of our text. The color I'm going to select is 4e4d4d. Let's check this out and test if this is working. Save the file, reload the browser, I'm going to see the styles have now taken effect. We're going to open up the split view inside of Visual Studio Code, so you can see both the index page and also the styles alongside. The next element which I'm going to style is the main container. If you remember from the last video, we surrounded all of the tip calculator in this main section. This is going to be our main wrapper. We can set the maximum width of the tip calculator to be 50 rem. Remember since we've set the root font-size to be 10 pixels, 50 times 10 will make this the equivalent of 500 pixels. We can also center this by using the margin zero auto. This will apply zero margin on the top and bottom and divide up the rest of the space on the left and right equally. Save and refresh, and this has now placed an equal amount of white space on the left as it is on the right. But just to give this some spacing from the very top of the page, we can change this value to be two rems to give us 20 pixels margin. Next up, we can set the background color. We can set this as a regular solid background color, or I'm going to set mine to take advantage of the linear gradients. This linear gradient will allow us to transition from one color to another in a straight line. Let's make some space, apply the linear gradient, and then we can add two values which you want to transition between. The first value which I'm going to add is a value of 3dc0c0, separated by a comma our second value is 5bceae. If we save this, we should see the main section now has a transition from one shade to another. By default, these colors will transition vertically from top to bottom. We can also change the angle as the first value. I want to change mine to be 30 degrees. Refresh, this now changes our gradient from vertical to go across the page at an angle of 30 degrees. After our background, we can also add some padding values, and inside here I'm going to add four different values. So three rem, 1.6 rem, six, and then finally, 1.6 rems. These four values of padding will appear on the top, right, bottom, and left. Let's save and refresh the browser, leaving this with some space in around the edges. Next, the border-radius, and I'm going to add this as a value of four rems. This is going to be pretty large, and this will apply to all four sides of our tip calculator. To give this tip calculator the impression of a little depth, we can also add a box-shadow. I'm going to add a box-shadow to the very bottom of our surrounding main section. This box-shadow is going to take in four different values. The first one is the x position, we have the y position, we have the value of the blur, and then also the color to apply. If we go over to the Mozilla website, this has a box-shadow generator, so we can better see what is going on. At the moment, we just have a simple element with a border. If we add a box-shadow, we can then play around with the x and y values. The x-axis is the value from left to right or across the page. Only y value is up and down. Currently, the x value is five pixels, so this means this is pushed over from five pixels. We can also set this to be negative five, and this will place these five pixels to the left. On the y-axis which is up and down, this is a value of negative five, we changed this to be positive, this will then appear down at the bottom. We can also change the colors, we can change the blur values and make this really big. But for our example we're just going to make this pretty subtle, so we're going to stick with some small values. The first value which is on the x-axis, I'm going to set this as zero so it doesn't push over from the left or the right-hand side. The second value is two pixels, so this will appear at the bottom of our element. Next to it we have the value of the blur. Again, this is going to be pretty small, and then also a pretty light and subtle color of light gray. Back to our project, refresh the browser and we see a very small box-shadow at the bottom of our main section. This takes care of the styling for our main section, and now we I work on the individual elements inside. Starting at the very top, we have the quick tip, which is surrounded in the level 1 heading. Let's target the h1. We can set the text-align to be in the center. We also want this to be a little larger so we can set this font-size the value of three rem. Level 1 headings have a default margin which is applied by the browser, so I'm going to remove this by setting this to be a value of zero. Just above this level 1 heading, we'll see there's a lot more space on the top than the bottom. This is because the main surrounding div has this padding value of three rem on the very top. We can also balance this up inside of our level one heading by adding some padding on the bottom also of three rems. If we take a look at the final version, we'll see that each one of our sections also has this white background color. We can also target this inside of our CSS, so let's grab the section element, and we can begin with the background color of white. The font-size, we can set this to be 18 pixels, which is the equivalent of 1.8 rems. Save and reload. There's currently no space in between our two sections, so we can fix this with some margin on the bottom. Let's go for 1.6 rems. In padding, which will give us the spacing inside of our white section, when working with padding margin if we only had two values, the first value will be the top and bottom, which I'm going to set as zero, and the second value will be the left and also the right. If it's consistent, we'll also add this as 1.6 rems to give us some spacing on the left and right of each of these sections. A border-radius of one rem, and then also a box-shadow to the section 2. To give this consistent, we can match our values from before. So zero, two pixels, two pixels blur, and also the color of light gray. The one difference we saw in this section is we want this to appear as though it's inset inside of the main section. We can add to the value of inset to our box-shadow, and this will replace the box-shadow inside rather than outside of the element. If we go back to the Mozilla website we can see this more clearly. We can click "Inset", and also reduce the blur, and we see this blur is now inside of the element rather than outside like we had before. Going inside one level deeper from all sections, we see that each one of our parts of our tip calculator is surrounded in a div. We can now target this in the CSS. We want to target all divs which are a direct child of section. We have the section and then one level in, and we have this div, then we have this div. All the styling will apply to these first divs nested inside. For example, this one which we see here is one level further in. So this won't apply to the section. If we did want the styling to apply to all of our divs inside the section, we would do the CSS just like this, but we only want to select the direct children. All we're going to do here is to add some padding values of 1.6 rems on the top and bottom, and zero on the left and right. This is going to give us the spacing around each one of these sections. Next, let's add some styling to our bill section at the top of our first section. To do this, we can add a class to this wrapper of bill, and then we can target this in the CSS. Since it is a class, we use the dot, so.bill, and we're going to make use of the CSS flexbox. We do this by first setting the wrapper to have the display type of flex, save and refresh. We don't see any difference just yet, but we can also now use this display of flex to apply styling to these children nested inside. Nested inside will have the label and also the input with the type and number. Let's begin with the label. So.bill and the label. This will target the label inside of our bill section. Since we're using the flexbox, we can set a flex value of one, and then just below this, we can target the bill input, and give this a flex value of three. Save and reload. This now means that the input will take up three times the available space as our label. Next, let's add some styling to this inputs with the type of number. Remember, inside of our HTML, we have various different inputs. We have this one here, we have our range, and also the range down at the bottom too. How do we be more specific with the type of input which you want to apply styling to? Well, we can do this inside of these square brackets by selecting the type. Only type which we want to target is the number. This will mean that the style which we add inside these curly braces will only apply to our number inputs, rather than our range just below. First of all, let's set the background color. The value I'm going to use is f4f4f5. The font size to make this a little larger, 1.6 rems, which is equivalent of 16 pixels. The border, we can set the thickness to be one pixel, the line to be solid, and let's give this a light gray color. We can also round the corners by applying some border radius of 0.5 rems, some padding, and again, I want to add four different values, so 0.8 rems on the top, zero on the right, 0.8 also on the bottom, and 0.8 rem on the left. Reload the browser, and this will give us equal spacing on the top, left and bottom, and zero on the right-hand side. Now our input is a little taller, we'll now see a problem lining this up with the bill. If you look at the final version, this is also going to be lined up in the center line of our input. Well, since we set the section to have the display type of flex, we can easily fix this by adding a flex property called align-self, set this to be the center. This now lines up with the center line of our input. Next up, we're going to add a box shadow just like on the finished version. To match up with our surrounding section, we're also going to set this to be inset. Also making use of the same values as earlier. The box shadow is going to be inset. The x and y values are going to be zero and two pixels, a two pixel blur, followed by the color of light gray. Next up, if we take a look at our final version, we see that each one of our sections, such as the tip and the value, is based out on each side of our calculator. This also applies for the total section, the tip, and also the value, and also these values down at the bottom too. The way we can create the spacing is also by taking advantage of the flexbox. The flexbox has a property called justify-content, where we can set the space to be between both of these elements. To do this, we need to target multiple sections of our HTML, so we can add a class to each one of these. The first one is going to be the select tip label and the value. Let's take a look for this in our HTML. This is the section just here. Let's add a class. Let's go for space-between. Copy this and we can reuse this in multiple places. We also need to add this to the tip section, and also the total section where we have two values on the same line. The tip wrapper, the wrapper for our total section, the split, and also the billEach, and tipEach sections down at the bottom. Now in the CSS, we can target this space-between, set the display type to be flex. Now if we select justify-content, we can apply all of these space to be between. Save and reload. Now instead of having the text and values alongside each other, these now have our space in between. Just to round off the CSS for this video, we're going to make our total section a little bolder. We can do this by adding a class to our total section. Just after space-between, we can add a second class, wrap this in the CSS. Let's first set the font size to be two rems, and also set the font-weight be bolder. Reload, we now have this larger bolder text. This now leaves us with the main CSS done for this project. However, in the next video, we're going to continue on, and add a few more nice finishing touches. For example, we're going to include a different font. We're also going to make our own custom range slider, rather than using the browser default, which we currently see here. 5. Fonts, Custom Sliders & Browser Prefixes: Let's continue on with our styling for this project, by moving on to creating a custom range slider. At the moment, if we take a look at the project at the stage, what we're currently at. This makes use of the browser default range, and it doesn't look too good or fit in with our current project. So let's talk about how we can create our own custom slider. First, we need to set the appearance of our current range sliders to be none, to remove all of the default styling. Then we can go ahead and create our own with some custom CSS. However, the browser support is not perfect for some of the techniques which we are going to use. We can get around this by using vendor prefixes. Adding a vendor prefix to a CSS property is a way to make use of certain CSS experimental properties, and also properties which are not yet currently fully supported in particular browsers. If we scroll down, we see the main prefixes which we can use. The first one is webkit, which applies to all of these browsers, such as Chrome and Safari. We then have the moz prefix, which applies to Firefox browsers. We can also target older versions of Opera and also Internet Explorer too. But for this particular project, I'm going to focus on these first two. All we need to do is to find a certain CSS property, such as transition, and then add the moz or webkit prefix inference. Using these, we'll learn to tell the browser that we're happy to use these, and give these a try before they are fully implemented in the browser. So to do this, we need to target both of our inputs with the type of range. So first of all, we have this one just here. Let's add a class of range. I'm going to also to do the same for our second range slider, which is just below. This means that our styling will apply to both of our range inputs. So let's start just below our total. We can select our range. The first thing we need to do is to remove the default range slider. We can do this by setting appearance to be none. The appearance property is not yet fully supported in webkit browsers. So we also need to add the webkit prefix in front of this. If we now save this and go to our project, reload. We see that this has removed the progress bar from behind. We will also move on to styling this form slider very soon. For now, we're just going to concentrate on the actual slider. So first of all, we can set the width to be 100 percent. So this is the full width of our container. The height of eight pixels, and we can also set the background color of our slider. I want to make this light gray, which is the value of a eee. We can begin to see our slider is now taking shape. Let's now add some margin to the very top to give us some spacing from the text, and also a border-radius. So first of all, the margin on the top of 1.2 rem, and also a border-radius of 0.3 rem. The next thing we can target when this is active or clicked on is the border color which goes around the outside. We can select this with the outline color, and change the default value to be any color which we like. I'm going to go for a marching value which we used in the linear gradient. So 5bceae. Refresh. Now, if we click on any of these sliders, we now see this green color. The next step is to target this little circle, which is called the slider film. We can again do this in the CSS. So let's targets our range section. Then if we use the double colons just like this, this is a pseudo-element. A pseudo-element will allow us to target a particular part of an element. So for example, if we were targeting a paragraph of text, we would have pseudo-elements available to select the first letter or even the first line. But since we are working with our range, we're going to target the slider film. Specifically, we're going to target the webkit versions. So this would be for Chrome and Safari browsers. Only value which we need is slider film. We'll also target the Firefox browser in just a moment. So like we did with the range, we're going to set the appearance to be none. We then need to set the width and heights of our little film slider. So let's go for the width, 2.2 rem. The height, which is also going to be the same. If we set the border-radius to be 50 percent, this will make it the full circle. Let's take a look at this. We don't see it yet, because we need to also assign a background color. I almost want to set this to be a color which we used before in the gradient. We now see our film slider. Another thing we are going to do is to change the cursor to be a pointer. There we go. Next. Let's see how it looks inside of a different browser. I'm going to go for Firefox. But of course you don't need to follow along with this step, if you don't want to. So inside the tip calculator, let's open up the index.html. We see that at present we just have the default styling for the background. We don't see the film styling just yet. So let's fix this by creating a section for the moz range film. Currently, we are only targeting the webkit version. So let's copy this and paste it in below. Then inside here, rather than having the webkit version, which I used to be the most prefix, and rather than slider film, this is called the range film. Save this and reload the Firefox browser. I see the film has been changed. So a couple of things to note here. We see there's a border around the film, inside this browser. So we can set the border to be none. This will then remove this. We also don't need to include the webkit appearance of none for this browser. One thing we can improve on when we click and make this active, is this dotted line around the outside. The way to do this inside of Firefox is by targeting the range slider. Again, you see the double colons for the pseudo-elements, and the elements which we want to target is going to be moz. Use the moz prefix for the Firefox browser. Then the name of the elements calls in this is the focus outer. We can set the border to be a value of 0, refresh, and this has now been removed. So these browser prefixes are something to be careful of when working with multiple browsers, and also anything which is not yet fully supported. So this is our customer range slider now complete. Just one thing to quickly note, when we scroll back up to the range section, here, we're targeting the appearance for only the webkit browsers. You may be wondering why we haven't targeted the Mozilla versions too. Well, this is because, for this particular appearance property, Firefox browsers will also respect the webkit versions too. This is for compatibility reasons. The last piece of styling I'm going to apply, let's close this Firefox browser, is to apply some Google Fonts. So let's do a search for Google Fonts and head over to fonts.google.com. I'm going to use a font called roboto. So let's do a search for this. This is the one we needed just here. To include this into our project, we can select the font-weight, and also if we want an italic version too. I'm going to go for the light 300 version, the medium, and also a bold version too. To include these, we need to click on the embed link. Copy the link to the style. This goes into our index.html. I'll paste this inside of the head section just above our custom stylesheets. Save this file. The next thing to do is to also set the font family inside of our stylesheet. So copy the font-family property. Open up our styles.css, and we can apply this for all of our project, inside the root HTML elements. Refresh the browser. Our font has now taken effect. We can also set the default font weights. I want to go for 300. Now, our styling looks a lot more like the finished version. Just to finish this project styling off. It's pretty hard to tell from our input just here because the fonts are not too dissimilar, but by default, an input won't inherit the font family. To do this, we need to scroll down to our input, the type of number. We can even set the font family just like a booth. Or we can set this to be, inherit. Reload the browser, and this will now take effect. So this is now the end of the styling section for our tip calculator. Next, we're going to move on to make this function by using JavaScript. 6. Events & User Input: Let's move on to adding some JavaScript to our project, where we're really going to bring our project to life. To do this, we're going to create a script section down at the very bottom. So if we scroll to the end of our index.html, just above the closing body tag, we can insert our JavaScript inside of the script elements. This will have an opening and closing tag, and all of our code will go between this section. So let's think about what we want to do here. We have the bill section up at the top and the user is going to add a value inside here here. So once this is done, we want to run some code to update all of the values. To do this, we can create a function which is going to be responsible for all of these changes. We do this with the function keyword followed by a name which you want to give it to this function. We could also possibly insert an augments between these brackets if we wanted to. I'm going to take a look at how to do this later on in this project. We now know we need to understand that everything which we add in-between these curly braces will be run each time we call this update function. So how do we actually call this update function? Well, there's multiple ways we can do this. As an example, we can do this when an element has been clicked. Let's scroll up to our bill section. If we locate our input as an attribute, we can listen for an event. An event is when something happens, such as an element is clicked or an input is updated. This will then allow us to call our function. As an example, we're going to listen out for a click, so we can use on click. Inside of the quotations, we add the code which we want to run. In our case, we want to call the update function followed by the brackets, just like this. If we save this and reload the browser, when we click on this input, we don't see anything happen just yet. This is because we don't have any code between these curly braces. We can check this is working by doing a console log, which is going to output a message to the console that you say, function called, save our file. If we reload the browser, we can now head into the developer tools. We do this with right-click and inspect. Click on the console tab. Since we're listening to a click event, we now want to click this input, just here. Listen output detect the function calls. So our function is now being called correctly. Let's also keep this open for later and shrink the browser down. However though, calling this function when this is clicked on is not a good use case. We actually want to run this function each time the user inputs anything inside of this input field. We can scroll back up to our input and change the type to be on inputs. Let's change this. Rather than on click, we need on inputs. Reload the browser. Now each time we type a number inside of this field, we see that our function has now been called three times. However though, for this function, we want to make it a little bit more useful rather than just simply logging some texts to the console. Instead, what we want to do is to grab the value of our bill, the percentage for our slider, and also the number of people which the bill is being split between. To do this, we can access the values which have been inputs into any of these fields. First of all, we select the full documents, which is the web page. We can then narrow this down to select a single element. One of the ways we can grab this is to select this by the element's ID. So the first one we want to grab is the value of this bill. If we scroll up to the bill, this has the value of your bill. So we can make use of this. We say documents. Then we can grab an element by the ID and add in the value of your bill. Now we have access to these particular elements. We can now solve this inside of a variable. We can create a variable with the let keyword and then give the same name, such as bill. This will now store the value of everything on the right-hand side, for this value called bill. If we want to check this is working, we can also do a new console log passing in the value of bill. This will be called each time we add something to our input. If we take a look at the console, we see the value of the actual inputs, elements with the type of number. However, what we want for our Tip calculator is to actually grab the contents which the user inputs. We can do this with.value. Let's try this again by reloading, enter a value. Now the actual value entered by the user will now be stored in this bill variable. So now we know how to do this. We can also grab the tip percent and also the split. So let's copy and paste this into more times. The second one is the tipPercent. We need to also grab an ID. So let's take a look for this. The first range input has the ID of tipInputs. So copy this. It is in. The third one is going to be for the split. This has an ID of split input. Just before we move on, let's log all three of these values and check their are working. The next one is the tipPercent and also the split. Reload the browser, let's go for the value of 67. So we see the value of 67. Then we have the value of the tip which is currently zero and then the split which is one percent. Just as a quick tip to when console log in multiple values, we can also wrap these in the curly braces to turn these into an object and these will be a lot more easier to read. Add a value. This will then output the property name along with the value to make it much more readable in the console. This now means we're capturing all of our user inputs and we can work with these values very soon. However, you will notice, if we work with the range inputs, that none of the values are updated in the console. This is because we are only calling this update function each time the user inputs something to this bill. However, for our use case, it would be a lot more practical if this function was updated when the user clicked on any of these inputs. So to do this, let's remove the on input event handler. Instead we can place this on the main wrapper. This main section is wrapping all of our inputs. So now if we save this, refresh the browser, and now each time one of our inputs has been updated, this will now call our function. We see the tip percentage being increased and also the split is now between three people. This means our update function is now being called for all three inputs. But we can also improve on this by removing our JavaScript and also separating this from the HTML. The way we can do this if we set an ID, let's go for a container. We can now keep this as pure HTML and only have our JavaScript in the script section below. So first, let's create a reference to this main wrapper. We do this just as above with document.getElementById. The ID name which we just placed in is container and we can store this in a variable called container. So now we have our container. We want to re-introduce our on input event handler. We can do this with addEventListener. This is going to take in two values. The first value is the type of event we want to listen for. Just like before, we can use things such as click or inputs and then separate it by a comma, the name of the function which we want to call. In our case, this is update. Let's save this file and check this is working okay. When we click on the bill, this is updated. If we increase the tip, this is also updated too. Finally, the split value. This now leaves our function with access to all of the information which we need. Next we're going to use all of these values to create our tip calculations and then display them in the user interface. 7. Calculating % Displaying Values: We now have a pretty, simple update function which grabs all of our user inputs. Then we can now use these values to calculate our tip outputs. We're going to use these to perform some calculations, and then update the user interface. For example, we need to output the value of our tip over on the right. We need to output the total. We need to also make sure that when we increase this tip value, that the percentage displays too, and also the same for this split values. Let's begin. I want to remove this console log from the last video, and then we can use these values to perform our calculations. The first one I'm going to grab is for the tip value. How are we going to go about this? Well, for example, if the user enters a bill such as 100 and a tip value of 20 percent, we want to make sure the tip value in money is 20. So we have a bill value of 100, and the way we can do this is to multiply this value by the percentage of the tip such as 20. You can see returned on the line below, we have a value of 2,000. This is because we need to divide the tip value by 100. This now gives us the correct value just here. If this was 15 percent, this will give us the value of 15. We can now use this over in our update function, and we can store this inside of a variable. We can call this a Tip Value, and we're going to set this equal through the same calculation we have just performed. So the 100 equivalent is the value of bill. We'll say bill multiplied by our tip percent divided by 100, to make sure that the tip percent gets divided by 100 first, and then multiply by the bill. We can wrap these inside the brackets to make sure the calculation gets performed correctly. Let's do a console log and we can check this is all working fine. The tip percent. Refresh the browser. Let's go for the same calculation. So 100, we can select the tip value. You can see if we move this all the way up, the updated values are now displayed. Now we have the total value of the tip. We can easily now work out how much the tip is per person. Let's create a new variable just below, lets call this the Tip Each. This is going to be pretty straightforward. All we're going to do is to take the tip value, which we have just above, and then divide it by the number of people. This is available in the variable above called Split. The next thing we can do right at the very bottom is to work out how much the total bill is per person. This again is going to be a pretty straightforward calculation. We currently have the total bill, which we're grabbing inside of this variable, and all we need to do is to divide it by the number of people. A new variable, I'm going to call this the new Bill Each. The first thing we need to do, is to add the bill plus the total tip value. This is going to give us the total bill when it's paid, which includes the tip, and then we can divide this by the number of people which is available in the split. Just like above, we're going to wrap these inside the brackets to make sure the calculation gets performed in the correct order. We'll add the values together and then multiply this by the number of people. Let's test this one out. We'll copy new bill each, add this into our console log and we can now test this out. Now if we add in the value of 100, we see an issue inside the console. We're outputting the value of 1000, which is an extra zero added onto the end. Let's try one more. If we add 50, the same problem is happening with the value of 500. The reason this is happening, is probably not too clear at the moment. This is because we're actually receiving a data type of string rather than number from this bill input. We can check this by console logging the type of, and then the value of our bill. Add anything into the input, and this is confirmed with the type of string. However, though, the tip value, we do this, reload. This is a type of number. Before when we are putting the value of new bill each, we are adding a string with a number. What is actually happening when we add the bill to the tip value, rather than performing a number calculation, we're receiving 50, and then adding the zero on the end, giving us the value of 500, which we've seen in the console. The way we can round this, is to convert the value of bill into a number. So I'm going to quote the section where we'll grab the value and then make use of the JavaScript Number Function, passing back in the code, which grabs our bill value. Now with this in place, we can now do a new console log with the type of bill. Save and reload the browser, and we add anything into here which is now displayed as a number. Our value is now displayed as a number, so let's try once more the value of new bill each. Check this is all working okay, and we now see the value of 50 rather than 500. Good. So now we have all the data which we need to work with, and the next step is to actually output these values into our user interface. We're going to do this in a similar way just above, where we grabbed the particular elements. But rather than grabbing the elements value, we're going to be setting the value instead. At the bottom of here, we can add a document.getElementByID. Which ID do we want to grab for this particular element? Let's scroll up. There's our place holder of zero percent, which we can now remove, and this has the ID of tip percent. Back down, we can add this in. Then to set the value of our elements rather than our placeholder, we can use innerHTML. This innerHTML will set the value inside of our element, and we want this to be equivalent of our tip percent. Save and reload. This is now working, and we can also add on to the end the percentage symbol. We can add this using the plus symbol, and then since we want to add a string value rather than a number, this is going to be added in quotations. We should now see a percent symbol if we reload the browser and scroll across our range slider. Next up we have this tip value just below. Let's scroll back up to our code. This is the element we want to target just here and this has the ID of tip value. Just like here, we're also going to use document.getElementByID, pass in the ID of tip value, and again, we'll set the innerHTML. We already have this calculated just above in the value of tip value. Let's try this one, a bill of 50. I'm going to set the tip, and 10 percent of 50 is now equal to five. We're going to be using this a couple more times, so I'm going to copy this, paste this in just below. The third one is going to be for the total value, which is a calculation of our bill being added to the tip value. The ID for this section was total with tip, which we can see from our HTML just above, it was this section just here. Then we can add that the HTML content with innerHTML, send this equal to our bill being added to our tip value. Let's try this out, a bill of 50. These two values added together give us the total of 55. Next, we have the split section just below. The first thing we're going to go for is the value of the split, so one person, but now we're just going to set the number of people such as 1, 2, 3, rather than outputting people or person just after. Let's start with this one. Get element by ID. The ID which we need for this one, if we scroll up to our split section, we can see next where I'll place all the content. If we remove this, this is split value. This is the value of our variable of split just after this. The next one we're going to grab, is the total bill per person. The ID for this element in this section here is going to be bill each. Again, we also have this value stored inside the variable called new bill each. The last section we need to work with is the tip each down at the bottom. Let's again paste in our getElementbyID. The spam which we're updating has the ID of tip each. I will set the value to be the tip of each variable, which you have stored above. Save this and back over to our project. Are they bill? We know this is all working, so let's go for 10 percent. Since we only have one person, the bill each is 55, and they also pay the full tip of five. Let's try open this to be two people. The value is updated here and this now updates our values just below. This now leaves most of the functionality for our tip calculator now in place. Next, we're going to move on to add some formatting into the currency and also the split values. 8. Formatting Currency & Split: Welcome to the final video for this course project. In this video, we're going to make some finishing touches to our tip calculator, and in particular we're going to format our currency and also work with the split output. First of all, we're going to create some functions which is going to round our currency values to two decimal places, along with putting a currency symbol in front too. Alongside this, where we have our split at the bottom, we're going to change this to output either one person or two people, three people, and so on. Also this currency function can be used for the split values at the bottom too. To do this, we're going to go down to our script, and if we take a look where we're outputting all of these values, instead of simply outputting a variable, we're going to pass this to a function. Let's create this function right right the very top. We'll begin with the function which is going to format our money. For this to work we also need the actual currency value to work with, and we'll pass this to this function very soon. Now, there's a couple of things we want to do with this actual currency value. The first thing to do is to round this to two decimal places, and then we're going to add a currency symbol in front. Let's take our value, and we can reassign this to a new value. The new value is going to be equal to the current value, and we can set this to two decimal places using the toFixed method. This new function then needs to return our new value. So before we go ahead and output this new value, we can also add to this start a string which is going to contain a currency symbol, add a space, and then we can add this to the value. Since it is a function, we can now reuse this everywhere we need to output a currency value. Let's grab this, and if we scroll down, the first one is the tipValue. Instead of outputting our value included in this variable, we can now call this function passing in our tipValue. This tipValue will be actually received inside of our function just above as this value, and then we can make our changes and return the new value. The total with tip, we can also grab this, and replace this with our function. Next up we have newBillEach. Pass this into our function, and finally the tip value for each person. Let's now save this and check this is working in the browser. Add a value, and now if we select different tip values and also split, we see that these are now rounded to two decimal places alongside outputting the currency symbol. The next thing we're going to do is to create a new function which is going to format the split output, so this function will either output one person, or it will output two people and so on. Go back to our script section, let's create a new function, and let's call this formatSplit. This is also going to take in a value which will be the number of people the bill is split between. Let's first check if this value is equal to 1. If it is, we then want to return a string which simply says, one person. So we can return the value plus a string which is the word person. This line of code will only run if the value of the split is equal to 1. In fact, this just wants to be a string. If the value is two or higher, we're then going to return a new value, which is the current value, and this time rather than person, the value will be people. Now output this, we're going to use our formatSplit function, passing in our split. Off to the browser, let's check this is working. We can add a value, and we see the output of one person. Let's change this be number two, two people, three people, and so on. This is now some nice improvements for our tip calculator, however there is one edge case we need to take care of, and this is dependent on the particular values which we add. If we do something such as 47 and 15 percent tip, split between two people, it may not be immediately obvious, but there is one small problem here. That problem is the bill each, and also the tip each doesn't cover the totals just about the top. The tip each is 3.52, which will give us the value of 7.04, and we want to make this 7.05. The same with the actual bill each if each person puts in 27.02, this will be slightly short of the total. Now the way we can fix this is by going to our function which we created earlier, which is formatMoney. At the moment when we call in the toFixed method, this is actually round in either up or down depending on the number. To fix this problem we always want to make sure that our value is rounded up, and never rounded down. There is some complex math calculations we can do to make this happen, however there is also a much more simpler way too. Up at the very top, we're again going to grab our value and changes. We can make use of a math function called ceil, which will always round up our numbers. However, by default Math.ceil will round up to the closest whole number. For example 27.02, will round up to be 28. This would then return to us some values which are way too high. Instead we want to grab the second decimal place and instead round this up. To do this we're going to multiply our original value by 100. Let's do some console logs and see how this looks in the browser. That's how we'll console log the original value, so the first value, and then we'll do the same console log, but after this value has been changed. Let's open up the developer tools with right-click and Inspect. Go into the Console. If we take a look at these in pairs, particularly down at the bottom, 3.525 has been now rounded to 353, the same way that 27.025, this has been rounded up. Now this has been rounded up, we can now divide this by 100 to give us the original decimal places. Let's take this value, divide it by 100, and then reload the browser. Let's add our values back in place, and now these values multiplied by two people will not be enough to cover the total bill and tip. This is only a small detail, but something which could be really important when working with money. Let's remove this console logs, and clean up our function. This is enough for our tip calculator project, I hope you've enjoyed it, and also learned something new. You can now move on to the next project, take a break, or add some further customizations to this project either via CSS to change the look and feel, or you can add some different JavaScript functionality. I hope you've enjoyed this project and I'll see you in the next one. 9. Follow Me On Skillshare!: 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.