Scribd
Upload
6 views2 pages

Calculator Source Code

The document is an HTML code for a simple calculator web application. It includes a user interface with buttons for numbers, operations, and a display textbox, styled with CSS. JavaScript functions are provided to handle input, clear the display, and calculate results using the eval function.

Uploaded by

akshusharma177
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
6 views2 pages

Calculator Source Code

The document is an HTML code for a simple calculator web application. It includes a user interface with buttons for numbers, operations, and a display textbox, styled with CSS. JavaScript functions are provided to handle input, clear the display, and calculate results using the eval function.

Uploaded by

akshusharma177
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/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculator {
background: #fff;
padding: 20px;
width: 260px;
margin: 50px auto;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.calculator h2 {
text-align: center;
margin-bottom: 20px;
}
#textbox {
width: 100%;
height: 40px;
font-size: 20px;
text-align: right;
padding-right: 10px;
border: 2px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
table {
width: 100%;
margin-top: 20px;
}
th {
width: 25%;
padding: 15px 0;
font-size: 18px;
background-color: #e0e0e0;
cursor: pointer;
border-radius: 5px;
transition: background 0.2s;
}
th:hover {
background-color: #ccc;
}
.equal_op {
background-color: #4CAF50;
color: white;
height: 100%;
}
.equal_op:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Calculator</h2>
<input type="text" id="textbox" readonly>
<table>
<tr>
<th onclick="clr()">C</th>
<th onclick="add('/')">/</th>
<th onclick="add('*')">*</th>
<th onclick="add('-')">-</th>
</tr>
<tr>
<th onclick="add('7')">7</th>
<th onclick="add('8')">8</th>
<th onclick="add('9')">9</th>
<th onclick="add('+')">+</th>
</tr>
<tr>
<th onclick="add('4')">4</th>
<th onclick="add('5')">5</th>
<th onclick="add('6')">6</th>
<th onclick="add('%')">%</th>
</tr>
<tr>
<th onclick="add('1')">1</th>
<th onclick="add('2')">2</th>
<th onclick="add('3')">3</th>
<th class="equal_op" rowspan="2" onclick="equate()">=</th>
</tr>
<tr>
<th colspan="2" onclick="add('0')">0</th>
<th onclick="add('.')">.</th>
</tr>
</table>
</div>

<script>
function add(character) {
document.getElementById("textbox").value += character;
}

function clr() {
document.getElementById("textbox").value = "";
}

function equate() {
try {
let result = eval(document.getElementById("textbox").value);
document.getElementById("textbox").value = result;
} catch (e) {
document.getElementById("textbox").value = "Error";
}
}
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy