Scribd
Upload
31 views

HTML calculator

The document is an HTML code for a simple calculator application. It includes a styled interface with buttons for numbers and operations, as well as JavaScript functions to handle input and calculations. The calculator allows users to perform basic arithmetic operations and displays results or errors accordingly.

Uploaded by

rashmideore1408
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views

HTML calculator

The document is an HTML code for a simple calculator application. It includes a styled interface with buttons for numbers and operations, as well as JavaScript functions to handle input and calculations. The calculator allows users to perform basic arithmetic operations and displays results or errors accordingly.

Uploaded by

rashmideore1408
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Calculator App</title>
<style>
/* Calculator styles */
#calculator {
width: 230px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}

#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
border: 1px solid #ddd;
padding: 10px;
background-color: #fff;
font-size: 18px;
}

.button {
width: 50px;
height: 40px;
margin: 2px;
border: none;
border-radius: 5px;
background-color: #e7e7e7;
font-size: 16px;
cursor: pointer;
}

.button:hover {
background-color: #d7d7d7;
}
</style>
</head>
<body>
<div id="calculator">
<!-- Calculator display -->
<input type="text" id="display" disabled>
<!-- Calculator keys -->
<button class="button" onclick="appendNumber('1')">1</button>
<button class="button" onclick="appendNumber('2')">2</button>
<button class="button" onclick="appendNumber('3')">3</button>
<button class="button" onclick="appendOperator('+')">+</button>
<button class="button" onclick="appendNumber('4')">4</button>
<button class="button" onclick="appendNumber('5')">5</button>
<button class="button" onclick="appendNumber('6')">6</button>
<button class="button" onclick="appendOperator('-')">-</button>
<button class="button" onclick="appendNumber('7')">7</button>
<button class="button" onclick="appendNumber('8')">8</button>
<button class="button" onclick="appendNumber('9')">9</button>
<button class="button" onclick="appendOperator('*')">*</button>
<button class="button" onclick="appendNumber('0')">0</button>
<button class="button" onclick="appendOperator('/')">/</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="clearDisplay()">C</button>
</div>

<script>
let display = document.getElementById('display');

function appendNumber(number) {
display.value += number;
}

function appendOperator(operator) {
display.value += ' ' + operator + ' ';
}

function calculate() {
try {
display.value = eval(display.value);
} catch (e) {
display.value = 'Error';
}
}

function clearDisplay() {
display.value = '';
}
</script>
</body>
</html>

You might also like