Building a Simple Calculator App with TypeScript and HTML: A Beginner's Guide

[Music] hello everyone and welcome to this session where we will look at how you can design a basic web calculator similar to the one that you're seeing right now and over here as you can see you have the options to enter two numbers and then you can perform addition it gives you the result subtraction multiplication or division so let's get started from scratch and see how you can design your own basic web calculator so over here I I am onto my visual studio code and over here what I will do is I will first create a new file that will be our index.html file and inside the index.html file I will start the simple do type and then I will tell it that we are going to start HTML document and first of all the title so the title will be web calculator after the title what we are going to do is we are going to create a main body and insert the body first thing I will give the header as H1 which will be saying that this is a basic web calculator after the heading we're going to create two input Fields where the user can input two numbers so this time what we will do is we will use the same input keyword but before that what we will do is we will first of all create a paragraph saying that the user knows enter the first number and then within the same paragraph I want to add the input field as well so what I will do is I will create input and then I will give it a type first of all so the type is going to be numbered and then after the type we need to give it an ID so the ID for the first number will be as num one and then you need to give a placeholder so for the placeholder I will give it as number one all right so I will just copy this file and paste it again and then instead of first I will just write it down as second and over here I will do it num two and then over here as well we will do it as number two so what this will do till now is it will create a web page for us that will have two input fields and then after that what we need to do is we need to create four buttons for us that will be for the addition subtraction multiplication and division so let me do it quickly and provide the IDS as well to it after this is done what we will do is we will create a new paragraph or you can also create a new heading as well where you will display the answer so for that I will use heading three format saying that the answer is and then it should also have an output field where you need to display the answer so we will give it as output and ID that I will be giving is the result whereever result will be displayed and then finishing it out let me show you how does this looks like and here you can see this is how our web page looks like right right now it won't respond to us because the reason is we haven't created our typescript file so we will go back and what we will do is we will create our typescript file and now here you go so the first thing that you need to do is you need to bring in the HTML elements from the document methods so let's do one by one so for the first we have number one so that will be a constant we have already discussed all of these things in very much detail in our first video for this one you can also find the link for the same video in the description as well so the first element that I will take is the num one that is our input field num one and the num two as well so let's start with the number one first get element by ID and then the ID is num one as HTML input type because it was an HTML input element in our HTML document and what we are doing is whatever the values that will be stored in the one that is basically the inbut field for the number one will be brought into the number one constant variable that we have created similarly we will do it for all the input and output types in our HTML document so this will be for Num two and this is also going to be as HTML input element then we will do it for the four butons that we have so let's name our first Button as ADD button and that will be from the document do get element by ID and the ID for our add button is as you can see it is ADD so we will write down add over here and we are going to take it as HTML button element this time because this is a button element similarly we will do the same for all of our four buttons so now we have all of our four buttons as well now the last thing that is left is our output where we will be printing our result so I will name this variable as print result and that is the ID as result and then as HTML output element because this is an output element in our case now moving on next what we have to do is we have to create four functions whenever each of the button is pressed either add subtract multiplication or divide those particular functions will be called and that operation will be performed respectively so let's start with creating our add numbers function so what I will do is we will create a function add numbers now we are going to transform these numbers that we're getting in here in the input fields from a string to a floating number because as we know whatever input type we take it is by default in a string data format and we need to convert it into either integer or floating numbers so for that what we will do is we will create two variables let a is equals to and then passing the value number one into float so and what we want to pass is the value for number one in the same way we will do it for number two as well and now the result that will be equals to A + B because we are performing the addition over here and the next thing that we need to do is we need to print the result to the output field so for that print result this is the name for the variable that we created for the output field and then the method that we will be calling is the text content and what do we want to print in the output field that is the result and that will be going out in the form of an string so if I just quickly go to my terminal and I just try to compile this code so you can see the code has been compiled now we have got a GS file over here as you can see in order to add that script you need to write down a script and then the source for the script and we know the source is app.js and then just closing it out and instead of what typ of script code we also need to do one more thing and that is to add an event listener as well so what you want to do is whenever the add button is clicked this function should be called so for that case we need to type down add button and the method for this one is add event listener and what we want to do is whenever a click is performed on this button we want to call the add numbers function let's let transpile it again and now we will go onto our web application just reload this page and you will see over here when we type in two numbers 10 and two and press a button so you will see that the event is been called and the function performs the addition now all the functions are not enabled right now because we haven't added them as of now so let's go and add all of these as well so function subtract numbers now what this function is going to do is it is going to perform the subtraction of two numbers let a is equals to par float number one. value so our number one goes to a variable and number two goes to B variable and in the same way we will print the result on the print result output field with the help of the text content also you need to make sure that you add the event listener as well because if you don't add it you won't be able to perform different functions so we have subtract button over here Su button dot add event listener and the event L is going to be clicked again and the function this time we are going to call is subtract numbers next transpile this code run it so you see you get the answers over here similarly we will add multiplication and division as well quickly and then really quickly we will also do it for the division operation as well and here you go so we have added all of these functions right now and let's just transpile this code so it tells us that we have done some sort of an error so as you can see over here we didn't close this round brackets as we are calling a function over here so let's transpile it again and this time it should compile it and here we go so let's just clear it out and move on to our web calculator app and here you can see now once we enter the two numbers you add it you get 14 you subtract it you get 10 multiplication gives 24 and division gives six so you can see how nicely and neatly the calculator works so this is how you can make multiple different applications so this was just an application for a basic calculator and with this I hope you have got an understanding of how you can create a basic web calculator app with the help of HTML and typoscript thank you for watching and don't forget to like share and subscribe our channel so that you can get more informative videos like this

Channel: Code In Piece

Views: 3,144

Keywords: TypeScript, HTML, Web Calculator, Simple Calculator, Calculator App, Programming Tutorial, Beginner-Friendly, Step-by-Step, Web Development, TypeScript Basics, HTML Basics, calculator app, web app, web applications, python, java script, codeinpiece, code in piece, user input, DOM, document object model, typescript with html, javascript with html, typescript for beginner

Id: FmUupT2EL1k

Length: 10min 21sec (621 seconds)

Published: Sat Apr 01 2023