hey what's going on everybody in today's video we're going to create a calculator program using HTML CSS and JavaScript so let's get started all right let's do this thing everybody we have a lot of buttons to create but we'll need a container I will create a div element the div element will have an ID of calculator within this div element we'll create an input element the input element will have an ID of display to display the numbers that we type in I don't want somebody to enter in some text for the display I would like this display to be readon I will add the read only property so we can't type in anything even though I'm trying I will create a nested development that has an ID of keys for all of the keys we need to add a lot of buttons we'll begin with the first I will create a button element the text on the button will be plus I will set the onclick attribute of this button to be a JavaScript function we still need to Define this function eventually we'll create a append to display function we have one argument to pass into this JavaScript function a character of plus that's our first button let's copy this button and paste 13 additional times if I counted right okay the second button will be seven the character we're passing in is seven followed by 8 9 minus 4 5 6 asterisk for multiplication 1 2 three forward slash for division then zero and here are the new buttons I'm Mis counted we need to add one more a DOT for a decimal now we need an equals button we're going to arrange that a little different let's create a button with the text of equals the onclick attribute of this specific button is going to be calculate then we need a button to clear our screen the text on this button will be capital c for clear the on click attribute of this button is going to be clear display and that is all the buttons we'll need so let's save everything and let's go to our CSS stylesheet I'm going to zoom back to 100% first let's style all these buttons I will select all buttons for each button I will set the width to be 100 pixels the height to be 100 pixels so they're even I would like rounded buttons I will set the Border radius property to be 50 pixels so they're circles let's remove the border border none I'll change the background color of the buttons background-color I'll use hsl values I'll set the lightness to be 30% so they're darker for the text of the button I will set the color to be white for the font size I will set that to be three RM set the font weight to be bold then when I hover my cursor over one of the buttons I would like my cursor to be a pointer cursor pointer now we have to arrange these buttons properly let's select the ID of keys keys is a development that's containing all of the buttons this element all of the buttons are within to arrange these buttons in a grid we can set the display property to be a grid for this calculator I would like four columns to do that I will set the grid template columns property to be we'll use the repeat function of CSS I would like four columns then to arrange these buttons evenly you can use 1 F FR stands for fractional unit 1 FR indicates that each column should take up an even amount of space so now we have Columns of four if I were to set this to three we would have Columns of three but I'm going to use Columns of four because I would like all of the operators on the left hand side I'll set the Gap to be 10 pixels that is the gap between each of the rows then I'll add some padding of 25 pixels that's padding around the keys let's select the ID of calculator I'll add that to the top to keep everything organized with our calculator I will select a font family of Ariel with a backup of s serif let's pick a background color for the calculator I will select something darker I'll set the lightness to be 15% I'll round the corners of the calculator border radius 15 pixels the corners of the calculator are smooth now then I will set a Max width of the calculator to be 500 pixels if any elements overflow I will set that to be hidden this is mostly for our display if we have a very long equation all right next let's select the display right now it's kind of small we are selecting our ID of display let's set the width to be 100% I'll add some padding of 20 pixels for the text of the display I will set the font size to be 5 RM let's text a line left I'll remove the border border none and I'll change the background color I'll just copy this property because I'm lazy let's increase the lightness to 20% then we'll select the body of our document I will remove all margin margin zero I would like the calculator to be in the middle of my window right now it's in the top left corner if you would prefer it up here you can leave it as is I will set the display to be Flex for Flex box justify content in the center for a horizontal alignment for a vertical alignment we can set align items to be Center but we do need to increase the height of the body of the document so it's 100% I will set the height to be 100 VH for 100% the viewport height that should place the calculator in the middle of the body of our document both horizontally and vertically for the background color I'm going to decrease the lightness slightly for the background color I will set the lightness to be like 95% okay let's go to the bottom of our CSS stylesheet when I hover over one of these buttons I would like to increase the lightness so with all buttons with the hover sudo class change the background color so the lightness is 40% instead of 30 now these buttons light up when we hover our cursor over one of the buttons now when I click on one of the buttons I'll increase the lightness further so it flashes we are selecting the active studo class now let's take our background color property increase the lightness to 50% when we hover over a button it lights up when we click on it it flashes momentarily so with all of these operators I would like all of these operator buttons to be a different color I'll pick orange we're going to give each of these buttons a new class let's head back to our HTML file beginning with the plus button I will set the class equal to operator Das BTN for button so let's copy this class paste it for our minus button multiply button divide button and the clear button now we will select the class of operator BTN for button let's change the background color I'm going to set the background color to be orange I've already pre-picked a color when I hover my cursor over one of the operator buttons I would like the color to be a lighter orange instead of gray let's take our operator button access the hover sudo class I'll increase the lightness to 65% then when I click on one of these buttons I would like the lightness to increase further with the operator button class with the active pseudo class increase the lightness to 75% so when I click on one of the operator buttons it's going to flash momentarily all right and that is all the HTML and CSS that we need now we just need to add functionality let's go to our Javascript file for our Javascript file there's not a lot we have to write first we need to get the display element so what was that ID display const display equals document. getet element by ID get the ID of display we have three functions to create a function for append to display calculate and clear display these three functions function append to display there is one parameter input because we were passing in a character when we call this function then we have a function to clear display then a function to calculate we'll begin with a pen to display all we're going to do is take our display this element access its value append it with plus equals our input and let's see if this works seven I forgot to change the font color of the display so let's do that within our display element let's set the color to be white okay that's much better 7.13 + 5 equals okay we know that that works when I click on the clear button I would like to clear this display let's access our display element access the value property set it equal to an empty string 3.14159 when I hit clear it should clear the display lastly we have calculate let's take our display elements value property set it equal to now we're going to use the eval function the eval function takes an expression such as 1 + 2 + 3 and evaluates it and gives a result it's kind of like it's its own built-in calculator so to say evaluate the value within our display display. value so if I add 3.14 plus 1 01 I'm given a result of 4.15 now for some reason if we get an error for example 7 + equals well we have a problem let's go to our console we've encountered an uncaught syntax error because we never finished our equation in the last lesson we learned about error handling this is dangerous code it can cause an error let's surround this code with a tri block we will try this code and catch any errors that happen so we need a catch block now catch any errors we will change the value of the display to equal some text of error all right and that should work 3.14 times equals that results in an error we clear it and then start over what's 1 + 2 + 3 + 4 that would be 10 all right everybody so that is a calculator program you can make using JavaScript HTML and CSS impress your friends