Text 2
Text 2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
.calculator {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin: 0 auto;
text-align: center;
}
.screen {
width: 100%;
height: 40px;
margin-bottom: 10px;
font-size: 20px;
text-align: right;
}
button {
width: 40px;
height: 40px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<div class="screen" id="screen">0</div>
<button onclick="addToScreen('7')">7</button>
<button onclick="addToScreen('8')">8</button>
<button onclick="addToScreen('9')">9</button>
<button onclick="addToScreen('+')">+</button><br>
<button onclick="addToScreen('4')">4</button>
<button onclick="addToScreen('5')">5</button>
<button onclick="addToScreen('6')">6</button>
<button onclick="addToScreen('-')">-</button><br>
<button onclick="addToScreen('1')">1</button>
<button onclick="addToScreen('2')">2</button>
<button onclick="addToScreen('3')">3</button>
<button onclick="addToScreen('*')">*</button><br>
<button onclick="addToScreen('0')">0</button>
<button onclick="addToScreen('.')">.</button>
<button onclick="clearScreen()">C</button>
<button onclick="addToScreen('/')">/</button><br>
<button onclick="calculate()">=</button>
<button onclick="backspace()">←</button>
</div>
<script>
var screen = document.getElementById('screen');
function addToScreen(value) {
if (value.match(/[0-9\.\+\-\*\/]/)) {
screen.textContent += value;
}
}
function clearScreen() {
screen.textContent = '';
}
function calculate() {
try {
screen.textContent = eval(screen.textContent);
} catch (error) {
screen.textContent = 'Error';
}
}
function backspace() {
var currentText = screen.textContent;
screen.textContent = currentText.slice(0, -1);
}
document.addEventListener('keydown', function(event) {
var key = event.key;
if (key.match(/[0-9\.\+\-\*\/\n]/)) {
if (key === 'Enter') {
calculate();
} else if (key === 'Backspace') {
backspace();
} else {
addToScreen(key);
}
}
});
</script>
</body>
</html>