Scribd
Upload
50 views4 pages

Calcuuu

The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

Uploaded by

hamadrasool168
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
50 views4 pages

Calcuuu

The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

Uploaded by

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

Open In App

GEEKSFORGEEKS

HTML Calculator

HTML calculator is used for performing basic mathematical operations like Addition,
subtraction, multiplication, and division.

You can find the live preview below, try it:

To design the HTML calculator, we will use HTML, and CSS. HTML is used to design
the basic structure of the calculator. CSS styles are used to apply styles on the
calculator.

Approach:

Created the design with the HTML Table where first is holding the input field
with id=”result” and the rest are filled with input button.

With every click of the button, it displays the respective value of the button to
the input field by using the function dis().

myFunction() is used to set the value pressed from the keyboard to the same input
field.

Note: Please check this JavaScript Calculator for the complete calculator code
including JavaScript. In this article, we have only added HTML and CSS code to
design the calculator.

Example:

<!DOCTYPE html>

<html>

<head>

<title>HTML Calculator</title>

<!-- For styling -->

<style>

table {

border: 1px solid black;

margin-left: auto;

margin-right: auto;
}

input[type="button"] {

width: 100%;

padding: 20px 40px;

background-color: green;

color: white;

font-size: 24px;

font-weight: bold;

border: none;

border-radius: 5px;

input[type="text"] {

padding: 20px 30px;

font-size: 24px;

font-weight: bold;

border: none;

border-radius: 5px;

border: 2px solid black;

</style>

</head>

<body>

<!-- Create table -->

<table id="calcu">

<tr>
<td colspan="3">

<input type="text" id="result">

</td>

<td><input type="button" value="c"></td>

</tr>

<tr>

<td><input type="button" value="1"></td>

<td><input type="button" value="2"></td>

<td><input type="button" value="3"></td>

<td><input type="button" value="/"></td>

</tr>

<tr>

<td><input type="button" value="4"></td>

<td><input type="button" value="5"></td>

<td><input type="button" value="6"></td>

<td><input type="button" value="*"></td>

</tr>

<tr>

<td><input type="button" value="7"></td>

<td><input type="button" value="8"></td>

<td><input type="button" value="9"></td>

<td><input type="button" value="-"></td>

</tr>

<tr>

<td><input type="button" value="0"></td>

<td><input type="button" value="."></td>

<td><input type="button" value="="></td>

<td><input type="button" value="+"></td>

</tr>
</table>

</body>

</html>

Output:



HTML Calculator

You might also like