Create a simple calculator using HTML, CSS, JavaScript

welcome academians today we will make this awesome calculator with html css and javascript as always you can find the source code below in the description without further ado let's get started this is the starting state of the project you can find the link in the description below start our project with live server if you don't have live server installed go to extensions tab and install this extension now let's start adding our html markup let's add the section in which we will work now let's add the container div to wrap all our markup in it we should add the display to the container and we will display results and all the expressions and numbers here and below the display we will have the buttons grid where we will add all our buttons let's create a few of them let's add some symbols numbers and everything that you can find on a calculator every 4 button will be on the same row so i try to add them accordingly but feel free to use your own layout here you probably noticed that the fourth button looks actually a little weird it's an html entity which is a special text that will in this case render a left arrow for us the equal sign will be really special as we will use this button to execute all our commands in our calculator so we will give it an id of equal we will be able to select this from javascript much easier now we have all markup that we need for this project if you open up chrome and see our server you can see that all our buttons are rendered but it looks really weird so let's add some css to make it beautiful i've already linked an empty css file in our starter project so let's add some styles first we will start with our container we will add the max weight to it and position it 10 percent of the top and horizontally make it in the center applying auto margins i'll also apply block shadow to make it look a little bit more beautiful you can copy it from the source code that i provided in the description below next we will start by applying styles to the display we will align the text to the right that's how calculators works anyways and then we will apply a fixed height and a fixed line height making these two both equal we'll center our text vertically i'll also make our text a little bit bigger now let's style our buttons we will display our buttons using css grid we will apply border bottom and border left because we want to avoid double borders we will fix this later regarding the columns we will have 4 equal columns that's why we use 4 times one f air which means fraction as i mentioned before we want to avoid double borders so we will apply border top and border right to every div in our buttons class so this way we have all the four borders without them having a collision now we will make our buttons look much more nice set the height and center the text vertically and horizontally we will also apply cursor pointer so the cursor of the user will turn into a pointer then hovers over the button suggesting him that this is a clickable element on the page as you can see our calculator is getting into shape so now let's add some styles to our equal button i want it to be different from the other buttons as it has a special functionality so i will make a blue background for it and the white text color it actually looks really nice and different i want to make one smaller change in the styling then we can move on i want to inverse the colors on the button than the user who wears over it so the background color will be black and the text color will be white we will add a little transition to it so it will animate in and animate out smoothly you can see that it adds to the user experience quite a lot now we will add all the calculator functionalities with javascript let's create our index.js file first then we should include it in a script tag in our html file so our page will know where to look for our javascript we can verify that our javascript works properly with our good old console.log function if we open our page we can see hello world on the console now it's time to make our calculator work first we will get our display div by its id and save it to a variable called display we will use this variable to update the contents of the display now we will get all of our buttons we will do that by going through the html and searching for every element that has the class button we will get all of our buttons this way into our single variable as you can see we got plenty of them if we look at the console we can see it looks like an array but it's actually an html collection so we have to convert it to an array using the array.from function which will take our html collection and make an array from it if we print it to the console we can see it's now an array so we can use our beloved array functions on it we will map through our buttons array and apply a click event listener to every button in our array we will provide a callback function to our event listener which will get a parameter event which we call e that has all the information about our event for example we can get the target of the event so which element was clicked and we will use this event object to identify which button was clicked and we will take different actions based on it but now let's just write it down to the console let's open our browser and test it if we click a button then we can see the event the element that triggered the event and the inner text of the element we will decide on the on our actions based on the value of the inner text so let's write up our switched statement that will check for our inner text by default we would want to add the inner text of the button to the inner text of the display so it will get displayed in our calculator let's open up our browser and test our changes as you can see clicking any button will add the content of that button to the display we don't want this in every case so let's set up several cases where we want to do something else for example when the user clicks the c button we want to clear the display we will do that by setting the inner text of the display to an empty string if we test this with our browser we can see that it clears the display but leaves a character c on the display this is the basic behavior of a switch statement it finds the first case which suits then it executes everything below that so we have to add the break statement to end the execution here and don't execute the default step every time if we test it now we can see that it works as intended let's continue our implementation with the back arrow for this i will copy the back arrow character from the calculator it will clear the lastly entered character by the user for this functionality we will use the string splice method to remove the last character from our display string don't forget to add the break statement as we don't want to add the back arrow to our display if we test this in our browser we can see that it clears the last character flawlessly one improvement that we can do here is to only remove the last character if we have something in our display it wouldn't cause any errors but we want to avoid unnecessary function calls now it's time to implement the most interesting functionality in our calculator the equal button we will use a built-in javascript function called evol to achieve this functionality it takes a string as a parameter in this case it will be the display text and executes it like it would be a javascript code if we type in a valid mathematical expression then it gets evaluated correctly we have to add the break statement because we don't want the equal assign to show on the display now if we test it in our browser we can see that the equal size is no more present on the display we can try more complex expressions and our calculator will solve these problems easily one thing that we have to handle now are invalid expressions because now if we type in invalid mathematical expressions like this then we will get a console error it won't break our calculator but it is not a good user experience so we want to inform the user that he typed in something wrong we can do that by using a try catch block in this case javascript we are trying to execute the statements in our strike block and if something goes wrong then the statements in the catch block are executed so we can handle our error here for now we will set our display to show error now if we type in an invalid expression then we won't see an error showing on the console because we handled it in our code and the user sees the error text on our display this is a way better user experience i want to make an important security notice regarding evol if somebody with malicious intentions comes to our app and opens up the html for the display and writes in any kind of malicious javascript code then when we hit the equal button then the code will be executed as if all we are treated as valid javascript i will show you two examples here in the first one we will call an alert function just to demonstrate you that it really executes the javascript inside as you can see the alert gets popped which means that our javascript that we just had into the calculator got executed this is just the tip of the iceberg as i said earlier evolve really executes any kind of valid javascript in our next example we will redirect the user to google now if we hit the equal button the browser redirects us to google google is a safe website so we are safe now but imagine that it could be any website for example fake phishing websites which are seeking your precious data like login informations or credit card informations so use evol really cautiously and for applications with real users you should avoid it that's all for this tutorial congratulations for creating a calculator with html css and javascript thank you for watching till the end of this video if you found it useful or learned anything new please consider subscribing to this channel you can also drop a like if you wish and leave feedback in the comment section below i see you folks in the next video you

Channel: JavaScript Academy

Views: 33,022

Keywords:

Id: QS6Y0ezhyCs

Length: 13min 35sec (815 seconds)

Published: Thu Oct 22 2020

Reddit Comments

[u/renanswitch]

Great video!