Scribd
Upload
685 views

HTML Calculator

The document provides two code examples for making a simple calculator using HTML and CSS. The first uses a table with rows and columns to layout the buttons. The second uses CSS grid properties to position the buttons. Both examples include JavaScript code to handle button clicks and perform calculations by updating the value of a result text input.

Uploaded by

Mohammad Ali Hussaini
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
685 views

HTML Calculator

The document provides two code examples for making a simple calculator using HTML and CSS. The first uses a table with rows and columns to layout the buttons. The second uses CSS grid properties to position the buttons. Both examples include JavaScript code to handle button clicks and perform calculations by updating the value of a result text input.

Uploaded by

Mohammad Ali Hussaini
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Certainly!

Here are two examples of code for making a simple calculator using HTML and CSS:

Example 1: Simple Calculator using Table

```

<!DOCTYPE html>

<html>

<head>

<title>Simple Calculator</title>

<style>

table, td {

border: 1px solid black;

border-collapse: collapse;

td {

padding: 5px;

text-align: center;

input[type="text"] {

width: 100%;

height: 30px;

padding: 5px;

font-size: 18px;

text-align: right;

border: 1px solid black;

input[type="button"] {

width: 100%;

height: 30px;
font-size: 18px;

background-color: #4CAF50;

border: none;

color: white;

cursor: pointer;

input[type="button"]:hover {

background-color: #3E8E41;

</style>

</head>

<body>

<table>

<tr>

<td colspan="4"><input type="text" id="result" readonly></td>

</tr>

<tr>

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


onclick="document.getElementById('result').value += '1'"></td>

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


onclick="document.getElementById('result').value += '2'"></td>

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


onclick="document.getElementById('result').value += '3'"></td>

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


onclick="document.getElementById('result').value += '+'"></td>

</tr>

<tr>

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


onclick="document.getElementById('result').value += '4'"></td>

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


onclick="document.getElementById('result').value += '5'"></td>
<td><input type="button" value="6"
onclick="document.getElementById('result').value += '6'"></td>

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


onclick="document.getElementById('result').value += '-'"></td>

</tr>

<tr>

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


onclick="document.getElementById('result').value += '7'"></td>

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


onclick="document.getElementById('result').value += '8'"></td>

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


onclick="document.getElementById('result').value += '9'"></td>

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


onclick="document.getElementById('result').value += '*'"></td>

</tr>

<tr>

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


onclick="document.getElementById('result').value = ''"></td>

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


onclick="document.getElementById('result').value += '0'"></td>

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


onclick="document.getElementById('result').value =
eval(document.getElementById('result').value)"></td>

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


onclick="document.getElementById('result').value += '/'"></td>

</tr>

</table>

</body>

</html>

```

Example 2: Simple Calculator using Grid


```

<!DOCTYPE html>

<html>

<head>

<title>Simple Calculator</title>

<style>

.calculator {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-template-rows: repeat(5, 1fr);

grid-gap: 5px;

padding: 10px;

border: 1px solid black;

background-color: #f2f2f2;

input[type="text"] {

grid-column: 1 / span 4;

height: 50px;

font-size: 24px;

text-align: right;

border: 1px solid black;

padding: 5px;

input[type="button"] {

height: 50px;

font-size: 24px;

background-color: #4CAF50;

border: none;

color: white;
cursor: pointer;

input[type="button"]:hover {

background-color: #3E8E41;

</style>

</head>

<body>

<div class="calculator">

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

<input type="button" value="1" onclick="document.getElementById('result').value +=


'1'">

<input type="button" value="2" onclick="document.getElementById('result').value +=


'2'">

<input type="button" value="3" onclick="document.getElementById('result').value +=


'3'">

<input type="button" value="+" onclick="document.getElementById('result').value +=


'+'">

<input type="button" value="4" onclick="document.getElementById('result').value +=


'4'">

<input type="button" value="5" onclick="document.getElementById('result').value +=


'5'">

<input type="button" value="6" onclick="document.getElementById('result').value +=


'6'">

<input type="button" value="-" onclick="document.getElementById('result').value +=


'-'">

<input type="button" value="7" onclick="document.getElementById('result').value +=


'7'">

<input type="button" value="8" onclick="document.getElementById('result').value +=


'8'">

<input type="button" value="9" onclick="document.getElementById('result').value +=


'9'">
<input type="button" value="*" onclick="document.getElementById('result').value +=
'*'">

<input type="button" value="C" onclick="document.getElementById('result').value = ''">

<input type="button" value="0" onclick="document.getElementById('result').value +=


'0'">

<input type="button" value="=" onclick="document.getElementById('result').value =


eval(document.getElementById('result').value)">

<input type="button" value="/" onclick="document.getElementById('result').value +=


'/'">

</div>

</body>

</html>

```

Note that these examples are just simple calculators and do not cover all possible cases or error
handling. They should be used as a starting point for building a more comprehensive calculator program.

You might also like