How to Create a Calculator Using HTML

PDF download Download Article
PDF download Download Article

There are plenty of ways to do math on a desktop computer using a built-in calculator, but another way is to build one yourself using a simple HTML code. To create a calculator using HTML, learn some basics about HTML, then copy the necessary code into a text editor and save it with an HTML extension. You can then use your calculator by opening up the HTML document in your favorite browser. By doing all of this, not only will you be able to do math in a browser, but you can also learn some fundamentals about the art of coding!

Part 1
Part 1 of 4:

Understanding the Code

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    The code you will use to create your calculator is made up of many pieces of syntax that work together to define different elements of a document. Click here for an explanation of how to familiarize yourself with this process, or read on to learn what each line of text is doing in the code you'll be using to make your calculator.
    • html : This piece of syntax tells the rest of the document what language is being used in the code. In coding, a number of languages used to code, and <html> tells the rest of the document that it will be in - you guessed it! - html. [1]
    • head : Tells the document that everything beneath it is data about data, also known as "metadata". The <head> command is usually used to define stylistic elements of a document, such as titles, headings, and so on. Think of it as an umbrella under which the rest of the code is defined. [2]
    • title : This is where you will name the title of your document. This attribute is used to define what the title of the document will be when opened in an html browser.
    • body bgcolor= "#" : This attribute sets the color of the code's background and body. The number in this set of quotes that appears after # corresponds to a predetermined color.
    • text= "" : The word in this set of quotes sets the color of the text on the document.
    • form name="" : This attribute specifies the name of a form, which is used to build the structure of what comes after it based on what Javascript knows that form name to mean. For example, the form name we will be using is calculator, which will create a specific structure to the document. [3]
    • input type="" : This is where the action happens. The "input type" attribute tells the document what sort of text the values in the rest of the brackets are. For example, they could be text, a password, a button (as it will be for a calculator), and so on. [4]
    • value="" : This command tells the document what will be contained in the input type specified above. For a calculator, these show up as our numbers (1-9) and operations (+,-,*,/,=). [5]
    • onClick="" : This syntax describes an event, which tells the document that something should occur when the button is clicked. For a calculator, we want the text that displays in each button to by understood as such. So, for the "6" button, we'll put document.calculator.ans.value+='6' between the quotes. [6]
    • br : this tag initiates a line break in the document, so that whatever comes after it will appear a line below whatever came before it. [7]
    • /form, /body, and /html : these commands tell the document that the corresponding commands that were initiated earlier in the document are now ending. [8]
    2. Advertisement
Part 2
Part 2 of 4:

Copying the Calculator Code

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Highlight the text in the box below by holding down your cursor in the top-left corner of the box, and dragging it to the bottom-right corner of the box so that all of the text is blue. Then, press "Command+C" on a Mac or "Ctrl+C" on a PC to copy the code the clipboard.
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
HTML Calculator </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 bgcolor 
 = 
 "#000000" 
 text 
 = 
 "gold" 
 > 
 < 
 form 
 name 
 = 
 "calculator" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "1" 
 onClick 
 = 
 "document.calculator.ans.value+='1'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans.value+='2'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans.value+='3'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans.value+='4'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans.value+='5'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans.value+='6'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans.value+='7'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans.value+='8'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans.value+='9'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans.value+='-'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans.value+='+'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans.value+='*'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans.value+='/'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans.value+='0'" 
 > 
 < 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans.value=eval(document.calculator.ans.value)" 
 > 
 < 
 br 
 > 
Solution is < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 > 
 </ 
 form 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
Part 3
Part 3 of 4:

Creating the HTML File

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    There are a number of programs you can use, but for convenience and quality, we recommend using TextEdit or Notepad.. [9] [10]
    • On a Mac, click on the magnifying glass at the top-right corner of your screen to open Spotlight. Once there, type in TextEdit and click on the TextEdit program, which should now be highlighted in blue.
    • On a PC, open the Start menu at the bottom-left corner of your screen. In the search bar, type Notepad and click on the Notepad application, which will appear in the results bar to the right
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    • On a Mac, click on the body of the document and press "Command+V" . You will then need to click on "Format" at the top of your screen and click "Make Plain Text" after pasting the code. [11]
    • On a PC, click on the body of the document and press "Ctrl+V".
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    To do this, click on the "File" button at the top-left hand of your window, and click on "Save As..." on a PC or "Save..." on a Mac in the menu that drops down.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    In the "Save As..." menu, type in your file name followed by ".html", and then click "Save". For example, if you wanted to call this file my first calculator, you would save the file as "MyFirstCalculator.html"
    5. Advertisement
Part 4
Part 4 of 4:

Using Your Calculator

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    To do this, type in the name of your file on Spotlight or in the Start menu's search bar as described in the previous step. You do not need to type the "html" extension.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    Your default browser will open your calculator in a new webpage.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/aid3438182-v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
    The solutions to your equations will appear in the solutions bar.
    4. Advertisement

Community Q&A

Search
Add New Question
  • Question
    Do I need to be connected to the internet?
    Community Answer
    Usually, HTML will run in your browser, even without an internet connection.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 20 Helpful 64
  • Question
    How can I get more space between the buttons?
    Community Answer
    If you are using HTML, you can add  in the cells to add extra padding or the CSS code button.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 26 Helpful 70
  • Question
    What do I do if this code is not working for me?
    Community Answer
    The code will certainly work. If it is not working for you, then there might be some errors in your code. Just copy and paste the above code and follow all the procedures, and it should work fine.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 21 Helpful 35
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Make a Program Using Notepad
      How to
      Link Within a Page Using HTML
      How to
      Insert Images with HTML
      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Create a Simple Web Page with HTML
      How to
      Insert Spaces in HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      How to
      Write HTML Code
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      How to
      Resize iFrames in HTML
      Advertisement

      References

      1. ↑ http://www.w3schools.com/html/html_basic.asp
      2. ↑ http://www.w3schools.com/html/html_head.asp
      3. ↑ http://www.w3schools.com/html/html_formatting.asp
      4. ↑ http://www.w3schools.com/tags/att_input_type.asp
      5. ↑ http://www.w3schools.com/tags/att_input_value.asp
      6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
      7. ↑ http://www.w3schools.com/tags/tag_br.asp
      8. ↑ http://www.w3schools.com/html/html_forms.asp
      9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
      1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
      2. ↑ https://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 579,488 times.

      Is this article up to date?

      Advertisement