hey hi how you doing okay so today we are going to be building this beautiful calculator using html css and javascript so uh if that is something interesting make sure that you stick around smash that like button because it really helps the algorithm and just a quick disclaimer guys this is a variation of the code uploaded by the channel code spot make sure you guys go check out their channel subscribe and like their videos as well so yeah all credit to them for building this app and uh yeah i hope you guys just like my little twist on it okay so i'm just going to show you quickly how it works as you can see the main uh number like the output of the calculator is there in our big bold black letters and then you can also see that the history is in a slightly lighter font and smaller font uh just above it so it just shows that all the operations that you've clicked and you can just see here all the buttons and operations are working you know as they should be i made sure that all the operations were accurate and all the answers were correct by using a proper calculator as well so yeah you don't have to worry about the legitimacy of it it is all good and yeah so let's without further ado get right into it so the first thing you're going to want to do is create a folder on your desktop or whatever directory that you like and call it calculator inside that folder you want to create a file called index.html another file called style.css and then for our javascript file you just add that and call it app.js so those are the three files that we're going to focus on in this tutorial we can close the css and the javascript one though because we don't really need that at the moment we're just going to focus on the html so just quickly to start off with the html you're going to want to do the shortcut exclamation mark so just shift one and then enter and that's just going to bring up a quick template uh to start off our html document uh we'll just change the title to calculator just something simple i mean you can change it to whatever you want and then we'll just link our style sheet so this is going to be linking our css file to our html file to make sure that everything looks pretty now we're just going to add in our font so we're just going to connect to the google fonts api and that's just going to basically allow us to use any of the google fonts in our program so yeah once that is done um we're gonna start off now with the body of the html so the head is all done and now i'm gonna speed up the video so that you guys can um you know follow along and if you know you need to slow the video down feel free to do so and uh yeah so let's just get right into it [Music] do [Music] so [Music] so [Music] foreign [Music] okay so that is our html document done there's nothing else you need to do just make sure that everything matches up to what you see on the screen so yeah that is uh just basically how it's looking at the moment we've just got a row of buttons that are labeled there um don't worry i know it looks ugly as hell right now but it will look very nice once we implement our css file just before that though we are going to attach our javascript file into our html file so um by doing that we're just going to link the script and you can just do that by typing in script and then making sure that the source is the same name as the file that we created which was app.js all right so now let's just get started with our css and uh yeah so let's just get right into it um like i said before i'm just going to speed up the video you guys can pause and slow it down as you need and yeah let's do it [Music] so [Music] okay so this is uh what it's looking like right now it's basically just um the back of the calculator so the actual container and then the buttons so uh again yeah it's not um it's not done yet but this is just to show you that our background color has changed um to add the desired purple that we wanted you can also do any color you want you don't have to follow exactly what i've done here okay so now let's just get started with styling the actual buttons and screen for the calculator [Music] so [Music] do [Music] [Applause] [Music] so [Music] so [Music] so [Music] [Music] so [Music] so [Music] okay guys so that is our css done we've actually just got a small bug here as you can see the back of the calculator the container is only halfway down and is basically only occupying one and a half rows of the buttons so we want that background section to go all the way down obviously past the bottom row of buttons so i'm just going to go back into my css file here and we're just going to scroll to the top and just have a quick look what we've done wrong so i assume it's going to be something uh with the container that's wrong okay so seeing our calculator class here we've got uh the height that's 250 that's meant to be 520 okay and see that's uh looks much better now yeah so just make sure that that is 520 pixels on the height not 250. that is our css just completely done everything works as normal you can see there the buttons all look really nice but you can see that they don't actually do anything so we click the buttons and nothing is outputted to our screen i guess at the top of our calculator so i'm actually just going to jump straight into the javascript file here the first function will be the history function and that's just going to basically allow us to retrieve and display the user's input on the screen above the buttons so just like on a normal calculator there is always that screen at the top above the buttons so that every time you press a button that particular number will be output on the screen and just like with the previous files i'm going to speed up the video you guys can slow it down or pause it whenever you need and yeah let's just jump right into it [Music] so [Music] so [Music] so [Music] do [Music] so [Music] do [Music] [Applause] so [Music] so [Music] so [Music] so [Music] so [Music] do [Music] so [Music] do [Music] so [Music] so [Applause] [Music] so [Music] [Music] alright guys so that is it that is the end of our program we've completed everything the index.html file is complete the style.css file is complete and our app.js file is complete now make sure that you go up to the menu and save them make sure that all your files are saved not just one otherwise the program will not work so yeah here is what the calculator looks like um it is working pretty good 55 plus 10 is 65. therefore i think this calculator is pretty valid so if you guys did enjoy that video please make sure to like and subscribe turn on post notifications it really helps me out um i guess it just motivates me even more to create videos for you guys i really enjoy these types of videos and if you do have any suggestions please just leave them down below in the comments and yeah that just basically helps me come up with video ideas as well and i also just want to hear from you guys like what you guys want and what you guys need help with i will do my very best to make tutorials on them and yeah so until the next video guys i hope you have a lovely day and i will see you soon