HTML ON HOW TO MAKE A CALCULATOR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title> JARB Calculate</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;
flex-direction: column;
}
.title {
font-size: 2em;
font-weight: bold;
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
.calculator {
background: #1e1e1e;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
text-align: center;
width: 360px;
display: flex;
flex-direction: column;
align-items: center;
}
#display {
width: calc(100% - 20px);
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: 90px;
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="title">JARB Calculate</div>
<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('-
')">−</bu on>
<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');
}
}
document.addEventListener('keydown', function(event) {
const key = event.key;
if (!isNaN(key) || ['+', '-', '*', '/', '(', ')', '.',
'^'].includes(key)) {
appendValue(key);
} else if (key === 'Enter') {
calculate();
} else if (key === 'Backspace') {
let display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
});
</script>
</body>
</html>
