Introduction: How to Make a Simple Calculator in Html

About: Hi there, I am young programmer and I develop Computer Desktop Apps and Android Games for free. I run a company named Vision.Inc which is non - profit company and so everything I share is for free. I don't kee…

Creating a simple web calculator on your own is a pretty basic thing. You can learn this on your own. There are many other tutorials on the internet but it depends on what you choose, you choose which best suits you. I am not going to explain things in deep like explaining you that what is "HTML" ! So , here you will learn "How To Create A Calculator In HTML" not "what is HTML" ?... 

Step 1: Requirements

You should know some basic knowledge of Web Browsers and typing in notepad.
It will be easy for anyone of age 12+
(If you are -12 and know the basics , you rock !) And obviously you will need a working computer.

Step 2: STEP ONE

Now first of all, open the notepad which is built-in in windows and many other operating systems.

Step 3: STEP TWO

After that, type in the basic starting tags of HTML   i.e <body><br>below are the starting codes you have to type. I have inserted the image and not the text as you should write the code yourself so you get practiced.<br><br>Now, explaining the code. The first <html> & <head> tags are the base which packs the whole code between them. The 2nd is the <title> & tag which are used to give a title to your html website, app, age etc... And the


Now its time to edit your body, now firstly you have to make everything into center so to make it center , use tag and after that we will use tag in which we will type our calculator's name , here i am using "Simple Calculator" name. And after that we will add code for the result of performed actions i.e multiplication , addition , division etc...


Now in step four, we will add our number buttons. 
These are the codes for numbers, don't worry they look huge but they are just exact same, you have to copy paste the same line but only have to change the number and value. And the height and width depends on your choice. The reset button code is just different but don't worry you will understand it.


Now the fifth step contains just the font tags and end tags of body , html & head... just end these tags with ending slash "/".


Now the final step. In this step, just save your notepad text file with the (.html) extension and then open your file with your web browser. You can see the image below that how your calculator will look like. Or, download the original source file to see live preview on your browser. Just download it and open it with your web browser.

Step 8: END

So this is the end. Hope you guys enjoyed it and if you want a more detailed tutorial with live assistance, visit and please don't forget to give it a like.


Vision.Inc is a tiny and basic software company who develop free apps and games for everyone. The main objective of Vision.Inc is to generate the best and free software for everyone. The founder of Vision.Inc is amazingly just 15 years old name Safeer Ahmed. The developer of all Vision.Inc's Apps is also Safeer Ahmed. Vision.Inc is a non profit company so they don't sell ads or every thing which bothers you including the price, ads and pop ups ! so everything is just free. Please support Vision.Inc by just visiting and sharing the website. Thanks.