KEMBAR78
Calculator in HTML | PDF
Scribd
Upload
22 views2 pages

Calculator in HTML

This document is an HTML code for a simple calculator application. It includes a user interface with buttons for numbers and operations, as well as JavaScript functions to handle input and calculations. The design features a clean layout with responsive styling for an optimal user experience.

Uploaded by

arnavray2011
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
22 views2 pages

Calculator in HTML

This document is an HTML code for a simple calculator application. It includes a user interface with buttons for numbers and operations, as well as JavaScript functions to handle input and calculations. The design features a clean layout with responsive styling for an optimal user experience.

Uploaded by

arnavray2011
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 lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#display {
width: 100%;
padding: 10px;
font-size: 24px;
margin-bottom: 15px;
text-align: right;
}
.buttons button {
width: 60px;
height: 60px;
font-size: 20px;
margin: 5px;
cursor: pointer;
border: none;
border-radius: 8px;
background: #eee;
}
.buttons button:hover {
background: #ddd;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
</style>
</head>
<body>

<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button onclick="append('/')">÷</button>

<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button onclick="append('*')">×</button>

<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button onclick="append('-')">−</button>

<button onclick="append('0')">0</button>
<button onclick="append('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="append('+')">+</button>

<button onclick="clearDisplay()" style="grid-column: span 4; background:


#f44336; color: white;">Clear</button>
</div>
</div>

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

function append(value) {
display.value += value;
}

function clearDisplay() {
display.value = '';
}

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

</body>
</html>

You might also like