Dating Format
Dating Format
DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
width: 200px;
margin: 0 auto;
}
.display {
width: 100%;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 24px;
}
.button {
width: 50px;
height: 50px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<br>
<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="setOperation('+')">+</button>
<br>
<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="setOperation('-')">-</button>
<br>
<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="setOperation('*')">*</button>
<br>
<button class="button" onclick="appendNumber(0)">0</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="setOperation('/')">/</button>
</div>
<script>
let display = document.getElementById('display');
let firstNumber = '';
let secondNumber = '';
let operation = '';
function appendNumber(number) {
if (operation === '') {
firstNumber += number;
display.value = firstNumber;
} else {
secondNumber += number;
display.value = secondNumber;
}
}
function setOperation(op) {
if (firstNumber !== '') {
operation = op;
}
}
function calculate() {
let result;
switch (operation) {
case '+':
result = parseFloat(firstNumber) + parseFloat(secondNumber);
break;
case '-':
result = parseFloat(firstNumber) - parseFloat(secondNumber);
break;
case '*':
result = parseFloat(firstNumber) * parseFloat(secondNumber);
break;
case '/':
result = parseFloat(firstNumber) / parseFloat(secondNumber);
break;
default:
result = 'Error';
}
display.value = result;
firstNumber = result;
secondNumber = '';
operation = '';
}
function clearDisplay() {
display.value = '';
firstNumber = '';
secondNumber = '';
operation = '';
}
</script>
</body>
</html>