Scribd
Upload
6 views3 pages

Calculator

This document is an HTML code for a modern scientific calculator with a user-friendly interface. It includes buttons for basic arithmetic operations, trigonometric functions, logarithms, and constants like π and e. The calculator features a responsive design and JavaScript functions to handle input, clear the display, and perform calculations.

Uploaded by

sofianabbas2010
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 views3 pages

Calculator

This document is an HTML code for a modern scientific calculator with a user-friendly interface. It includes buttons for basic arithmetic operations, trigonometric functions, logarithms, and constants like π and e. The calculator features a responsive design and JavaScript functions to handle input, clear the display, and perform calculations.

Uploaded by

sofianabbas2010
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Scientific Calculator</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
color: #fff;
}
.calculator {
background: #1e1e1e;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
text-align: center;
width: 320px;
}
#display {
width: 100%;
height: 60px;
font-size: 1.8em;
text-align: right;
margin-bottom: 15px;
padding: 10px;
border: none;
border-radius: 8px;
background: #292929;
color: #fff;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
width: 100%;
height: 60px;
font-size: 1.2em;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: #333;
color: #fff;
}
button:active {
transform: scale(0.95);
}
.operator {
background: #ff9500;
color: #fff;
}
.equal {
background: #34c759;
}
.clear {
background: #ff3b30;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="appendValue('(')">(</button>
<button onclick="appendValue(')')">)</button>
<button class="operator" onclick="appendValue('/')">÷</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('*')">×</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button class="equal" onclick="calculate()">=</button>
<button class="operator" onclick="appendValue('**')">^</button>
<button onclick="appendValue('Math.sin(')">sin</button>
<button onclick="appendValue('Math.cos(')">cos</button>
<button onclick="appendValue('Math.tan(')">tan</button>
<button onclick="appendValue('Math.log(')">log</button>
<button onclick="appendValue('Math.sqrt(')">√</button>
<button onclick="appendValue('Math.exp(')">exp</button>
<button onclick="appendValue('Math.PI')">π</button>
<button onclick="appendValue('Math.E')">e</button>
</div>
</div>
<script>
function appendValue(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
document.getElementById('display').value =
eval(document.getElementById('display').value);
} catch (error) {
alert('Invalid expression');
}
}
</script>
</body>
</html>

You might also like