Scribd
Upload
37 views

Simple HTML Calculator

how to build simple html calculator

Uploaded by

Maisarah Mohd Pauzi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Simple HTML Calculator

how to build simple html calculator

Uploaded by

Maisarah Mohd Pauzi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Creating a simple calculator using HTML

Part 1

1. Basic syntax before adding any elements (textfile, buttons, style, function, etc).

2. Add form syntax to create calculator form

3. Add syntax to insert textfile. Using the input type, we must include the type, name, and initialize
the value of input.

At this point, the output will look like this.

4. Add syntax to input reset button.


The output will look like this:

5. Use <br> tag to start new line.


6. Add first button.

The output will look like this:

To add the functionality of the button when clicked, add this syntax.
So when we click the button, number 1 will appear in the textfield.

7. For other button numbers, use the same syntax with different number.

The output:
8. Adding mathematical operation buttons. (add, subtract, multiply, divide).

If you wish to put the button in the position next to button number 5, simply add this syntax
after the button syntax.

To put a space between buttons, add this &nbsp; between the button syntax.

The output will look like this:

9. Adding equal button (=).

10. Finally, the simple calculator using HTML form will look like this.
Part 2: Styling the calculator. (without using CSS)

1. Adding background color


Add syntax style=background: color name to the existing code.
e.g:

So the output will look like this:

2. Adding style to button, modify the code like this:

The output will look like this:

To add more style, such as modify the font size, add new code like this:

The new output:

You may search the code for other style to enhance how the output looks like.

3. Finally, the simple calculator that I have modified will look like this:

You might also like